使用jQuery清空具有相同数据的行的以下单元格

Question

I have this simple fiddle: http://jsfiddle.net/anilca/kbfssbd4/

var dataArr = [
    { DayNum: 0, Day: "Sunday", Group: "A" },
    { DayNum: 1, Day: "Sunday", Group: "B" },
    { DayNum: 2, Day: "Sunday", Group: "C" },
    { DayNum: 3, Day: "Monday", Group: "B" },
    { DayNum: 4, Day: "Monday", Group: "A" },
    { DayNum: 5, Day: "Tuesday", Group: "C" },
    { DayNum: 6, Day: "Tuesday", Group: "B" }
];
var grid = $("#grid").kendoGrid({
    dataSource: {
        data: dataArr,
        sort: [
            { field: "DayNum", dir: "asc" },
            { field: "Group", dir: "asc" }
        ],
        schema: {
            model: {
                fields: {
                    DayNum: { type: "number" },
                    Day: { type: "string" },
                    Group: { type: "string" }
                }
            }
        }
    },
    selectable: true,          
    columns: [
        {
            field: "Day",
            title: "Day"
        },
        {
            field: "Group",
            title: "Group"
        }
    ]
}).data("kendoGrid");

I want to show empty cells for Day column for the row after the first appearance of the appropriate day. I mean my aim is to have the following screenshot without manipulating the data:

I thinks it's possible to do that using jquery after building the kendo grid. But I couldn't find out how to do it.

Thanks in advance,

Answer 1

I would do it using schema.parse method. This method manipulates the data but doesn't changes it, which is good. And no jQuery needed:

parse: function(data) {
    var lastDay = "";

    for (var i = 0; i < data.length; i++) {
        if (lastDay == "" || data[i].Day != lastDay) {
            lastDay = data[i].Day;
        }
        else {
            data[i].Day = "";
        }
    }

    return data;
}

Updated Fiddle .

UPDATE:

Yeah, I was wrong when I said that the parse doesn't changes the data. IN fact it changes. What you can do is to create dummy property and manipulate it:

parse: function(data) {
    var lastDay = "";

    for (var i = 0; i < data.length; i++) {
        if (lastDay == "" || data[i].Day != lastDay) {
            lastDay = data[i].Day;
            data[i].DayText = data[i].Day;
        }
        else {
            data[i].DayText = "";
        }
    }

    return data;
}

See that I'm using(and creating) DayText this time. Your first column definition changes to:

{
    field: "DayText",
    title: "Day"
}

So it keeo the Day property as is. Fiddle .

Answer 2

I threw a jQuery-each function at the end that seems to do the trick, try adding it to the bottom of your javascript:

var day = "";  // holds latest day value

// for each row...
$('tr').each(function(){
    var thisDay = $(this).find('td:first').html();  // grab the text from the first column
    if (thisDay == day)  // if its the same as last time
    {
        $(this).find('td:first').html('');  // hide it
    }
    day = thisDay;  // hold onto this day
});