Cannot read property 'sort' of null

Question

I have one template for the grid which I used in two places and grids have a different id's of course.

@(Html.Kendo().Grid(Model.Equipment)

        .Name(string.Format("equipmentGridReview-{0}", DateTime.Now.Ticks))
        .Columns(columns =>
        {
            columns.Bound(c => c.Quantity).Title("Qty");
            columns.Bound(c => c.ItemName).Title("Item / Billing Code");
            columns.Bound(c => c.ItemId).Title("Item#");
            columns.Bound(c => c.Disposition).Title("Disposition");
            columns.Bound(c => c.InvLoc).Title("Inv Loc");
            columns.Bound(c => c.EqLoc).Title("Eq Loc");
            columns.Bound(c => c.UnitPrice).Title("Unit Price").Format("{0:c}");
            columns.Bound(c => c.Completed).Title("Completed");
        })
        .Sortable()
        .Resizable(resize => resize.Columns(true))
        .Events(e => e.DataBound("someModule.onDataBoundToGrid"))
        .Reorderable(reorder => reorder.Columns(true))
        .Selectable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .ServerOperation(false)
      )
)

Here is my js module

function getEquipmentGrids() {
        var grids = [];

        $.each($("[id|='equipmentGridReview']"), function(idx, element) {
            grids.push($(element).data("kendoGrid"));
        });

        return grids;
    }

    function onDataBoundToGrid() {
            setCommonDateSource(this);
        }

    function setCommonDateSource(newGrid) {
            $.each(getEquipmentGrids(), function(idx, grid) {
                if (grid !== newGrid && grid.dataSource !== newGrid.dataSource) {
                    newGrid.setDataSource(grid.dataSource);
                }
            });
        }

And when I switching between I get an error. First Array(1) I get when I first upload tab first time, second [init, init] I get when I switching between tabs.

Are you calling setDataSource from inside a DataBound handler? Why? — GaloisGirl, Jan 30 '20 at 13:41
why do you want to call dataBound? It's an event that Kendo throws, for example when the dataSource has loaded. You don't need to do anything special for two components to share a dataSource: https://demos.telerik.com/aspnet-mvc/datasource/shared-datasource — GaloisGirl, Jan 30 '20 at 16:46

score 1 · Answer 1 · answered Feb 03 '20 at 15:38

It seems you are setting the dataSource of the second grid in the first's dataBound event. This could lead to some unintended behavior.

The good news is you don't need to do anything special for two components to share a dataSource. As you can see on the example at https://demos.telerik.com/aspnet-mvc/datasource/shared-datasource , a grid and an AutoComplete simply are passed the same dataSource, and it just works. Both will dynamically reflect any changes made to the data. The same will work for two grids, or any two widgets that have linear data.

Cannot read property 'sort' of null

1 Answers1