How to implement read() with parameters?

7 posts, 0 answers
  1. David
    David avatar
    48 posts
    Member since:
    Nov 2012

    Posted 17 Nov 2012 Link to this post

    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. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 19 Nov 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. David
    David avatar
    48 posts
    Member since:
    Nov 2012

    Posted 19 Nov 2012 Link to this post

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

  5. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 21 Nov 2012 Link to this post

    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!
  6. Mike
    Mike avatar
    4 posts
    Member since:
    May 2013

    Posted 15 Jul 2014 in reply to Nikolay Rusev Link to this post

    Thanks for elaborating...
  7. Catalin
    Catalin avatar
    1 posts
    Member since:
    Jul 2015

    Posted 10 May Link to this post

    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();        
        }

  8. Graham
    Graham avatar
    9 posts
    Member since:
    Jul 2012

    Posted 14 Sep in reply to Catalin Link to this post

    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.

Back to Top
Kendo UI is VS 2017 Ready