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

Get Data with Parameter, Filter Client Side

2 Answers 207 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 04 Jun 2015, 12:16 PM

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.

 

2 Answers, 1 is accepted

Sort by
0
Accepted
Daniel
Telerik team
answered on 08 Jun 2015, 08:19 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Michael
Top achievements
Rank 1
answered on 08 Jun 2015, 01:22 PM

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>

Tags
Grid
Asked by
Michael
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Michael
Top achievements
Rank 1
Share this question
or