How to implement read() with parameters?

2 Answers 3460 Views
Data Source
David
Top achievements
Rank 1
David asked on 17 Nov 2012, 01:34 PM
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);
}
});
}
}
});

2 Answers, 1 is accepted

Sort by
0
Nikolay Rusev
Telerik team
answered on 19 Nov 2012, 08:30 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
David
Top achievements
Rank 1
commented on 19 Nov 2012, 02:45 PM

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
Telerik team
commented on 21 Nov 2012, 04:15 PM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Justin
Top achievements
Rank 1
commented on 15 Jul 2014, 07:16 PM

Thanks for elaborating...
0
Catalin
Top achievements
Rank 1
answered on 10 May 2016, 12:04 PM

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
Top achievements
Rank 1
Iron
commented on 14 Sep 2016, 10:16 AM

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.

Tags
Data Source
Asked by
David
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Catalin
Top achievements
Rank 1
Share this question
or