Pass complex object parameter to MVC Controller from Kendo Grid DataSource

[PhilD]

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

[Viktor Tachev]

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

[Darren]

May i have the link to other thread? as i wish to know the answer too.

[Viktor Tachev]

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