Pre Filter Using DataSource .Filter

[Bradley]

I have a grid that I would like to be filtered based on a button that a user clicks on a website.  I have went through much of the documentation, but I am unable to find a way to filter without using a string. I would like to pass in a value. Is there something that I am missing here.  

@(Html.Kendo().Grid<Item>()
                    .Name("grid").Scrollable(c => c.Enabled(true).Height(1000))
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Filter(f=>f.Add(a=>a.Status).IsEqualTo(""))
                        .Read(read => read.Action("Products_Read", "Controller"))
                        .PageSize(20)
                        )

[Bradley]

I was able to solve this issue by passing in a ViewBag The code now reads 

.DataSource(dataSource => dataSource
                       .Ajax()
                       .Filter(f=>f.Add(a=>a.Status).IsEqualTo(ViewBag.Status))
                       .Read(read => read.Action("Products_Read", "MedDevice"))
                       .PageSize(20)
                       )

[Alex Hajigeorgieva]

Hello, Bradley,

Thank you for sharing the solution with the community.

An alternative approach would be to set the AutoBind(false) method with a false boolean parameter and when the button is clicked, filter the grid data source with the client side API:

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/filter

$(".pre-filter-btn").on("click", function(e){
 var selectedValue = ...  // get value
 var grid =  $("#grid").data("kendoGrid");
 grid.dataSource.filter({
  field: "Status",
  value: selectedValue
  operator: "eq"
 });
});

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Bradley]

A quick follow up to my solution. It works just fine, and when I clear the filter it shows all data in the grid. But when I want to filter on something else the only available filter is the one I pre-filtered on. So I only have one option to choose from, like complete, and none of the other filter options, like Need To Receive or Complete.

 

Is there a good way to restore the rest of my filter options?

[Georgi]

Hi Bradley,

Based on the provided information, I assume that the multi filter menu will contain only the value of the predefined filter. The described behavior is expected as the multi filter is populated with the available data within the grid. A possible workaround would be to add a data source which supplies the filter menu with data.

e.g.

columns.Bound(e => e.FieldName).Width(220).Filterable(ftb => ftb.Multi(true).Search(true)
    .DataSource(ds => ds.Read(r => r.Action("...", "...")))
)

Below you will find a demo which demonstrates the above approach:

• https://demos.telerik.com/aspnet-core/grid/filter-multi-checkboxes

Regards,
Georgi
Progress Telerik

[Daniel Blendea]

I'm trying to use the remote datasource to retrieve the possible values used for filtering:

 

columns.Bound(p => p.State).Width(50)
.Filterable(fb => fb.Multi(true).Search(true)
.DataSource(ds => ds.Read(
r => r.Url("http://localhost:5000/entityreferences/regulation-states")
)));

 

The datasource is list of enum values, serialized as JSON with the following structure:

 

[

{ Value: 0, Text: "Draft"},

{value: 1, Text: "Pending"}

]

So the result is bound to the search form, with checkboxes, but when I try to use the Filter icon, I get an error: "State is not defined".

I tried different property names, like {Id, State}, and there is no error, but when I click on the Filter button, to filter the data, I get an ajax call with filter:
State~eq~NaN

 

http://localhost:5000/dashboard/entries?filter=State~eq~NaN

[Georgi]

Hi Daniel,

The default ItemTemplate display the field which the current column uses - in this case State. Thus you have to either create a custom ItemTemplate.

e.g.

.Filterable(x=> x.DataSource(y=> y.Read(r=> r.Action(...))).ItemTemplate("itemTemplate")

Or return objects which have `Status` field from the regulation-states action method.


Regards,
Georgi
Progress Telerik

[Daniel Blendea]

Ok,

I'm returning a list of State values: [{State:0}, {State:1}]. The filtering works now, the query string looks like this:

http://localhost:5000/dashboard/entries?filter=State~eq~0~or~State~eq~1
But the form to select the enum values shows the enum value (0,1) instead of the enum name (Draft, Pending).

[Georgi]

Hello Daniel,

If you would like to display a Text value, you could return a custom object from the server which contains both the text field and the value field. But his will require creating your own item template.

e.g.

// action method

        public ActionResult Statuses()
        {
            return Json(new[] { new { Id=1, Name="Active" }, new { Id = 2, Name = "InActive" } });
        }

// column

columns.Bound(x => x.Status).Filterable(x=> x.DataSource(y=> y.Read(r=> r.Action("Statuses", "Home"))).ItemTemplate("itemTemplate").Multi(true));

// item template

    function itemTemplate(e) {

        return "<li class='k-item'>" +
            "<label class='k-label'>" +
            "<input type='checkbox' class='" + (e.mobile ? "k-check" : "") + "'  value='#:kendo.format('{0" + e.valueFormat + "}', Id)#'/>" +
            "<span class='k-item-title'>#:kendo.format('" + (e.format ? e.format : "{0}") + "', Name)#</span>" +
            "</label>" +
            "</li>"
    }

 

Regards,
Georgi
Progress Telerik