Grid under postback conditions Asp.Net pages

[David]

We have to retro fit the KendoUI Grid to existing pages which means the grid has to post back the form when a record is selected so that the details will load for that record and then grid would have to reload the current state (filtering state, page, grouping, etc). I  have managed to make all the work by saving the grid's options that get lost and successfully reloaded the grid. 

The one issue I have now is when I turn on filterable option to Mode: "row", it fails once I set the datasource to the grid.  It comes up with an Length is not defined JS error message and I noticed that the datasource didn't even get a chance to load the data so I'm sure that's part of the reason but I'm curious what is different about setting the mode to row vs true that would cause this.

Here is the snippet of the load data function that worked under filterable = true vs mode = "row":

function () {
            var savedOptions = QuicxKendo.getPageState();
            var pageSize = QuicxKendo.options.pageSize || 15;
    
            if (savedOptions != null) {
                pageSize = savedOptions.pageSize;
            }

            var dataSource = new kendo.data.DataSource({
                transport: {
                    read:
                        function (pageOptions) {
                            QuicxKendo.setPageState(pageOptions.data);
                            var data = "{ options: " + QuicxKendo.stringifyData(pageOptions.data) + "}";

                            $.ajax({
                                type: "POST",
                                url: QuicxKendo.options.dataUrl,
                                datatype: "json",
                                contentType: "application/json; charset=utf-8",
                                data: data,   // ParameterMap does not work when transport methods are using functions
                                success: function (result) {                            
                                    if (result.d.Success) {
                                        if (QuicxKendo.isPostback()) {
                                            var gridOptions = QuicxKendo.getGridOptions();

                                            //-- grouping is lost on postback so set it back in
                                            if (gridOptions) {
                                                QuicxKendo.grid.dataSource._group = gridOptions.dataSource.group;                                        
                                            }
                                
                                            QuicxKendo.setIsPostback(false);                                
                                        }

                                        // notify the DataSource that the operation is complete
                                        pageOptions.success(result);
                                        QuicxKendo.kendoGridSetSelectedRow(QuicxKendo.grid);
                                        $('#' + QuicxKendo.options.detailContainerId).show();
                                    } else {
                                        toastr.error("There was an issue loading the grid.", "Error");
                                        pageOptions.error(result);
                                    }
                                },
                            });
                        }
                },
                serverSorting: true,
                serverPaging: true,
                serverFiltering: true,
                serverGrouping: false,
                pageSize: pageSize,
                schema: {
                    data: "d.Data.Data",
                    total: function (result) {
                        return result.d.Data.Total;
                    },
                    model: JSON.parse(QuicxKendo.columnSchema.schema)
                },
                change: function (e) {
                    QuicxKendo.saveGridState();
                }
            });
    
            if (savedOptions) {
                dataSource._page = savedOptions.page;
                dataSource._sort = savedOptions.sort;
                dataSource._group = savedOptions.group;
                dataSource._filter = savedOptions.filter;
            }
    
            QuicxKendo.grid.setDataSource(dataSource);    
        };

 

 

[David]

I wanted to make it clear that on initial load, the grid works fine in both modes.  Data is brought back, I can sort, filter on the data, etc.  It's only on record selection which causes a forced post back, that it fails to load the data again once you set the datasource.

[Georgi Krustev]

Hello David,

In general, setting private properties manually (e.g. _group and etc) is not a reliable way to define the DataSource configuration. I would on every reset to create a new DataSource instance providing the required configuration options.

If the problem still persists, please send us a repro demo that demonstrates the issue. Please use the DataSource creation instead of modifying the private variables.

Regards,
Georgi Krustev
Telerik