CODEWITHSUNDEEP
kendo-uikendo-ui-grid
sen-23
sen-23

Reputation: 1

Kendo UI grid not loading only first time

i have a kendo UI grid and loading the data from ajax call method. when clicking the button first time data get loaded without any problem, but when i am clicking the button again the data not loading. what is the issue. please help me. 

<body>
    <div id="example">
      <button id="primaryTextButton" class="k-primary">Submit</button>
     <div id="grid"></div>     </div>
</body>

$(document).ready(function () {
    var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service",
        dataSource = new kendo.data.DataSource({
            transport: {
                /*read:  {
                    url: crudServiceBaseUrl + "/Products",
                    dataType: "jsonp"
                },*/
                 read: function(options) {
                                           $.ajax({
                                               type: "POST",
                                               url: crudServiceBaseUrl + "/Products",
                                              // contentType: "application/json; charset=utf-8",
                                               dataType: 'jsonp',
                                               //data: JSON.stringify({key: "value"}),
                                              // data: JSON.stringify(_traceInput),
                                               success: function(data) {

                                                   var grid = $('#grid').getKendoGrid();
                                                   if (grid == undefined) {
                                                       grid.empty();
                                                   }
                                                   else {

                                                       grid.dataSource.data(data);
                                                       grid.refresh();
                                                   }

                                               }
                                           });
                                       },
                update: {
                    url: crudServiceBaseUrl + "/Products/Update",
                    dataType: "jsonp"
                },
                destroy: {
                    url: crudServiceBaseUrl + "/Products/Destroy",
                    dataType: "jsonp"
                },
                create: {
                    url: crudServiceBaseUrl + "/Products/Create",
                    dataType: "jsonp"
                },
                parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                        return {models: kendo.stringify(options.models)};
                    }
                }
            },
            batch: true,
            pageSize: 20,
            schema: {
                model: {
                    id: "ProductID",
                    fields: {
                        ProductID: { editable: false, nullable: true },
                        ProductName: { validation: { required: true } },
                        UnitPrice: { type: "number", validation: { required: true, min: 1} },
                        Discontinued: { type: "boolean" },
                        UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                    }
                }
            }
        });

    $("#grid").kendoGrid({
        dataSource: dataSource,
        autoBind : false,
        pageable: true,
        height: 550,
        toolbar: ["create"],
        columns: [
            "ProductName",
            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
            { field: "UnitsInStock", title:"Units In Stock", width: "120px" },
            { field: "Discontinued", width: "120px" },
            { command: ["edit", "destroy"], title: "&nbsp;", width: "200px" }],
        editable: "inline"
    });



 $('.k-primary').click(function (e) {
    // do something else

    dataSource.read();
});
});

http://jsfiddle.net/qoxvaayn/40

Upvotes: 0

Views: 2012

Answers (2)

The Dread Pirate Stephen
The Dread Pirate Stephen

Reputation: 3169

Two things:

First: You are breaking the grid's dataSource transport in your success handler by "manually" overwriting the data with the array that you get back. This is why the read does not fire the second time...your data is now a regular array not a remote transport anymore. Change your success handler to the documented handling(EXAMPLE - SET READ AS A FUNCTION)

success: function(data) {
    // notify the data source that the request succeeded
    options.success(data);
}

Second: you are asking for trouble by mixing function and object transport definitions together. They must all be defined as all functions or all objects, otherwise, you will run into problems with the events not firing. http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-transport.read

All transport actions (read, update, create, destroy) must be defined in the same way, that is, as functions or as objects. Mixing the different configuration alternatives is not possible.

Upvotes: 1

Suraj Nair
Suraj Nair

Reputation: 561

I have rejigged your code and updated the fiddle. Hope this serves your requirement.

$(document).ready(function () {
    var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service",
        dataSource = new kendo.data.DataSource({
            data:[],
            batch: true,
            pageSize: 20
        });

    $("#grid").kendoGrid({
        dataSource: dataSource,
        autoBind : false,
        pageable: true,
        height: 550,
        toolbar: ["create"],
        columns: [
            "ProductName",
            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
            { field: "UnitsInStock", title:"Units In Stock", width: "120px" },
            { field: "Discontinued", width: "120px" },
            { command: ["edit", "destroy"], title: "&nbsp;", width: "200px" }],
        editable: "inline"
    });



 $('.k-primary').click(function (e) {
   var grid = $('#grid')
  // show loading indicator
    kendo.ui.progress(grid, true);
    $.ajax({
       type: "POST",
       url: crudServiceBaseUrl + "/Products",
       dataType: 'jsonp',
       success: function(data) {       
          $("#grid").data("kendoGrid").dataSource.data(new kendo.data.ObservableArray(data));
          // hide loading indicator
            kendo.ui.progress(grid, false);
       }
    });
 });
});

http://jsfiddle.net/qoxvaayn/40/

Upvotes: 0

Related Questions