This is a migrated thread and some comments may be shown as answers.

Grid creation best practices

2 Answers 306 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ed
Top achievements
Rank 1
Ed asked on 22 Apr 2014, 05:27 PM
Loading the page, all the user sees are the controls for the query criteria - some date ranges, some drop downs, some text boxes, some checkboxes, etc - and a big search button.  When they click on the search button, I create the Kendo grid and in the dataSource/transport/read, I get the criteria from the query criteria controls (in dataSource/transport/read/data) and send it to the server to get the grid of data.

Currently, whenever the user clicks on the search button, the same process is taking place, but that doesn't seem correct to me.  Should I be creating the grid each time?  Should I try to remove the grid from the DOM, if it exists, whenever I create the grid?  Why not just force a reload of the grid, and pull the data from the query criteria again?

What is the recommended Kendo practice for this?  Should I be calling $(selector).kendoGrid({...}); whenever the user clicks the search button?  If so, is there something I need to do to clean up the DOM before the call to kendoGrid if the grid already exists?

And does this apply to all Kendo widgets?

Thanks in advance.

2 Answers, 1 is accepted

Sort by
0
Ed
Top achievements
Rank 1
answered on 22 Apr 2014, 05:33 PM
is this the preferred method?
http://stackoverflow.com/a/15624325/156611
0
Accepted
Daniel
Telerik team
answered on 24 Apr 2014, 03:00 PM
Hello Ed,

The recommended approach for the described scenario is to create the Grid only once and then just read the new data via the dataSource. If the Grid should be created only after the button is clicked then you can check if the element is already initialized by checking the element data e.g.
function searchButtonClick() {
    var gridElement = $("#grid"),
        grid = gridElement.data("kendoGrid");
    if (!grid) {
        gridElement.kendoGrid({
            ...
        });
    } else {
        grid.dataSource.read();
    }
}

The current query criteria can be passed each time a read is performed by using a function for the request data option or with the transport parameterMap function.

The grid should be destroyed and recreated if an option that cannot be dynamically set to the widget should be changed. For example the case described in the stackoverflow question is for changing the grid columns which currently cannot be dynamically changed.

Regards,
Daniel
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Ed
Top achievements
Rank 1
Answers by
Ed
Top achievements
Rank 1
Daniel
Telerik team
Share this question
or