Pass complex object parameter to MVC Controller from Kendo Grid DataSource

4 posts, 0 answers
  1. PhilD
    PhilD avatar
    2 posts
    Member since:
    Apr 2017

    Posted 08 Jun 2017 Link to this post

    Hello,

    We have an MVC project that uses the Kendo MVC grid to return well data records.  Because we use paging and can return several thousand records, we're using Ajax with server side paging like this (abbreviated):

    @(Html.Kendo().Grid<GroundWater.Models.GroundWaterSearchResult>()
              .Name("grid")
              .Columns(columns =>
              {
                  columns.Bound(p => p.well_id).Title("Well ID").Width(75).HtmlAttributes(new { style = "text-align: right;" });
                  columns.Bound(p => p.Well_Name).Title("Well Name").Width(105).Locked(true);
                  columns.Bound(p => p.Permit).Title("PermitNo").Width(90);
                  columns.Bound(p => p.Well_Depth).Title("Well Depth").Width(64).HtmlAttributes(new { style = "text-align: right;" });
                  columns.Bound(p => p.Water_Level_Depth).Title("Water Level Depth").Width(66).Format("{0:n2}").HtmlAttributes(new { style = "text-align: right;" });
                   columns.Bound(p => p.Measurement_By).Title("Measurement By").Width(111);
                  columns.Bound(p => p.publication_name).Title("Publication Name").Width(93);
                  columns.Bound(p => p.Elevation).Title("Elevation").Width(78).Format("{0:n2}").HtmlAttributes(new { style = "text-align: right;" });
                  columns.Bound(p => p.Elevation_Accuracy).Title("Elevation Accuracy").Width(121);
                  columns.Bound(p => p.Top_Perforated_Casing).Title("Top Perforated Casing").Width(84).HtmlAttributes(new { style = "text-align: right;" });
                  columns.Bound(p => p.Bottom_Perforated_Casing).Title("Bottom Perforated Casing").Width(85).HtmlAttributes(new { style = "text-align: right;" });
                  columns.Bound(p => p.Base_of_Grout).Title("Base of Grout").Width(65).HtmlAttributes(new { style = "text-align: right;" });
                  columns.Bound(p => p.Contact).Title("Owner").Width(130);
                  columns.Bound(p => p.DIV).Title("DIV").Width(54).HtmlAttributes(new { style = "text-align: right;" });
                  columns.Bound(p => p.WD).Title("WD").Width(54).HtmlAttributes(new { style = "text-align: right;" });
                  columns.Bound(p => p.County).Title("County").Width(69);
                  columns.Bound(p => p.basin).Title("Designated Basin").Width(91).HtmlAttributes(new { style = "text-align: right;" });
                  columns.Bound(p => p.Management_District).Title("Management District").Width(91);
              })
              .Pageable(pager => pager
                  .PageSizes(true)
                  .PageSizes(new int[] { 10, 20, 50, 100 }))
              .Sortable(sorting => sorting.AllowUnsort(false))
              .Scrollable(scroll => scroll.Height(500))
              .Filterable()
              .Resizable(resize => resize.Columns(true))
              .Reorderable(reorderable => reorderable.Columns(true))
              .ColumnMenu()
              .DataSource(dataSource => dataSource
                  .Ajax()
                  .Read(read => read.Action("Wells_Read", "GroundWaterSearch").Data("filterData"))
                  .ServerOperation(true)
                  .PageSize(50)
              )
    )

    And the JS 

    <script>
        function filterData() {
            return {
                Publication: document.getElementById('publicationArea').value
                //WellName: document.getElementById('wellname').value,
                //StartDate: document.getElementById('startdate').value,
                //EndDate: document.getElementById('enddate').value,
                //ContrArea: document.getElementById('contributingarea').value,
                //WaterDistrict: document.getElementById('waterdistrict').value
                //........ up to 10 additional fields

            };
        }
    </script>

    And the Controller looks like this:

     public ActionResult Wells_Read([DataSourceRequest]DataSourceRequest request, string Publication, ......add more parameters)
            {
                List<string> criteria = new List<string>();
                GetPublicationArea(Publication, criteria);

               .... additional search criteria

                var tempCalls = CallMgrData.GetGroundWaterLevelsResult(criteria);
                List<GroundWaterSearchResult> values = tempCalls.ResultSet.Select(x => ModelMapper.Map<GroundWater, GroundWaterSearchResult>(x)).ToList();
                DataSourceResult result = values.ToDataSourceResult(request);
                return Json(result);
            }

    My question is, what are my options for returning the additional parameters to the Controller?  The View contains complex search criteria (including strings, numbers, and datetime) so I need to return up to 16 parameters from the DataSource.   I don't really want to keep adding a long list of parameters (many would or could be null).  I would rather return a single object to the controller.  I read somewhere I can pass a class object or maybe a json string as the DataSource.Data?  Any help would be appreciated.  Thanks

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2501 posts

    Posted 12 Jun 2017 Link to this post

    Hi Phil,

    I have replied to the other thread you have submitted and suggest we continue the conversation there if you have additional queries.


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

    Posted 09 Jan 2020 Link to this post

    May i have the link to other thread? as i wish to know the answer too.
  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2501 posts

    Posted 09 Jan 2020 Link to this post

    Hello Darren,

     

    I will copy the answer below for more visibility:

     

    The result from the function that is passed to the Data() method should be JSON. Thus, you can use custom JavaScript to collect the data and stringify it. 

    function additionalData(e) {
            return { complexItem: JSON.stringify({ field1: "sample value", field2: "some other value" }) };
        }

     

    Then you can parse it on the server using DeserializeObject method.


    var jsonData = JsonConvert.DeserializeObject(complexItem);

     

     

    Let me know if you have further questions.

     

    Regards,
    Viktor Tachev
    Progress Telerik

    Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
Back to Top