How do I call the read and filter method?

[Dan]

I have a grid that I have made external filters for. When a user chooses a filter option, I basically call:

grid.dataSource.filter(filterObj); 

However, my grid's read method requires params, which is called like this:

var optionalData = { startDate: startDateVal, endDate: endDateVal };
grid.dataSource.read(optionalData);

When the user chooses a filter, the 1st filter method is hit but my application errors on the read method because it is expecting parameters that are now null. (the startDate and endDate).

How do i call the filter method and pass optional data to it? I assume the filter calls a read?

[Mihaela]

Hello Dan,

Thank you for the provided code snippets.

I assume that the required parameters are sent through the Read Action method by default as follows:

@(Html.Kendo().Grid <GridandDP.Models.OrderViewModel>()
  .Name("grid")
  ...
  .DataSource(dataSource => dataSource
    .Ajax()
    ...
    .Read(read => read.Action("ActionMethodName", "Controller").Data("optionalData"))
  )
)
<script>
function optionalData() {
  return {
    startDate: new Date(),
    endDate: new Date()
  }
}
</script>

By design, when you call the "read" method of the DataSource as per the example below, the grid will load the data that is passed to the "Read" Action method (.Read(read => read.Action("ActionMethodName", "Controller").Data("optionalData")).

$("#grid").getKendoGrid().dataSource.read();

With that being said, you could just update the parameters of the function "optionalData" and call the "read" method:

<script>
       var start = new Date(2021, 4, 3);
       var end = new Date(2021, 4, 5);

        function additionalParams() {
            return {
                startDate: start,
                endDate: end
            }
        }

        $(function () {
            var grid = $("#grid").data("kendoGrid");
             //get the external filters
             start = startDateVal; //update the required parameters
             end = endDateVal;
             $("#grid").getKendoGrid().dataSource.read(); //update the grid's data based on the new parameters
             grid.dataSource.filter(filterObj); //filter the grid's data with additional filter on the client
         });
</script>

Let me know if this example applies to your case.

 

Regards, Mihaela Progress Telerik