Grid creation best practices

[Ed]

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.

[Ed]

is this the preferred method?
http://stackoverflow.com/a/15624325/156611

[Daniel]

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