Kendo UI MultiSelect on Grid toolbar in a Tab Strip of Popup Editor.

[Chatra]

Hi ,

I am not able to bind or show the Multi Select  on  Kendo toolbar of Popup Editor(Under the Tab Grid)

Please find the demo here.

http://jsbin.com/kibidipo/6/edit

The Multi Select ID "multiselectfilter" is in Template.

End of the day I want to Show applied filter columns on Grid in a Multiselect as a buttons of filters applied on Grid by using Multiselect selected items.

Kindly let me know if I am in wrong direction or I am if I am not getting control values through use of Template properly.

Thanks,
Chatrapathi chennam

[Georgi Krustev]

Hello Chatrapathi chennam,

There are several things that you will need to change in the given demo to accomplish your goal:

1. MultiSelect widget can be crated only from a SELECT element. I will suggest you check this help topic for more information.
2. Widget needs to be initialized in the Edit event handler of the master grid.
3. You will need to use the setDataSource method to set a new datasource to the widget.

I modified the demo to accomplish your task - link to the demo. Please note that I commented some of the code as it breaks the grid's functionality. If you need to filter the datasource, then I will suggest you examine the corresponding documentation.

Regards,
Georgi Krustev
Telerik

 

 

[Chatra]

Hi Georgi,

Thanks for the reply.

Your demo executes as expected. But for some reason on my side I ended up Initializing the Multiselect (agMultiselectfilter) in databound of Tab Strip Grid to work and it is not working as expected please see attached images.If I try to Initialize the Multiselect in Edit Event as specified the $("#agMultiselectfilter").data("kendoMultiSelect") does return Undefined value.

I do have one more Question ; Where do write the Change event for Multiselect if required as i want to clear the filter on the column when clicked on  Filter button(x) of Multiselect.

 $("#agMultiselectfilter").kendoMultiSelect({
        dataTextField: "text",
        dataValueField: "value"
    });

Thanks Chatrapathi Chennam

[Georgi Krustev]

Hello again Chatra,

Straight up to your questions:

#1
The widget looks like this, because it is initialized twice. I will need to review your implementation in order to advice you further.

#2
Could you elaborate more on your requirement? It is not very clear what exactly you would need to achieve.

Regards,
Georgi Krustev
Telerik

 

 

[Chatra]

Hi Georgi,

Thanks for the reply.

#1) Yes your right .I have Initialized it in databound event so for every click it does getting fired and it is just a test as Multiselect is not  getting Initialized in my Implementation but it does only in Databound event  which is very bad. So  I have attached below files of my Implementation for review.

Note: In Demo #agMultiselectfilter is getting initialized very well in Edit of Master grid but not in my Implementation.

#2) Please see the demo the at http://jsbin.com/kibidipo/19/edit. I want to Implement the Onchange Event on Multiselect ;The cancel (remove) on any button filter in Multiselect will clear the filter on that particular column.Hope this helps Please let me know any more Info may require.                                                                                                                                                                                                                      
:) Thanks In Advance             

Chatrapathi Chennam

[Chatra]

Hi Georgi,

Here is the complete Implementation of what I am trying to achieve.Please find the sample demo project attached below.

Note: Vs2010 required;I have not included kendo/js scripts because of size.

Thanks
Chatrapathi chennam  

[Georgi Krustev]

Hello Chatra,

Thank you for the test project. I noticed that you are trying to initialize the second MultiSelect widget at a moment when the agMultiselectfilter element is not present in the DOM. The only place where you can initialize the widget is in the dataBound event of the popup grid. I modified your project, to show you how to accomplish this.

With regards to your second question, I noticed that you are compering a string value with an array (value of the multiselect). This always will be false. You can modify the used code like this:

if ($.inArray(agdatasourceFilters.filter().filters[i].field, diff) !== -1) {
     agfilters.filters.splice(i, 1); //Remove IsActive Filter from its Position in Filters List
}

I will suggest you check the value method documentation.
The modified test project is attached.

Regards,
Georgi Krustev
Telerik

 

 

[Chatra]

Thank you Georgi :)


Thanks
Chatrapathi Chennam