How to implement read() with parameters?

[David]

Hi, Can someone help me on how this would actually be implemented or called from script?  I want to call the read method through script passing parameter values into it. 

var dataSource = new kendo.data.DataSource({
transport: {
read: function(options) {
// make AJAX request to the remote service

$.ajax( {
url: "/orders/read",
data: options.data, // the "data" field contains paging, sorting, filtering and grouping data
success: function(result) {
// notify the DataSource that the operation is complete

options.success(result);
}
});
}
}
});

[Nikolay Rusev]

Hello David,

In DataSource transport.read configuration you can set data option in order to send extra data to the server.

Regards,
Nikolay Rusev
the Telerik team

[David]

Thanks, I have that working with hardcoded values like the example you sent me to but I want to know how to set parameters dynamically based on an event. A full code example would be nice.  Here's my code with notes below...

    var hds =  new kendo.data.HierarchicalDataSource({
                    transport: {
                        read: function(options) {
                           var jsonData = $.param(options.data);
                           $.ajax({
                                type: "GET",
                                url: "/Secure/WCF/MyService.svc/GetFolderList",
                                data: jsonData, 
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                success: function (msg) {
                                        options.success($.parseJSON(msg.d))
                                    },
                                error: function (XMLHttpRequest, textStatus, errorThrown) {
                                    alert(textStatus);
                                    }
                                });
                            }
                         },
                     schema: {
                            model: {
                                id: "FolderId",
                                hasChildren: "HasChildren"
                            } 
                        }
                });

// Trying to set search parameters outside of hierarchial datasource declartion above....

                 jsonData = [{ UserId:1, FolderId:30}];

// 1.) This actually calls the read above and populates the options.data as expected but how do I bind the results returned in the success method?
                hds.read(jsonData);   

// 2.) this calls the read method AGAIN but options.data is null.  Can I "Set" the datasource here that is populated from step 1's hds.read(jsonData)?

                $("#treeviewTransportJQueryAjax").kendoTreeView({
                    dataSource: hds,
                    dataTextField: "FolderName"
                }).data("kendoTreeView");

[Nikolay Rusev]

Hello David,

The data setting can be also a function. That function will called every time read is executed. That said you every time read is triggered you can generate the object that will be send to server. I guess that is what you need.

All the best,
Nikolay Rusev
the Telerik team

[Justin]

Thanks for elaborating...

[Catalin]

You can try the following. My use case is to create the grid but not bind it when page is first accessed. Then upon some UI selection (e.g. I need to run some particular report for a given user, so I have to send to the server the user id), code reads the data and binds the grid.

Create the grid on page load:

    var theGrid = $("#foo").kendoGrid({

// the other details here....

        autoBind: false,  // grid does not call read upon page load/grid being created; read will be called on demand
        dataSource: { 

            
            transport: {
                read: {
                    url: "/url/Retrieve",
                    data: { intUserId: 0 },  // the parameter I need to send to the server
                    contentType: "application/json; charset=utf-8",
                }
            },
    });


In the function called by the UI triggering the population of the grid:

    function retrieve(theUserId)
    {
        var grid = $('#foo').data('kendoGrid');
        grid.dataSource.options.transport.read.data.intUserId = theUserId;  // I set the value of the parameter before reading the data from the server
        grid.dataSource.read();        
    }

[Graham]

Catalin: for a Kendo MVC DropDownList, you can replace:

 

grid.dataSource.options.transport.read.data.intUserId = theUserId;

 

...with...

 

dorpDownList.dataSource.transport.options.read.url = '/url/Retrieve?intUserid=' + theUserId;

 

This also avoids the need to define a transport section on the Kendo widget.