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?
thanks
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
});
}
11 Answers, 1 is accepted
0
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
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 2
Iron
Iron
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 is the columns array use in the grid.
Then this small test function:
But the function is never called.
Any suggestion?
Thanks
But how to set filterable.UI programatically?
I try that:
col.filterable =
new
Object();
col.filterable.UI = that.AutoComplete;
Then this small test function:
ConstV7.prototype.AutoComplete =
function
(element) {
that =
this
;
element.kendoAutoComplete({
dataSource: that.colDataSource[0].Essence
});
}
Any suggestion?
Thanks
0
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.
Kiril Nikolov
Telerik
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.
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 2
Iron
Iron
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:
this is called from the Grid like this:
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
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..."
});
}
col.filterable.ui =
function
(element) {
that.FiltreAutoComplete(element, objPropId, col.field);
}
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
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:
Regards,
Alexander Valchev
Telerik
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 2
Iron
Iron
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:
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.
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..."
});
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
Hello Pierre,
You can find the AutoComplete widget in the filter menu of the grid using the event argument of the filterMenuInit event:
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
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 2
Iron
Iron
answered on 16 Jul 2013, 02:11 PM
Thanks! That work great!
Take note: when you do
that will return you 2 autocomplelist because in filter windows we got a AND/OR
but if you do a:
You will got 5 dropdown list. Don't forget to use condition to avoid changing de (start with, And, Or, Contain, ...... ) list.
Take note: when you do
e.container.find(
"[data-role=autocomplete]"
);
but if you do a:
e.container.find(
"[data-role=dropdownlist]"
);
0

Pierre
Top achievements
Rank 2
Iron
Iron
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?
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
Hi Pierre,
You can trigger the click event of the filter icon and display the menu, without actually clicking it:
I have modified the jsBin example again to illustrate this functionality:
http://jsbin.com/uwogok/4/
Regards,
Kiril Nikolov
Telerik
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
Hi Pierre,
You can trigger the click event of the filter icon and display the menu, without actually clicking it:
I have modified the jsBin example again to illustrate this functionality:
http://jsbin.com/uwogok/4/
Regards,
Kiril Nikolov
Telerik
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!