Kendo Grid Sort Not Working

2 posts, 0 answers
  1. Raja
    Raja avatar
    47 posts
    Member since:
    Oct 2013

    Posted 17 Jan 2017 Link to this post

    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.

     

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 19 Jan 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top