Pre-apply Filter Values

3 posts, 1 answers
  1. Joel
    Joel avatar
    206 posts
    Member since:
    Jun 2018

    Posted 07 May 2020 Link to this post

    My site has a quick-search field on the main nav.  When the user puts a first & last name in the field and hits the search button, they expect to land on my Persons.Index page with a list of filtered people.  Can you tell me how to pre-populate the filter with values?  Then, have the grid refresh using the filters.  I prefer not to do multiple round trips... prefer this to be in place the first time the grid reads.

    My Grid

    @(Html.Kendo().Grid<Person>()
      .Name("grid")
      .Columns(columns =>
      {
          columns.Command(command => command
              .Custom("Detail")
              .Click("goDetail"))
              .Width(Glossary.Portal.ButtonWidth);
          columns.Bound(p => p.FirstName)
              .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")
                  .ShowOperators(false)
                  .SuggestionOperator(FilterType.Contains)));
          columns.Bound(p => p.LastName)
              .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")
                  .ShowOperators(false)
                  .SuggestionOperator(FilterType.Contains)));
      })
      .Pageable()
      .Sortable()
      .Scrollable()
      .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
      .HtmlAttributes(new { style = "height:550px;" })
      .DataSource(dataSource => dataSource
          .Ajax()
          .PageSize(20)
          .Read(read => read.Action("IndexJson", "Patients").Data("gridGetData"))
      ))
  2.
  3. Joel
    Joel avatar
    206 posts
    Member since:
    Jun 2018

    Posted 08 May 2020 Link to this post

    From you other controls, it seems I am looking to set a filter expression when the page loads.
  5. Answer
    Anton Mironov
    Admin
    Anton Mironov avatar
    168 posts

    Posted 12 May 2020 Link to this post

    Hello, Joel,

    Thank you for the provided code snippet!

    The Kendo UI Grid sends a Read request to populate its data the first moment it gets initialized. To avoid the first request add the following option to the Grid's declaration:

    .AutoBind(false)
    Within the document.ready jQuery event, send the Read request with the relevant filters prepopulated. Here is an example:
     $(document).ready(function () {
        var grid = $('#grid').data('kendoGrid');

        grid.dataSource.filter({
            logic: "and",
            filters: [
                { field: "ShipName", operator: "contains", value: "4" },
                { field: "ShipCity", operator: "contains", value: "1" }
            ]
        });
    });

    Additional information about the filter operators is presented in the below article:
    https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/filterable.operators.number

    I hope this information helps. Please let me know if I can assist you any further.

    Regards,
    Anton Mironov
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top