Grid not refreshing

[Simon]

Hi

I have an MVC view that contains 2 datepicker controls, a button and a grid. When the form loads the grid is loaded with data from the server. If the customer then presses the submit button I would like the grid to be loaded again from the server. This does not happen despite the fact that the server method is being called. Could somebody explain what the problem might be?

The code is as follows:

<script type="text/javascript">

 

    $(document).ready(function () {

 

     //Refresh the grid if the customer presses the submit button

        $('#submit').click(function () {

            Execute(); // this does not refresh the grid

        });

 

        // create DatePicker from input HTML element

        $("#fromDate").kendoDatePicker();

        $("#toDate").kendoDatePicker();

 

        //Load the grid initially using the default date parameters

        Execute();  // this works

    });

 

    var fromDate;

    var toDate;

 

    function Execute()

    {

        fromDate = $("#fromDate")[0].value;

        toDate = $("#toDate")[0].value;

 

        var element = $("#grid").kendoGrid({

            dataSource: {

                type: "json",

                transport: {

                    read: { url: "Tests/Tests?fromDate=" + fromDate + "&toDate=" + toDate, dataType: "json"}

                },

                pageSize: 5,

                serverPaging: true,

                serverSorting: true

            },

            height: 450,

            sortable: true,

            pageable: true,

            detailTemplate: kendo.template($("#template").html()),

            detailInit: detailInit,

            dataBound: function () {

                this.expandRow(this.tbody.find("tr.k-master-row").first());

            },

            columns: [

                        {

                            field: "TestOne",

                            title: "Test One"

                        },

                        {

                            field: "TestTwo",

                            title: "Test Two"

                        }

                    ]

        });

    }

 

function detailInit(e) {

 

    var detailRow = e.detailRow;

    detailRow.find(".tabstrip").kendoTabStrip();

 

    detailRow.find(".details").kendoGrid({

        dataSource: {

            type: "json",

            serverPaging: true,

            pageSize: 5,

            transport: { read: { url: "Tests/TestDetail", dataType: "json"} },

        },

        height: 200,

        columns: [

            {

            field: "DisplayDate",

             title: "Date"

             },

            {

            field: "Type", title: "Text"

            }

        ]

    });

    

}

[Dimo]

Hi Simon,

Initializing multiple Grid instances over the same DOM element can lead to negative side effects and is not recommended.

In order to modify the READ url of the Grid after it has been initialized, you can do the following:

$("#grid").data("kendoGrid").dataSource.transport.options.read.url = ".....";

Then, call the read() method of the dataSource.

However, note that this approach represents a hack. A better way would be to apply filtering to the Grid by using the filter method of its dataSource.

Kind regards,
Dimo
the Telerik team