Send DataSourceRequest with JavaScript function

20 posts, 0 answers
  1. Paweł
    Paweł avatar
    3 posts
    Member since:
    Jul 2013

    Posted 20 Mar 2014 Link to this post

    Hello,
    I have following grid:

    @(Html.Kendo().Grid<Dto.ReportTimeStatDto>()
     .Name("ReportGrid")
     .Columns(columns =>
     {
        columns.Bound(c => c.BusinessProcess).Width(100);
        columns.Bound(c => c.WorkName)).Width(150);
        columns.Bound(c => c.CreationDate).Width(130);
        columns.Bound(c => c.TimeLimitDate).Width(130);
        columns.Bound(c => c.FinishDate).Width(130);
      })
      .AutoBind(false)
      .Scrollable()
      .Resizable(r => r.Columns(true))
      .Groupable()
      .Sortable()
      .Filterable( )
      .Pageable(pageable => pageable
     .Refresh(true)
     .PageSizes(true)
     .ButtonCount(5))
      .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Read", "ReportTimeStat"))
        .Model(model => model.Id(m => m.Id))
       )                                
       )

    and I have just a simple button:
    <button id="statistics" type="button">Statistics</button>

    I would like to achieve this scenario:
    When user clicks statistics button I would like to pass DataSourceRequest to WebApi Controller. Then I would like to read all data (change pageSize to total count of records) with current filters set on grid and count average value of data from one of the columns.
    I have problem with passing DataSourceRequest to my method in controller. I tried sending
    $("#ReportGrid").data("kendoGrid").dataSource.filter()
    object, but it's a bit different from DataSourceRequest so it's not working.
    How could I solve this problem?
  2. Paweł
    Paweł avatar
    3 posts
    Member since:
    Jul 2013

    Posted 20 Mar 2014 in reply to Paweł Link to this post

    I also tried sending
    $("#ReportGrid").data("kendoGrid").dataSource._params()
    but still - it's not the same object as C# DataSourceRequest so it won't work.
  3. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2190 posts

    Posted 24 Mar 2014 Link to this post

    Hi Marcin,

    In current case you can use the Grid build-in parameterMap function to format correctly the needed options from the DataSource - please check the example below:
    function sendData() {
        var grid = $("#Grid").data("kendoGrid"),
            parameterMap = grid.dataSource.transport.parameterMap;
     
        var data = parameterMap({ sort: grid.dataSource.sort(), filter: grid.dataSource.filter(), group: grid.dataSource.group() });
        $.ajax({
            url: "/Home/UpdateCreateDelete",
            data: data,
            type: "POST",
     
    Regards,
    Vladimir Iliev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  4. EdsonF
    EdsonF avatar
    4 posts
    Member since:
    Nov 2012

    Posted 27 Aug 2014 in reply to Vladimir Iliev Link to this post

    Hi Vladimir

    I'm trying to do the same but to download an exported xlsx file.

    this is what I'm doing on my javascript:

    exportData = function () {

            var grid = $("#QuoteGrid").data("kendoGrid");
            var parameterMap = grid.dataSource.transport.parameterMap;
            var sortData = grid.dataSource.sort();
            var filterData = grid.dataSource.filter();
            var groupData = grid.dataSource.group();        
            var data = parameterMap({ sort: sortData, filter: filterData, group: groupData });
            var request = $.toJSON(data);
            location.href = CUSTOMER_QUOTES_EXPORT_URL + "?request=" + request;                
            return false;
        }

    But still my controller end point does not contain the filters, etc passed in the call

    public FileResult ExportQuotes([DataSourceRequest]DataSourceRequest request)


    What I'm doing wrong ?
  5. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2190 posts

    Posted 28 Aug 2014 Link to this post

    Hi Edson,

    From the provided information it seems that you are building the query string parameters incorrectly which is the reason for current behavior. In current case I would suggest to check the following examples in our CodeLibrary which demonstrates how to successfully export the Grid data to excel file:

    Regards,
    Vladimir Iliev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. EdsonF
    EdsonF avatar
    4 posts
    Member since:
    Nov 2012

    Posted 29 Aug 2014 in reply to Vladimir Iliev Link to this post

    Thank you very much Vladimir!

    You guys have the best set of controls known to human kind - Kendo UI rocks!

    Regards

    Edson
  7. Jim
    Jim avatar
    18 posts
    Member since:
    Dec 2014

    Posted 05 Mar 2015 in reply to Vladimir Iliev Link to this post

    Hi Vladimir.  In the case for Marcin, it looks like you are using parameterMap to post back to the controller the request info that went into creating the currently displayed set of records for the grid.  This is exactly what i need, but what would the controller post handler method signature in Home::UpdateCreateDelete(  xxx ) look like?

    and can you pass the page size, total and, page number fields as well, since they are part of the DataSourceRequest object?
  8. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2190 posts

    Posted 06 Mar 2015 Link to this post

    Hi Jeff,

    You can check the example Controller Action signature below:

    public ActionResult ExampleAction([DataSourceRequest] DataSourceRequest request)
    {

    Also you can pass all properties which are part of the DataSourceRequest object. They can be get using the dataSource client side API:

    Regards,
    Vladimir Iliev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. Raj
    Raj avatar
    34 posts
    Member since:
    Nov 2016

    Posted 09 Jan in reply to Vladimir Iliev Link to this post

    Hello Vladimir

    How to post other parameters along with DataSourceRequest, Iam able to post other parameters but the DataSourceRequest values are null.

    if i take off other parameters and post only DataSourceRequest it works. 

    Posting DataSourceRequest with other parameters doesnt work?

    Any ideas?

    Raj

  10. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1906 posts

    Posted 10 Jan Link to this post

    Hello Raj,

    In order to pass additional parameters to a Read/Update/Create action you can use the Data() method. Please check out the article below that describes the approach:



    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  11. Raj
    Raj avatar
    34 posts
    Member since:
    Nov 2016

    Posted 10 Jan in reply to Viktor Tachev Link to this post

    Thanks for the response

    Iam already aware of that passing parameters using Data() method, but thats for only read/update/create.I want to send DataSourceRequest along with other Parameters from custom javascript (using Ajax) to custom action Method, not the Read/Update/Create action that were used in the grid.

    Something like this.

    var grid = $("#Grid").data("kendoGrid"),
            parameterMap = grid.dataSource.transport.parameterMap;

        var data = parameterMap({ sort: grid.dataSource.sort(), filter: grid.dataSource.filter(), group: grid.dataSource.group() });
        $.ajax({
            url: "/Home/UpdateCreateDelete",
            data: {

    data,

    otherParameter: someId,

    oneotherParam: someString

    },
            type: "POST",

     

    Note that its a custom action method not the grids Read/Update/Create action.

     

    Raj

  12. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1906 posts

    Posted 12 Jan Link to this post

    Hello Raj,

    The DataSourceRequest is used in the CRUD methods as it is used by the DataSource of the Grid component. When passing DataSourceRequest to the server you can include all built-in properties that are part of the DataSourceRequest object. Additional data can be sent in a separate field like you are doing in the sample code from your last post. 

    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  13. Raj
    Raj avatar
    34 posts
    Member since:
    Nov 2016

    Posted 12 Jan in reply to Viktor Tachev Link to this post

    Thank you,

    But the values posted in DataSourceRequest object are null if i send additional data in separate field.

    Please provide a sample code

    Raj

  14. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1906 posts

    Posted 16 Jan Link to this post

    Hello Raj,

    The DataSourceRequest contains data that is relevant in an action that would read or update data in the Grid. 

    Would you elaborate in more detail on what is the functionality that you would like to implement? Why do you need to call an Action that is not related to a Grid and pass DataSourceRequest to it?


    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  15. Raj
    Raj avatar
    34 posts
    Member since:
    Nov 2016

    Posted 16 Jan in reply to Viktor Tachev Link to this post

    Okay

    Here is the situation, I have a grid with virtualscrolling enabled with pagesize 100 and serveroperations true. Data in grid is large with 20,000 - 30,000 rows. 

    I want to filter the data by column something like (column contains) which gives me back lets say some 5000 rows and i want to delete all of them.

    But since i have a pagesize of 100 i can only capture 100 rows from DOM using JS. 

    Now What Iam planning to do is Pass DataSourceRequest to controller along with some other parameters which are required for data pull from DataBase, once i get the data back from Database (which is all original data like 20,000-30,000 rows) i would apply the passed DataSourceRequest to the List which then gives me the filtered data (around 5000). Now i have filtered data in my controller and i can use their ids to do a bulk delete at a time.

    Additional Parameters are required for original Data pull from Database and DataSourceRequest is required for filtering the data.

    Thanks

    Raj

  16. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1906 posts

    Posted 18 Jan Link to this post

    Hi Raj,

    Based on the description it is not necessary to pass the entire DataSourceRequest to the server as it contains additional data that will not be used. You can retrieve just the applied filters and send them to the server. Make sure that you call JSON.serialize() for them before passing them to the server action. 

    var filters = JSON.stringify($("#grid").getKendoGrid().dataSource.filter().filters)
     
    $.ajax({
            url: "/Home/CustomActionMethod",
            data: {
     
            filterParams: filters,
     
            otherParameter: someId,
     
            oneotherParam: someString
     
            },
     
    // other options
    })


    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  17. Raj
    Raj avatar
    34 posts
    Member since:
    Nov 2016

    Posted 22 Jan in reply to Viktor Tachev Link to this post

    HI Viktor

    That didn't work, Please find attached image. Posted values are null. Like you said i called JSON.stringify also.

    Raj

     

  18. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1906 posts

    Posted 24 Jan Link to this post

    Hello Raj,

    What I meant in my previous reply is that there is no need to use to use DataSourceRequest in the custom ActionMethod since it will not be necessary.

    The CustomActionMethod would look similar to the following:


    public ActionResult CustomActionMethod (string filterParams)
    {
         
    }


    The relevant fields can be passed using Ajax:


    var filters = JSON.stringify($("#grid").getKendoGrid().dataSource.filter().filters)
      
    $.ajax({
            url: "/Home/CustomActionMethod",
            data: {
      
            filterParams: filters
      
            },
      
    // other options
    })


    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  19. Raj
    Raj avatar
    34 posts
    Member since:
    Nov 2016

    Posted 24 Jan in reply to Viktor Tachev Link to this post

    Thanks

    Okay how do i filter from my list in controller using that (filterParams). Please provide code sample.

    Thanks

    Raj

  20. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1906 posts

    Posted 26 Jan Link to this post

    Hello Raj,


    When the filter conditions are available on the server you can use them to construct a query and request the relevant information directly from the database. You can use different approach depending on your setup and preferences. 

    The thread below discusses how data can be read using SqlConnection:


    The article below illustrates how to get data using EntityFramework:



    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top