External grid filter with ServerOperaton(false)

2 posts, 0 answers
  1. Tim
    Tim avatar
    1 posts
    Member since:
    Aug 2017

    Posted 30 Oct 2017 Link to this post

    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
                      }
                ]
            });
        }

  2. Stefan
    Admin
    Stefan avatar
    2475 posts

    Posted 01 Nov 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top