Refresh Filter AutoComplete when grid datasource is refreshed

[Adam]

Hello, 

We have a grid with filter row mode enabled. The filters are either drop down lists, or autocomplete fields. When the grid is first initialized, the autocompletes are initialized correctly with their list of possible suggestions based on the data present in the grid (server side filtering is not enabled). On the grid we have a button which changes the datasource url of the grid and refreshes the data : 

//change the URL of the datasource
grid.dataSource.options.transport.read.url = Worklist.buildWorklistUrl();
grid.dataSource.page(1);
grid.dataSource.read();
grid.refresh();

 

When we do this, the grid is updated and the new data set is shown like we want. However, it seems that the autocomplete filter field values are based on the old grid and don't reflect the new data. 

I've tried to refresh the autocompletes manually after refreshing the grid to get them to reflect the new values, but no luck: 

 

var inputs = grid.thead.find("tr").eq(1).find(".k-input");

$.each(inputs, function(idx, input) {
    var autocomplete = $(input).data("kendoAutoComplete");
    if (autocomplete) {
        autocomplete.refresh();
    }
});

Are there any suggestions about how to get those autocompletes to update when the grid contents are updated? 

 Thanks for the help

[Kiril Nikolov]

Hello Adam,

When filter row is enabled the filters themselves have separated dataSource from the Grid. So in order to refresh them, you need to update them with the new dataSource. You can manually set this configuration as explained here:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.filterable.dataSource

Regards,
Kiril Nikolov
Telerik

 

 

[Hubert]

Did you find a solution ?

[Kiril Nikolov]

Hello Hubert,

 

Can you please open a support ticket with more information and/or simple example of your problem and we will be happy to help.

 

Regards,
Kiril Nikolov
Telerik

 

 

[Adam]

This was helpful and help me resolve my issue. Thanks!

[Kiril Nikolov]

Hi,

Happy to hear that the proposed solution worked.

In case you have any further questions - do not hesitate to contact us.

Regards,
Kiril Nikolov
Telerik by Progress

 

 

[Aurelio]

I tried the suggested solution before refreshing the table.  I see the datasource updated correctly when I debug with developer toolds, but I still see old values in the filter autocomplete.  Am I missing something?

$('#myGrid').data('kendoGrid').dataSource = dataSource;
// refresh filter indices
grid.columns.forEach((c) => {
     if(c.filterable)
    {
        c.filterable.dataSource = dataSource;
    }
 });
dataSource.read();
grid.refresh();

[Boyan Dimitrov]

Hello Aurelio,

Based on the provided code I assume that you are trying to set a new instance of kendo.data.DataSource for the grid widget. Our suggested approach for doing this is to call the setDataSource method of the grid API. 

Regards,
Boyan Dimitrov
Progress Telerik

[Aurelio]

Hi Boyan,

Actually no, I can update the data for the grid just fine, I'm trying to reset the datasource of the autocomplete filters for some columns for the table as they do not refresh when you update the datasource of the grid.  Apparently, when updating a datasource, you need to update the datasource for every widget you are using, just doing it for the grid is not sufficient (it would be nice for the API to update all pertinent datasources of the grid when updating the overall grid datasource).  

I'll try the setDataSource method of each widget.  Nonetheless, I figured it out and did the following in the method I use to refresh the table:

grid.columns.forEach((c) => {

      if((c as any).field === 'NameFieldToLookFor')
      {
              (c.filterable as any).cell.dataSource.data(

               // method I use to extract the field I want to populate the autocomplete with
              self.createAutoCompleteNameArray(myArr.map((e) =>{
                      return {Name : e.NameField};
               }
       )));
}

[Aurelio]

Hi Boyan,

Actually no, I can update the data for the grid just fine, I'm trying to reset the datasource of the autocomplete filters for some columns for the table as they do not refresh when you update the datasource of the grid.  Apparently, when updating a datasource, you need to update the datasource for every widget you are using, just doing it for the grid is not sufficient (it would be nice for the API to update all pertinent datasources of the grid when updating the overall grid datasource).  

I'll try the setDataSource method of each widget.  Nonetheless, I figured it out and did the following in the method I use to refresh the table:

grid.columns.forEach((c) => {

      if((c as any).field === 'NameFieldToLookFor')
      {
              (c.filterable as any).cell.dataSource.data(

               // method I use to extract the field I want to populate the autocomplete with
              self.createAutoCompleteNameArray(myArr.map((e) =>{
                      return {Name : e.NameField};
               }
       )));
}

[Boyan Dimitrov]

Hello Aurelio,

Indeed this is a possible way to access the dataSource of the filter row widget and change its data. Alternative way would be to iterate though the table header elements of the grid table element and find the DOM element with data-role attributes, get the widget instances and access their dataSource properties. Both approaches will do the same thing eventually. 

Regards,
Boyan Dimitrov
Progress Telerik

[Lovelesh]

I have same issue that filter datasource is not updating when update the grid datasource.
In this below example by click on update button one row will be added in grid but whenever i'm searching new added name in name column, added record  will not search.

<html ng-app="demo">
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.624/styles/kendo.common.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.624/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.621/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.624/styles/kendo.mobile.all.min.css">

    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2015.1.429/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.624/styles/kendo.default.min.css">
<script src="https://kendo.cdn.telerik.com/2015.2.624/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2015.2.624/js/jszip.min.js"></script>
</head>
<body ng-controller="demoCtrl">
  
<div id="grid" ></div>
  
  <button ng-click="update()">Update</button>
<script>
  angular.module("demo",[]).controller("demoCtrl", function($scope){
  $scope.update = function(){
      var grid = $("#grid").data("kendoGrid");
grid.dataSource.add({ name: "lovelesh", age: 33 });
    };
    $("#grid").kendoGrid({
      columns: [
        { 
          field: "name"
       }
      ],
      filterable: {mode:"row"},
      dataSource:{data: [ { name: "Jane", age: 30 }, { name: "John", age: 33 }]}
    });
  })
</script>
</body>
</html>

[Boyan Dimitrov]

Hello,

Indeed this is expected behavior since the DataSourceof the AutoComplete is separate from the grid's DataSource. On initialization phase the DataSourceof the AutoComplete is populated with data of the grid, but they are not sharing same DataSource. 

Sharing same data source instance might cause an unexpected behavior - for example filtering the data source will filter the auto complete results as well. Normally users expect to see all items in the auto complete no matter whether the grid is filtered or not.  

Please refer to the http://dojo.telerik.com/EziSE example. 

Regards,
Boyan Dimitrov
Progress Telerik

[Lovelesh]

Thank you Boyan Dimitrov

It is working for me.

Thanks again cheers and enjoy