This is a migrated thread and some comments may be shown as answers.

Criteria for Column Filters

4 Answers 30 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Justin Lee
Top achievements
Rank 1
Justin Lee asked on 07 Aug 2018, 04:25 PM

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

4 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 09 Aug 2018, 01:21 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Justin Lee
Top achievements
Rank 1
answered on 09 Aug 2018, 02:21 PM

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.

0
Justin Lee
Top achievements
Rank 1
answered on 09 Aug 2018, 03:07 PM

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
});
0
Accepted
Tsvetina
Telerik team
answered on 09 Aug 2018, 03:10 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Justin Lee
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Justin Lee
Top achievements
Rank 1
Share this question
or