[Solved] OnRowDataBound not firing when grouping enabled (Groupable)

[Jacob Dvir]

Hi,

I had a problem where the OnRowDataBound event on the client didn't fire (sometime) on data rows but did fire on group rows.
This is my grid:

<div id="cntGrid">
    <% Html.Telerik().Grid<AttendanceWork>()
        .Name("Grid")
        .PrefixUrlParameters(false)
        .Columns(columns =>
        {
            columns.Bound(o => o.Department).Width(150).Title("Department");
            columns.Bound(o => o.UserName).Width(150).Title("Employee");
            columns.Bound(o => o.EnrollNumber).Width(50).Title("Id");
            columns.Bound(o => o.WorkStart).Format("{0:MM/dd/yyyy HH:mm}").Width(150).Title("Enter");
            columns.Bound(o => o.WorkEnd).Format("{0:MM/dd/yyyy HH:mm}").Width(150).Title("Leave");
            columns.Bound(o => o.TotalTime).Width(50).Title("Total Time");
            columns.Bound(o => o.DayCounter).Width(30).Title("#").HeaderHtmlAttributes(new { title = "Rows Per Day" }).HtmlAttributes(new { title = "Rows Per Day" });
            columns.Bound(o => o.Passageways).Title("Passageways");
            columns.Bound(o => o.DayCounter).Title("Remarks").ClientTemplate("<span></span>").HtmlAttributes(new { @class = "col-remarks" });
        })
        .DataBinding(dataBinding => dataBinding.Ajax().Select("GridAjax", "Attendance").Enabled(true))
        .Scrollable(scrolling => scrolling.Enabled(false))
        .Sortable(sorting => sorting.Enabled(true).SortMode(GridSortMode.SingleColumn).OrderBy(o => o.Add(c => c.WorkStart)))
        .Pageable(paging => paging.Enabled(false))
        .Filterable(filtering => filtering.Enabled(true))
        .Groupable(grouping =>
        {
            grouping.Enabled(true);
            grouping.Groups(groups =>
            {
                groups.Add(c => c.Department);
                groups.Add(c => c.UserName);
            });
        })
        .Footer(true)
        .ToolBar(commands =>
        {
            commands.Custom().Text("Export to CSV").Action("Export", "Attendance");
        })
        .EnableCustomBinding(true)
        .ClientEvents(events =>
        {
            events.OnDataBound("onDataBound");
            events.OnRowDataBound("onRowDataBound");
        })
        .Render();
    %>
</div>

what i did was to bind the OnDataBound function (which worked) and did this:

function onDataBound(e) {
    writeFilterString();

    var grid = $('#Grid').data('tGrid');
    var data = grid.data;

    var rows = jQuery.grep(grid.$tbody[0].rows, function (item, i) {
        return !$(item).hasClass("t-grouping-row");
    });

    for (var i = 0; i < data.length; i++) {
        checkRow($(rows[i]), data[i]);
    }
}

then, implement this function:

function checkRow(row, dataItem) {
    var a_remarks = new Array();

    if (dataItem.WorkStart == null)
        a_remarks.push("No enter date punched.");

    if (dataItem.WorkEnd == null)
        a_remarks.push("No leave date punched.");

    if (a_remarks.length > 0) {
        var s = new String();
        s += "<ul>";
        for (x in a_remarks) {
            s += "<li>" + a_remarks[x] + "<\/li>";
        }
        s += "<\/ul>";
        row.children("td.col-remarks").html(s).addClass("error");
    }
}

That's it. I hope i will save time in the future to someone.