Get Data with Parameter, Filter Client Side

[Michael]

Hi

I would like to load data as soon as a user typed 3 characters of the name. After loading i would like to filter client side if the user enters more characters 

I have the following code:

 

<input type="text" id="txtFilter" onkeyup="fFilterChanged()" />

@(Html.Kendo().Grid<MvcApplication.Models.Customers>()
      .Name("gridCustomers")
      .DataSource(dataSource => dataSource // Configure the grid data source
          .Ajax() // Specify that ajax binding is used
          .Read(read => read.Action("Customers_Read", "Home").Data("additionalInfo")) // Set the action method which will return the data in JSON format
          .ServerOperation(false)
          .PageSize(13)
       )
       .AutoBind(false)
       .Columns(columns =>
       {
           // Create a column bound to the CustomerCode property
           columns.Bound(customer => customer.CustomerCode);
           // Create a column bound to the CustomerName property
           columns.Bound(customer => customer.CustomerName);
       })
       .Pageable() // Enable paging
       .Sortable() // Enable sorting
       .Selectable(n => n.Mode(GridSelectionMode.Single))
)

<script type="text/javascript">

    function fFilterChanged() {

            if (txtFilter.value.length == 3)
                loadGrid();
    }

    function additionalInfo() {
        return {
            customerFilter: txtFilter.value
        }
    }

    function loadGrid() {
        var gridDataSource = $("#gridCustomers").data("kendoGrid").dataSource;
        gridDataSource.read();
}

 

 

This works great so far. Now I would like to filter client side:

if (txtFilter.value.length > 3) {
    gridListFilter.logic = "and";   // a different logic 'or' can be selected
    gridListFilter.filters.push({ field: "CustomerName", operator: "startswith", value: txtFilter.value });

    gridDataSource.filter(gridListFilter);
    gridDataSource.read();
    filterOn = true;
}

and

if (txtFilter.value.length <= 3) {
    gridDataSource.filter([]);
    gridDataSource.read();
    filterOn = false;
}

 

now since it seams I have to call the read() method while filtering I automaticly get a new Ajax roundtrip - the Read() method of the grid is called on the Server again.

How can I ensure I only get the data once and then filter client side?

Thanks.

 

[Daniel]

Hello Michael,

Could you clarify problems are you experiencing when the read method is not called? Using just the filter method should be sufficient in the described scenario. It will make a request to the server when no data is loaded yet and after that the data will be filtered on the client.

Regards,
Daniel
Telerik

 

 

[Michael]

Hi

Here's my working code - I had to reload explicitly at 3 different characters than before because filter would not reload from the Server in this case:

<input type="text" id="txtFilter" onkeyup="fFilterChanged()" />

@(Html.Kendo().Grid<MvcApplication.Models.Customers>()
      .Name("gridCustomers")
      .DataSource(dataSource => dataSource // Configure the grid data source
          .Ajax() // Specify that ajax binding is used
          .Read(read => read.Action("Customers_Read", "Home").Data("additionalInfo")) // Set the action method which will return the data in JSON format
          .ServerOperation(false)
          .PageSize(13)
       )
       .AutoBind(false)
       .Columns(columns =>
       {
           // Create a column bound to the CustomerCode property
           columns.Bound(customer => customer.CustomerCode);
           // Create a column bound to the CustomerName property
           columns.Bound(customer => customer.CustomerName);
       })
       .Pageable() // Enable paging
       .Sortable() // Enable sorting
       .Selectable(n => n.Mode(GridSelectionMode.Single))
       .Events(e => e.DataBound("fDataChanged"))
)

<script type="text/javascript">

    var gridListFilter;
    var isLoading = false;
    var currentLoaded;

    function fDataChanged(e)
    {
        isLoading = false;
    }

    function fFilterChanged() {

        if (!isLoading) {
            if (gridListFilter == null) {
                gridListFilter = { filters: [] };
            }

            var gridDataSource = $("#gridCustomers").data("kendoGrid").dataSource;

            if (txtFilter.value.length == 3) {
                isLoading = true;
                if (txtFilter.value != currentLoaded) {
                    loadGrid();
                    return;
                }

                gridDataSource.filter([]);

                if (currentLoaded == null)
                {
                    // we loaded from filter event
                    currentLoaded = txtFilter.value;
                    return;
                }
            }

            if (txtFilter.value.length > 3) {
                // and push
                gridListFilter.logic = "and";   // a different logic 'or' can be selected
                if (gridListFilter.filters.length == 0)
                    gridListFilter.filters.push({ field: "CustomerName", operator: "startswith", value: txtFilter.value });
                else
                    gridListFilter.filters[0].value = txtFilter.value;

                gridDataSource.filter(gridListFilter);
                filterOn = true;
            }

            currentLoaded = txtFilter.value;
        }
    }

    function additionalInfo() {
        return {
            customerFilter: txtFilter.value
        }
    }

    function loadGrid() {
        isLoading = true;
        var gridDataSource = $("#gridCustomers").data("kendoGrid").dataSource;
        gridDataSource.read();

        // we always reset the filter
        gridDataSource.filter([]);
        filterOn = false;

        currentLoaded = txtFilter.value;
    }

</script>