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

Grid not refreshing

1 Answer 101 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Simon
Top achievements
Rank 1
Simon asked on 16 Jul 2012, 09:43 AM

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

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 16 Jul 2012, 01:21 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Simon
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or