Kendo Grid Sort Not Working

[Raja]

I have Kendo MVC Grid on my page with multi column sorting enabled. But sorting on two specific fields is not working:

1. For a column with conditional formatting done through JavaScript

2. Column with ClientTemaplate.

 

Below is my code.

@(Html.Kendo().Grid<Info>()
           .Name("Info")
           .Columns(columns =>
           {
               columns.Bound(c => c.ColumnA).Width("4%").Title("A #").Sortable(true);
               columns.Bound(c => c.ColumnB).Width("4%").Title("B #").Sortable(true);
               columns.Bound(c => c.ColumnC).ClientTemplate("#=ColumnC.Name#").Sortable(true).Width("11%").Title("C");
           })
           .Editable(edit => edit.Mode(GridEditMode.InLine))
           .Events(events => { events.Save("gridSave"); })
           .Sortable(sort => sort.SortMode(GridSortMode.MultipleColumn))
           .DataSource(source => source
               .Ajax()
               .Sort(sort => sort.Add("ColumnA").Descending())
               .ServerOperation(false)
               .Model(model =>
               {
                   model.Id(f => f.Id);
                   model.Field(f => f.ColumnA).Editable(false);
                   model.Field(f => f.ColumnB).Editable(false);
                   model.Field(f => f.ColumnC).DefaultValue(new ColumnC() { Id = 0 });
               })
               //other configuration removed
               .Events(events => { events.RequestEnd("sourceReadComplete");  })
           )
   )

 

Case 1: I am adding a css class based on a condition. Sorting is not working on this column. If I comment the code that is adding the class, then the sort works fine.

function sourceReadComplete(e) {
                var grid = $("#Info").data("kendoGrid");
                grid.one("dataBound", function () {
                    var gridData = grid.dataSource.view();
                    for (var i = 0; i < gridData.length; i++) {
                        //get the item uid
                        var currentUid = gridData[i].uid;
                        //find the row based on the uid and the custom class
                        var currentRow = grid.table.find("tr[data-uid='" + currentUid + "']");

                        //if the record fits the condition
                        if (gridData[i].Condition == true) {
                            currentRow.find("td:first").addClass("followup")
                        }
                    }
                });

        }

 

Case 2: Sorting on Column C is not working. If I bind the column directly to ColumnC.Name then sorting works. But I cannot do that as I want a dropdown for this field in Edit mode.

 

[Konstantin Dikov]

Hello Raja,

Regarding the column bound to the complex object, note that all data operations over the column will be performed on the field bound to the column and those operations are not supported for complex object. With that in mind, you might consider using a ForeignKey column instead or bound the column to Name field and link the DropDown editor to that field.

As for the second issue, adding a custom class to the TD element does not cause any problems on my side and there must be something else that causes the problem. You could inspect the browser's console for any JavaScript errors.


Regards,
Konstantin Dikov
Telerik by Progress