Send DataSourceRequest with JavaScript function

8 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. Kendo UI is VS 2017 Ready
  4. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 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!
     
  5. 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 ?
  6. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 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!
     
  7. 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
  8. 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?
  9. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 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!
     
Back to Top
Kendo UI is VS 2017 Ready