External grid filter with ServerOperaton(false)

[Tim]

Hi all. I got a kendo grid that holds candidates. 

I got a external textbox, and for every character typed there's a 0.5 second debouce before the datasource.filter happens with the textbox value.(search as you type functionality).

I want to manual filter the grid without a read request occuring on every input. I changed ServerOperation to FALSE, but now datasource.filter just won't work. Nothing happens. When I put ServerOperation to TRUE, all works fine.

How can I make the manual filter work? Here's my code;

 

@(Html.Kendo().Grid<CandidatesGridViewModel>()
      .Name("grid")
      .HtmlAttributes(new { @class = "kendoHover" })
      .ToolBar(t =>
      {
          t.Template(@Html.KendoGridToolbar(true, true).ToHtmlString());
      })
      .Columns(columns =>
      {
          columns.Bound(c => c.FullName).Title(Resources.Candidates);
          columns.Bound(c => c.StatusId).Title(Resources.Status)
              .ClientTemplate("# if(StatusDescription == undefined) { # Geen status # } else { # #=StatusDescription# # } # ")
              .EditorTemplateName("CandidateStatusEditor")
              .Filterable(filterable => filterable.UI("statusFilter"));
          columns.Bound(c => c.FirstName).Visible(false);
          columns.Bound(c => c.LastName).Visible(false);
          columns.Bound(c => c.PrimaryPhone).Title(Resources.PrimaryPhone);
          columns.Bound(c => c.Email).Title(Resources.EmailAdress);
          columns.Bound(c => c.LastActionDescription).Title(Resources.LatestActions);
          columns.Bound(c => c.LastExecutedByEmail).Title(Resources.LastCreationUser);
          columns.Bound(c => c.Vacancy).Title(Resources.Vacancy);

          columns.Command(commands => commands.Edit().CancelText(Resources.Cancel).UpdateText(Resources.Update).Text(Resources.Edit));
      })
      .Scrollable()
      .Sortable()
      .Filterable(filterable => filterable
          .Extra(false)        
          .Operators(operators => operators
              .ForString(str => str.Clear()
                  .Contains(@Resources.Contains)
                  .StartsWith(@Resources.StartsWith)
                  .EndsWith(@Resources.EndsWith)
                  .IsEqualTo(@Resources.IsEqualTo)
                  .IsNotEqualTo(@Resources.IsNotEqualTo)
              ))
      )
      .Groupable()
      .Events(events => events
          .SaveChanges("onSaveChangesCandidatesGrid")
          .Save("onSaveChangesCandidatesGrid")
          .ExcelExport("excelExport"))
                          
      .Editable(editable => editable.Mode(GridEditMode.InLine))
      .Selectable().Events(e => e.DataBound("onDataBound"))
      .AutoBind(false)
      .Resizable(resize => resize.Columns(true))
      .Excel(excel => excel
          .FileName("Candidates.xlsx")
      
      ).Pdf(pdf => pdf
          .FileName("Candidates.pdf")
          .AvoidLinks(true)
      )
      .Pageable(pageable => pageable
          .Refresh(true)
          .PageSizes(new List<object> { 10, 20, 50, "All" })
          .ButtonCount(5))
      .DataSource(dataSource => dataSource
          .Ajax()
          .ServerOperation(false)
          .Model(model =>
          {
              model.Id(p => p.Id);
              model.Field(p => p.Id).Editable(false);
              model.Field(p => p.FullName).Editable(false);
              model.Field(p => p.StatusDescription).Editable(false);
              model.Field(p => p.PrimaryPhone).Editable(false);
              model.Field(p => p.Email).Editable(false);
              model.Field(p => p.LastActionDescription).Editable(false);
              model.Field(p => p.LastExecutedByEmail).Editable(false);
              model.Field(p => p.Vacancy).Editable(false);
          })
          .Read(read => read.Action("Candidates_Read", "Candidates").Data("candidatesReadData"))
          .Update(update => update.Action("Candidates_Update", "Candidates"))
          .PageSize(10))
      .NoRecords(x => x.Template("<div class='noSearchResults'>" + Resources.NoCandidatesFound + "</div>")))

 

 

External input: keyup => triggers filterGrid()

 

 $(function () {
        //dynamic search
        var searchBox = $(".search [name=keyword]");


        $(searchBox).keyup($.debounce(500, function (ev) {
           
                filterGrid();
            
        }));

        $(".search [name=statusFilter]").change(filterGrid());
        
        $(".candidateInfoClick").on('click', function (r) {
            console.log($(this).attr('class').split(/\s+/)[2].substr(10));
            window.location.href = "@Url.Action("ViewCandidate", "Candidates")?candidateId=" + $(this).attr('class').split(/\s+/)[2].substr(10);
        });
    });

 

FilterGrid() : 

 

function filterGrid() {
        var keywordUpper = $(".search [name=keyword]").val();
        var keyword = keywordUpper.toLowerCase().trim();
        var status = $("#statusFilter option:selected").text();
        console.log(keyword);
        //Setting the filter of the Grid
        $("#grid").data("kendoGrid").dataSource.filter
           ({
            filters: [
                {
                    field: "FullName",
                    operator: "contains",
                    value: keyword
                },{
                      field: "StatusDescription",
                      operator: "contains",
                      value: status
                  }
            ]
        });
    }

[Stefan]

Hello, Tim,

Thank you for the provided code.

Based on the code the Grid should be filtered correctly regardless of the serverOperations. When the server operations are set the true, the Grid will make requests to the server to filter, sort and page the data, and when it is false all will be done on the client side.

I can assume that because autoBind is set to false, the Grid is not bound with data, and when the serverOperations are disabled, the Grid will not make a request to the server and it will stay empty. In this case, either the Grid should be populated initially, or the serverOperations should be used.

In order to check what may be causing this, I can suggest logging the following results in the console. This will help us determine if all of the data is available and then check the difference between the filters before and after applying the one from the external input:

function filterGrid() {
        var keywordUpper = $(".search [name=keyword]").val();
        var keyword = keywordUpper.toLowerCase().trim();
        var status = $("#statusFilter option:selected").text();
        var data = $("#grid").data("kendoGrid").dataSource.data()
        console.log(data)
        var filter = $("#grid").data("kendoGrid").dataSource.filter()
        console.log(filter)
        console.log(keyword);
        //Setting the filter of the Grid
        $("#grid").data("kendoGrid").dataSource.filter
           ({
            filters: [
                {
                    field: "FullName",
                    operator: "contains",
                    value: keyword
                },{
                      field: "StatusDescription",
                      operator: "contains",
                      value: status
                  }
            ]
        });
        filter = $("#grid").data("kendoGrid").dataSource.filter()
        console.log(filter)
    }

Let me know if you need additional assistance on this matter.

Regards,
Stefan
Progress Telerik