Showing custon data in results blocks

[codenchips]

I see you can pass custom data to results and access it on hover or click using the callbacks but - what I really need is to be able to just show that data in the match block without any user interaction.

What would be the best approach to this please?

I think something similar has been asked before but it was a while ago so not sure if anyone has done anything since. It would be a really useful addition!

[carloquilala]

You can use the decorator's render property to manipulate the elements inside each match/team nodes like so,

$('#demo').bracket({
    'decorator': {
        edit: edit_fn,
        render: render_fn
    }
});

/* Edit function is called when team label is clicked */
function edit_fn(container, data, doneCb) {
    var input = $('<input type="text">')
    input.val(data ? data : {})
    container.html(input)
    input.focus()
    input.blur(function() {
    var inputValue = input.val()
        if (inputValue.length === 0) {
            doneCb(null);
        } else {
            doneCb(data)
        }
    })
}

/* Render function is called for each team label when data is changed, data
 * contains the data object given in init and belonging to this slot.
 *
 * 'state' is one of the following strings:
 * - empty-bye: No data or score and there won't team advancing to this place
 * - empty-tbd: No data or score yet. A team will advance here later
 * - entry-no-score: Data available, but no score given yet
 * - entry-default-win: Data available, score will never be given as opponent is BYE
 * - entry-complete: Data and score available
 */
function render_fn(container, data, score, state) {
    // get the parent team container
    _parent = container.parents('div.team');
    
    // do any manipulation to any 
    // child element inside parent team container
    // using data provided
    var el = $('<div class="new-element" />');
    el.appendTo(_parent);
    
    switch(state) {
    case "empty-bye":
        container.append("BYE")
        return;
    case "empty-tbd":
        container.append("TBD")
        return;
    case "entry-no-score":
    case "entry-default-win":
    case "entry-complete":
        container.append(data.team_name)
        return;
    }
}

Like what I've did in my part, I've added an element where I can place my match controls (edit, in-progress/reopen, and view) and will popup when I hover each match. As well as the 'Advanced' label

Hope this helps