Grid under postback conditions Asp.Net pages

3 posts, 0 answers
  1. David
    David avatar
    19 posts
    Member since:
    Feb 2015

    Posted 18 May 2016 Link to this post

    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);    
            };

     

     

  2. David
    David avatar
    19 posts
    Member since:
    Feb 2015

    Posted 18 May 2016 Link to this post

    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.
  3. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3747 posts

    Posted 20 May 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top