Bind the new data source without re-initializing kendo grid which was already initialized

Question

I am using kendo grid. It has around 12 columns which was taking time to initialize kendo grid. Based on the search criteria i need to refresh with the new data without re initializing the kendo grid(which was effectiing performance). Just i need to read the data with the new parameters and bind the data to the existing grid itself.

Please provide me: 1. How to read the data explicitly using kendo data source with the new parameters?? 2. How to bind that data source to kendo grid without reinitialization??

Please provide some example if possible...Any help much appreciated

Answer 1

This is what is working for me. I can't say that it's the best solution. I initialize the gird on first load only then I set the DataSouce on subsequent changes to the grid. In this example my assignmentFitlers object contains 38 different optional parameters that define which contacts to view. My grid reload each time the filters change. I think this could work for you.

        function bindGrid(e) {
        var assignmentFilters = e.assignmentFilters;

        var gridDataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: '@Url.Action("Read", "GridModule")',
                    type: 'POST',
                    contentType: 'application/json'
                },
                parameterMap: function (options) {
                                            // Pass in Assignment filters
                    options.assignmentFilters = assignmentFilters;
                    return JSON.stringify(options);
                }
            },
            pageSize: 20,
            serverPaging: true,
            serverSorting: true,
            serverFiltering: true,
            schema: {

                data: "data",
                total: "totalRows"
            }
        });

        var $grid = $('#gridAssignments');

        if (e.firstLoad) {
            $grid.kendoGrid({
                scrollable: true,
                pageable: {
                    refresh: true,
                    pageSizes: [20, 50, 100, 500, 1000],
                    buttonCount: 12,
                    messages: {
                        display: "Showing {0}-{1} from {2} Provider Contacts",
                        empty: "No Contacts Match the Filter Criteria",
                        itemsPerPage: "Contacts per page"
                    }
                },
                reorderable: true,
                navigatable: true,
                change: gridOnChange,
                dataBound: gridOnDataBound,
                dataSource: gridDataSource,
                columnReorder: gridColumnReorder, 
                columnHide: gridColumnHide,
                columnResize: gridColumnResize,
                columnShow: gridColumnShow,
                columnMenu: {
                    sortable: false,
                    messages: {
                        columns: "Choose columns",
                        filter: "Filter",
                       }
                },
                resizable: true,
                height: '720px',
                filterable: true,
                selectable: "row",
                sortable: {
                    mode: "single",
                    allowUnsort: true
                },
                columns: [ @Html.Raw(Model.GridColumns.Columns) ]
        });
        } else {
            $grid.data('kendoGrid').setDataSource(gridDataSource);
        }

    }