Kendo grid dropdown filter "noDataTemplate" localization without custom filter

3 posts, 0 answers
  1. Daniel
    Daniel avatar
    11 posts
    Member since:
    Apr 2016

    Posted 27 Apr 2017 Link to this post

    I would like to localize the "No data found" message in the grid when the column filter is not overriden. In my grid I have filterable mode="row" so by setting the column values to collection the filter will work as expected. Is there a way to easily override this label without customizing the filter? 

    <kendo:grid-column title="Field1" field="field1">
        <kendo:grid-column-values value="${field1Values}"/>
     </kendo:grid-column>

     

    I found the <kendo:grid-filterable-messages> tag which has options to translate a few properties, so I expected that this would be there too.

    Thanks in advance.

    Daniel

  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1009 posts

    Posted 01 May 2017 Link to this post

    Hi Daniel,

    The setting which changes the Kendo UI editors "no data" template is part of the respective widget's settings.

    Especially when there is a foreign key column (column values), the Kendo UI Grid will generate a different filterable UI. For the foreign key column, it will be a Kendo UI ComboBox, as opposed to the standard string fields, when the default editor is a Kendo UI AutoComplete.

    I suggest you add an event handler to the Kendo UI Grid dataBound event and use the setOptions() method to override the default noDataTemplate.

    AutoComplete:  http://docs.telerik.com/kendo-ui/api/javascript/ui/autocomplete#configuration-noDataTemplate
    ComboBox: http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox#configuration-noDataTemplate

    dataBound:function(){
              var filterCells = $(".k-filter-row").find("input");
              filterCells.each(function(idx,cell){
                if($(cell).data("role") == "combobox"){
                  var combo = $(cell).data("kendoComboBox")
                  combo.setOptions({noDataTemplate: "Nothing Found"})
                }
                if ($(cell).data("role")== "autocomplete"){
                  var autocomplete =  $(cell).data("kendoAutoComplete")
                  autocomplete.setOptions({noDataTemplate: "Nothing Found"})
                }
              })
            }

    Here is a runnable sample for your convenience:

    http://dojo.telerik.com/OKojO

    Regards,
    Alex Hajigeorgieva
    Telerik by Progress
    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.
  3. Daniel
    Daniel avatar
    11 posts
    Member since:
    Apr 2016

    Posted 02 May 2017 Link to this post

    Perfect, it works. Thank you very much!
Back to Top