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

Filterable.UI datasource

11 Answers 199 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Pierre
Top achievements
Rank 1
Pierre asked on 27 Jun 2013, 02:03 PM
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

11 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 28 Jun 2013, 10:35 AM
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!
0
Pierre
Top achievements
Rank 1
answered on 08 Jul 2013, 08:36 PM
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
0
Kiril Nikolov
Telerik team
answered on 09 Jul 2013, 06:57 AM
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!
0
Pierre
Top achievements
Rank 1
answered on 10 Jul 2013, 07:05 PM
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
0
Alexander Valchev
Telerik team
answered on 12 Jul 2013, 03:00 PM
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!
0
Pierre
Top achievements
Rank 1
answered on 12 Jul 2013, 05:38 PM
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.
0
Kiril Nikolov
Telerik team
answered on 16 Jul 2013, 11:42 AM
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!
0
Pierre
Top achievements
Rank 1
answered on 16 Jul 2013, 02:11 PM
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.
0
Pierre
Top achievements
Rank 1
answered on 16 Jul 2013, 02:14 PM
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?
0
Kiril Nikolov
Telerik team
answered on 17 Jul 2013, 12:51 PM
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!
0
Kiril Nikolov
Telerik team
answered on 17 Jul 2013, 12:56 PM
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!
Tags
Grid
Asked by
Pierre
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Pierre
Top achievements
Rank 1
Alexander Valchev
Telerik team
Share this question
or