Refresh Filter AutoComplete when grid datasource is refreshed

14 posts, 1 answers
  1. Adam
    Adam avatar
    7 posts
    Member since:
    Mar 2015

    Posted 12 May 2015 Link to this post

    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

  2. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 14 May 2015 Link to this post

    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!
     
  3. Hubert
    Hubert avatar
    14 posts
    Member since:
    Jul 2014

    Posted 10 Feb 2016 in reply to Kiril Nikolov Link to this post

    Did you find a solution ?
  4. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 12 Feb 2016 Link to this post

    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!
     
  5. Adam
    Adam avatar
    7 posts
    Member since:
    Mar 2015

    Posted 19 Jul 2016 in reply to Kiril Nikolov Link to this post

    This was helpful and help me resolve my issue. Thanks!
  6. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 20 Jul 2016 Link to this post

    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.
     
  7. Aurelio
    Aurelio avatar
    3 posts
    Member since:
    May 2017

    Posted 06 Jul 2017 Link to this post

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

  8. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 10 Jul 2017 Link to this post

    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.
  9. Aurelio
    Aurelio avatar
    3 posts
    Member since:
    May 2017

    Posted 10 Jul 2017 in reply to Boyan Dimitrov Link to this post

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

  10. Aurelio
    Aurelio avatar
    3 posts
    Member since:
    May 2017

    Posted 10 Jul 2017 in reply to Boyan Dimitrov Link to this post

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

  11. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 12 Jul 2017 Link to this post

    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.
  12. Lovelesh
    Lovelesh avatar
    2 posts
    Member since:
    Oct 2015

    Posted 26 Jul 2017 Link to this post

    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>

  13. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 27 Jul 2017 Link to this post

    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.
  14. Lovelesh
    Lovelesh avatar
    2 posts
    Member since:
    Oct 2015

    Posted 28 Jul 2017 in reply to Boyan Dimitrov Link to this post

    Thank you Boyan Dimitrov

    It is working for me.

    Thanks again cheers and enjoy 

Back to Top