Indicate ties in Kendo UI leaderboard grid

Question

I am using the Kendo UI Grid to create a scoreboard for a competition. My DataSource receives a list of team names and their associated rankings from the database. Therefore, each JSON object contains a team name and that team's ranking. The rankings are simple integers.

Assume for the sake of example that there are four teams and their respective rankings are 1, 2, 3, and 3. In other words, two teams tied for 3rd place. Here are my requirements for the Kendo UI Grid:

The presented ranking for ties should have a "T" in front of the ranking. I have written some Javascript to accomplish this: http://jsfiddle.net/mwassmer/4FXdc/
The ranking column in the grid should be sortable. Therefore, I assume that the "field" property for the grid column must refer to the original ranking column in the DataSource, not the "presentation" version of the ranking that marks ties with "T".

I assume that I need to use a column template to incorporate my Javascript "ties" code, but I'm not sure how to go about that. I have successfully used column templates before, but not like this.

Some demo Javascript code for adding the "T" indicators for ties is below. Assuming that grid column templates are the way to go, I am confused about how to incorporate this code into my templates.

$(function () {
    var ranks = [1,2,3,3];    
    var counts = {};
    for(var i = 0; i< ranks.length; i++) {
        var num = ranks[i];
        counts[num] = counts[num] ? counts[num]+1 : 1;
    }

    $.each(ranks, function(index, value) {
        if (counts[value] == 1)
        {
            $("#ranksTies").append("<li>" + value + "</li>");
        }
        else
        {
            $("#ranksTies").append("<li>T" + value + "</li>");
        }            
    });
});

Petur Subev Petur Subev · Accepted Answer · 2013-02-19T19:49:11

I really easy template for the column should do the work:

template:"T#= ++nameOfTheFieldd #"

Here is a link to play with.

Indicate ties in Kendo UI leaderboard grid

1 Answers