How to rebind that uses webservice?

[Jeremy]

Given then below sample grid, that is loaded using a webservice, how do I refresh the data on an event?

as you can see I have a function called refreshGrid().  It gets an instance of the grid successfully.  I know this because the cancelChanges() call works.  But when the refresh() is run nothing happens.  I'd like the grid to re-call the webservice and reload itself.

Thank you in advance.

function refreshGrid()

{

    // get a reference to the grid widget

    var grid = $("#grid").data("kendoGrid");

    // refreshes the grid

    grid.cancelChanges();

    grid.refresh();

}

 

 

function SetWindow(val)

{

    $("#window").kendoWindow({

        title: "Async Window Content",

        content: "popup.aspx?id=" + val,

        visible: false,

        close: refreshGrid

    });

}

 

 

 

$(document).ready(function () {

 

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

        SetWindow(34);

        var window = $("#window").data("kendoWindow");

        window.center();

        window.open();

    });

 

 

    $("#grid").kendoGrid({

         

        columns: [

                { title: "Action", command: "destroy" },

                { field: "ID", visible: false },

                { title: "Status", template: "<A href=;pop.aspx?id=${ ID }'>${ JobRate }</a>" },

                { field: "Name" },

                { field: "JobRate", title: "Job Rate" },

                { field: "Notes" }

            ],

        editable: true, // enable editing

        toolbar: ["create", "save", "cancel"], // specify toolbar commands

        dataSource: {

            schema: {

                data: "d", // ASMX services return JSON in the following format { "d": <result> }. Specify how to get the result.

                model: { // define the model of the data source. Required for validation and property types.

                    id: "ID",

                    fields: {

                        ID: { editable: false, nullable: true },

                        Name: { validation: { required: true} },

                        JobRate: { validation: { required: true }, type: "number" },

                        Notes: { validation: { required: true} }

                    }

                }

 

            },

            batch: true, // enable batch editing - changes will be saved when the user clicks the "Save changes" button

            transport: {

               },

                read: {

                    url: "JobsWebService.asmx/GetAllJobs", //specify the URL which data should return the records. This is the Read method of the Products.asmx service.

                    contentType: "application/json; charset=utf-8", // tells the web service to serialize JSON

                    type: "POST" //use HTTP POST request as the default GET is not allowed for ASMX

                },

                parameterMap: function (data, operation) {

                    if (operation != "read") {

                        // web service method parameters need to be send as JSON. The Create, Update and Destroy methods have a "products" parameter.

                        return JSON.stringify({ products: data.models })

                    }

                }

            }

        }

    });

[Rosen]

Hi Jeremy,

In order to repopulate the DataSource associated with the Grid widget, you should use its read method.

var grid = $("#grid").data("kendoGrid");

grid.dataSource.read();

As opposite to the grid's refresh method which will only repaint the widget.Greetings,
Rosen
the Telerik team

[Jeremy]

I am not using a datasource.  Is that required to accomplish my scenario?

[Atanas Korchev]

Hello,

 The grid cannot be bound without a data source. Your grid has a data source declared as well:

dataSource: {

            schema: {

                data: "d", // ASMX services return JSON in the following format { "d": <result> }. Specify how to get the result.

                model: { // define the model of the data source. Required for validation and property types.

                    id: "ID",

                    fields: {

                        ID: { editable: false, nullable: true },

                        Name: { validation: { required: true} },

                        JobRate: { validation: { required: true }, type:"number" },

                        Notes: { validation: { required: true} }

                    }

                }

 

            }

Regards,
Atanas Korchev
the Telerik team

[Jeremy]

Oh I see, the datasource is just declared anonymously within the grid.

So as you write earlier:

var grid = $("#grid").data("kendoGrid");

  

grid.dataSource.read();

Thanks