Criteria for Column Filters

[Justin Lee]

Without getting into why - I am setting the DataSource.Read.Data function in javascript after the grid is initialized.  (using .AutoBind(false) so it doesn't load until after I set the Data function)

$("#myGrid").data("kendoGrid").dataSource.transport.options.read.data = function() {
  return { prop: "value" };
};

 

This works fine when loading the grid items. However, when I do it this way, the column filters that are .Multi(true) do NOT use this function, and pass no variables to the Action method. 

How do I get the calls to load the filters to also use this function for parameters?

Thanks

[Tsvetina]

Hi Justin,

I tested this line in a project and the parameter was sent with every request. I am attaching the test project for reference. The exact code I use is this:

    @(Html.Kendo().Grid<TelerikMvcApp18.Models.OrderViewModel>()
.Name("grid")
.AutoBind(false)
.Columns(columns =>
{
    columns.Bound(p => p.OrderID).Filterable(false);
    columns.Bound(p => p.Freight);
    columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
    columns.Bound(p => p.ShipName);
    columns.Bound(p => p.ShipCity);
})
.Pageable()
.Sortable(sort => sort.SortMode(GridSortMode.MultipleColumn))
.Scrollable()
.Filterable()
.HtmlAttributes(new { style = "height:550px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Orders_Read", "Grid"))
)
    )
    <script>
        $(document).ready(function () {
            var grid = $("#grid").data("kendoGrid");
            grid.dataSource.transport.options.read.data = function () {
                return { prop: "value" };
            };
            grid.dataSource.read();
        });
    </script>

Could you tell what changes I need to make to reproduce the issue? 

Regards,
Tsvetina
Progress Telerik

[Justin Lee]

Thanks Tsvetina,

The post is about column filters with Multi(true) -- filters that call the controller for the datasource so they can get the options for the filter.
Add this to the ShipCity column definition:  .Filterable(f => f.Multi(true))

Then click on the Filter button for the Ship City column. You will see that the data function is not called, and "prop" is not passed to the controller.

[Justin Lee]

I was able to resolve the issue by using getOptions and setOptions to set the data function.

Let me know if you see any issue setting it this way.  It appears to be working correctly.

var grid = gridElement.data("kendoGrid");
var options = grid.getOptions();
options.dataSource.transport.read.data = function () {
  return { prop: "value" };
};
grid.setOptions({
  dataSource: options.dataSource
});

[Tsvetina]

Hi Justin,

Sorry for mistaking the multiple-option filter for multi-column sorting. I understand what you mean now, but this is expected behavior. The multi-checkbox filter uses a separate DataSource, which is created using the options that were initially passed for the Grid DataSource. When you add the data function at run time, it is not added to the filter DataSource.

The easiest solution would be to declare a standalone DataSource and use it for the multi-checkbox filter:

@(Html.Kendo().DataSource<TelerikMvcApp18.Models.OrderViewModel>()
        .Name("dataSource1")
        .Ajax(dataSource => dataSource
        .Read(read => read.Action("Orders_Read", "Grid"))
        )
)

columns.Bound(p => p.ShipCity).Filterable(f=>f.Multi(true).DataSource("dataSource1"));

And then, you can add a data function to this DataSource, too:

$(document).ready(function () {
    var grid = $("#grid").data("kendoGrid");
    grid.dataSource.transport.options.read.data = function () {
        return { prop: "value" };
    };
    dataSource1.transport.options.read.data = function () {
        return { prop: "value" };
    };
    grid.dataSource.read();
});

Regards,
Tsvetina
Progress Telerik