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

How to apply filters to a kendo grid datasource on startup

2 Answers 1042 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Rui
Top achievements
Rank 1
Rui asked on 28 Jun 2017, 04:26 PM

I have a application that has a kendo grid.

I can filter the grid using several dropdownlists that are outside the grid.

When I click on search, I add filters to the datasource filter list. For example,

    var dataSource = $("#grid").data("kendoGrid").dataSource;
                var dataSourceFilterQuery = new Array();
   
        if ($("#something").data("kendoDropDownList").value() !== null) {
                        dataSourceFilterQuery.push({ field: "something", operator: "IsGreaterThanOrEqualTo", value: ($("#something").data("kendoDropDownList").value()) });
                }
   
                dataSource.filter(dataSourceFilterQuery);    

Then I get the results I want. It works.
I then have the possibility of saving the values of all the dropdownlists as one filter in localStorage.

     const filtersObject = {
                    Something: whatever.value(),
                    ...
                };
   
                this.storage.setItem("Filter", JSON.stringify(filtersObject));

When I restart the application, the dropdownlists are populated with whatever is in localStorage

    const filter =  JSON.parse(localStorage.getItem("Filter"));
   
                    $("#something").data("kendoDropDownList").value(filters.whatever || "");               
                }

The thing is, I wanted to add these filters, if they exist on localStorage, to the datasource when the application starts so that the user can see the results of the filter he saved when the applications starts and not have to click on search again.

So, what I want is to do apply this

    var dataSource = $("#grid").data("kendoGrid").dataSource;
                var dataSourceFilterQuery = new Array();
   
        if ($("#something").data("kendoDropDownList").value() !== null) {
                        dataSourceFilterQuery.push({ field: "something", operator: "IsGreaterThanOrEqualTo", value: ($("#something").data("kendoDropDownList").value()) });
                }
   
                dataSource.filter(dataSourceFilterQuery);

before the grid is displayed.

Is this possible?

Tks in advance.

2 Answers, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 30 Jun 2017, 11:58 AM
Hello Rui,

A possible solution is setting the Grid options, if availble, on the page ready event.

For example, I modified the Persist state demo:
Now, the code in the persist_state.cshtml looks like:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.CustomerViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(c => c.ContactName).Width(250).Locked(true);
        columns.Bound(c => c.ContactTitle).Width(350);
        columns.Bound(c => c.CompanyName).Width(350);
        columns.Bound(c => c.Country).Width(400);
    })
    .HtmlAttributes(new { style = "height: 550px;" })
    .Scrollable()
    .Groupable()
    .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
    .Sortable()
    .ColumnMenu()
    .Events(e=>e.DataBound("onDataBound"))
    .Resizable(rsb=>rsb.Columns(true))
    .Reorderable(r => r.Columns(true))
    .Pageable(pageable => pageable
    .Refresh(true)
    .PageSizes(true)
    .ButtonCount(5))
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Customers_Read", "Grid"))
    )
)
  
<script>
    $(function () {
        var grid = $("#grid").data("kendoGrid");
  
        var options = localStorage["kendo-grid-options"];
  
        if (options) {
            grid.setOptions(JSON.parse(options));
        }
    });
    function onDataBound(e) {
        var grid = $("#grid").data("kendoGrid");
  
        localStorage["kendo-grid-options"] = kendo.stringify(grid.getOptions());
    }
</script>

I hope this helps.


Regards,
Preslav
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Rui
Top achievements
Rank 1
answered on 27 Jul 2017, 01:47 PM
That works just fine. Tks
Tags
Grid
Asked by
Rui
Top achievements
Rank 1
Answers by
Preslav
Telerik team
Rui
Top achievements
Rank 1
Share this question
or