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

Refresh Filter AutoComplete when grid datasource is refreshed

13 Answers 1308 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Adam
Top achievements
Rank 1
Adam asked on 12 May 2015, 08:08 PM

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

13 Answers, 1 is accepted

Sort by
0
Accepted
Kiril Nikolov
Telerik team
answered on 14 May 2015, 08:50 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Hubert
Top achievements
Rank 1
answered on 10 Feb 2016, 11:51 AM
Did you find a solution ?
0
Kiril Nikolov
Telerik team
answered on 12 Feb 2016, 08:09 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Adam
Top achievements
Rank 1
answered on 19 Jul 2016, 06:55 PM
This was helpful and help me resolve my issue. Thanks!
0
Kiril Nikolov
Telerik team
answered on 20 Jul 2016, 07:18 AM
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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Aurelio
Top achievements
Rank 1
answered on 06 Jul 2017, 05:51 PM

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();

0
Boyan Dimitrov
Telerik team
answered on 10 Jul 2017, 12:03 PM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Aurelio
Top achievements
Rank 1
answered on 10 Jul 2017, 12:37 PM

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

0
Aurelio
Top achievements
Rank 1
answered on 10 Jul 2017, 12:37 PM

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

0
Boyan Dimitrov
Telerik team
answered on 12 Jul 2017, 08:04 AM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Lovelesh
Top achievements
Rank 1
answered on 26 Jul 2017, 07:21 AM

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>

0
Boyan Dimitrov
Telerik team
answered on 27 Jul 2017, 03:18 PM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Lovelesh
Top achievements
Rank 1
answered on 28 Jul 2017, 03:40 PM

Thank you Boyan Dimitrov

It is working for me.

Thanks again cheers and enjoy 

Tags
Grid
Asked by
Adam
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Hubert
Top achievements
Rank 1
Adam
Top achievements
Rank 1
Aurelio
Top achievements
Rank 1
Boyan Dimitrov
Telerik team
Lovelesh
Top achievements
Rank 1
Share this question
or