Filterable.UI datasource

12 posts, 0 answers
  1. Pierre
    Pierre avatar
    212 posts
    Member since:
    Apr 2007

    Posted 27 Jun 2013 Link to this post

    Hi, I try to understand the FilterCustomizationDemo to do the same.

    I don't understand were the "dataSource: titles" come from!

    How can I tell the UI function to take the internal Grid datasource?

    function titleFilter(element) {
        element.kendoAutoComplete({
            dataSource: titles
        });
    }
    thanks
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 28 Jun 2013 Link to this post

    Hello Pierre,


    If you check the people.js file that is included in the Filter menu customization demo on our site, you will see that "titles" is an array with values (titles) that is used to filter the data shown in the Grid. So basically we use this array to tell the Grid which titles to show.


    Regarding your second question - I would suggest you to define a DataSource outside of your Grid, and then you can use this DataSource in your Grid or in any other Kendo UI Widget



    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. Kendo UI is VS 2017 Ready
  4. Pierre
    Pierre avatar
    212 posts
    Member since:
    Apr 2007

    Posted 08 Jul 2013 Link to this post

    Ok, I change my grid tu use a external datasource.

    But how to set filterable.UI programatically?

    I try that:

    col.filterable = new Object();
    col.filterable.UI = that.AutoComplete;
    Col is the columns array use in the grid.

    Then this small test function:
    ConstV7.prototype.AutoComplete = function (element) {
        that = this;
     
        element.kendoAutoComplete({
            dataSource: that.colDataSource[0].Essence
        });
    }
    But the function is never called.
    Any suggestion?
    Thanks
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 09 Jul 2013 Link to this post

    Hi Pierre,

    The columns.filterable.ui property should be implemented inside grid's initialization. To use an AutoComplete widget in the filter menu, you can implement it in a function inside the filterable property.

    filterable: {
          ui: function(element) {
            element.kendoAutoComplete(); // initialize a Kendo UI AutoComplete
          }
        }

    For your convenience here is a jsBin example which demonstrates a possible implementation.
     

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Pierre
    Pierre avatar
    212 posts
    Member since:
    Apr 2007

    Posted 10 Jul 2013 Link to this post

    OK,
    I found the solution. My code was correct and work good. But I put the UI property in uppercase instead of lowercase. 

    Question: 
    Like all my page are created dynamically, I create some "généric" filter function:
    ConstV7.prototype.FiltreDropDown = function (element, objPropId, champ) {
     
        var UniqueList= this.ConvUniqueListe(this.colDataSource[objPropId].data(), "column2");
     
        element.kendoDropDownList({
            dataSource: listeUnique,
            optionLabel: "Make a selection..."
        });
    }
    this is called from the Grid like this:
    col.filterable.ui = function (element) {
        that.FiltreAutoComplete(element, objPropId, col.field);
    }
    I need to know the field name to create dynamically a liste of unique item base on the DataSource. That work good if I put "manually" the name of the columns like I dit in the firt code.
    But when I try to pass col.field (containing at the grid cration the name of the field) to my event filterable.UI, when the event occur the col.field are not defined anymore.

    How can I detect on witch column the filter is currently created inside my FiltreDropDown event ?
    Thanks
  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 12 Jul 2013 Link to this post

    Hi Pierre,

    Kendo Grid has a filterMenuInit event which fires when the grid filter menu is initialized. The event data contains information about field name of the column for which the filter menu is initialized. For more information please check the corresponding API reference:
    I hope this information will help.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Pierre
    Pierre avatar
    212 posts
    Member since:
    Apr 2007

    Posted 12 Jul 2013 Link to this post

    Thanks for reply

    I look a the filtermenuinit event. But the sample show how to get the default dropdownlist containing "and, or, start with, ....". But four our application we need to get de dropdownlist of the selection "answer".

    Check this senario:
    When a user clic on the filter menu. the first event called is the one set in the filterable.ui event in the column objet. Like this function is created at the grid initialisation, i can parse the <th> column info to check the type of filter the user need. we add a data-filtertype="dropdown" for example. The the filterable.ui is adjusted to the correct type like:
    element.kendoAutoComplete({
        dataSource: [],
        placeholder: "make a choice..."
    });
    At this point I do not know the name of the field, so I let the datasource empty. (see previous post)

    After that, the filtermenuinit is fired with the field information. Now I need to get the KendoAutoComplete object already in the filter popup Windows to set the correct datasource with the e.field information provided by the filtermununit fonction. I got a private function taking the field then parse the public dataSource and create a array of unique items in one field.
  9. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 16 Jul 2013 Link to this post

    Hello Pierre,

    You can find the AutoComplete widget in the filter menu of the grid using the event argument of the filterMenuInit event:

    e.container.find("[data-role=autocomplete]");


    Then you can use the setDataSource() method to set the DataSource of the AutoComplete.

    I really hope that this will help you achieve your goal.
     

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Pierre
    Pierre avatar
    212 posts
    Member since:
    Apr 2007

    Posted 16 Jul 2013 Link to this post

    Thanks! That work great!

    Take note: when you do
    e.container.find("[data-role=autocomplete]");
    that will return you 2 autocomplelist because in filter windows we got a AND/OR

    but if you do a:
    e.container.find("[data-role=dropdownlist]");
    You will got 5 dropdown list. Don't forget to use condition to avoid changing de (start with, And, Or, Contain, ...... ) list.
  11. Pierre
    Pierre avatar
    212 posts
    Member since:
    Apr 2007

    Posted 16 Jul 2013 Link to this post

    Last question,
    To get the filterMenuInit, I remove the "column menu" to use a "Filter menu". But in the process I lost the ability to hide/show column. 
    Do you have a way to display filter menu (this menu is very useful because we got a visual indicator when a filter is apply) AND the column menu without the filter choice?
  12. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 17 Jul 2013 Link to this post

    Hi Pierre,

    You can trigger the click event of the filter icon and display the menu, without actually clicking it:

    $("#grid .k-grid-header th[data-field=Country] a.k-grid-filter").trigger("click");
    //data-field is the name of the column that you want to trigger the filter for


    I have modified the jsBin example again to illustrate this functionality:

    http://jsbin.com/uwogok/4/ 
     
    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  13. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 17 Jul 2013 Link to this post

    Hi Pierre,

    You can trigger the click event of the filter icon and display the menu, without actually clicking it:

    $("#grid .k-grid-header th[data-field=Country] a.k-grid-filter").trigger("click");
    //data-field is the name of the column that you want to trigger the filter for


    I have modified the jsBin example again to illustrate this functionality:

    http://jsbin.com/uwogok/4/ 
     
    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready