I want to cascade 3 dropDownLists using local data. The second cascades from the first and the third cascades from the second. For the third dropDownList, I want to be able to intercept the cascade of the third from the second and adjust the filter to apply against the local data. How can I do this?
The issue is that it seems as if cascading from the second to the third ddl only uses the second's value as a filter for the third. What I need is to use the value of both the first and second when filtering data for the third.
Thanks,
--Ed
6 Answers, 1 is accepted
Rank 1
Here's a jsFiddle I'm working on - to give you a bit more info what I'm trying to do.
http://jsfiddle.net/edsinek/oofdp3Lm/
Any help is appreciated.
In general, the cascading widget will not trigger filtering event when parent value is changed. This will change in Q1 2016: With this new functionality, you will be able to intercept the filtering end easily modify the filter expression.
With the current version, there is no easy way to do this. The only feasible option for your requirement to be implemented is to develop custom cascading functionality. In other words, you will need to cascade the widgets manually using parents values and the child datasource filter method.
Regards,
Georgi Krustev
Telerik
Rank 1
Thanks Georgi,
In my situation, where I have 3 dropDownLists, cascading from 1 to 2 to 3, I understand the child will (in 1Q2016 release) get the parent value in the filter event (so 2 filter event gets 1 value, 3 filter event gets 2 value). Will the hierarchy of cascading dropDownLists be available? For example, I want to make sure 3 will get 2 value and also be able to go up the hierarchy and get 1 value as well.
--Ed
Rank 1
Until 1Q2016 comes out, I'll have to manage the cascading myself. Unfortunately, this isn't a super straight-forward problem I'm working on. I've updated the jsFiddle and hope you can take a look and point me in the right direction on a couple of fronts. I've updated the local dataSource for the dropdowns to be a dictionary (table: columns) of dictionaries (column: column details). I’ve created a local dataSource for the initial grid data (eventually grid data will all be remote).
http://jsfiddle.net/edsinek/oofdp3Lm/
When I click "Edit", all fields should be editable, but if the user changes the table selection, the column, comparison, & value should be disabled. They should be enabled when a table is selected. Same with “Add New Record” – when a new record is added, only Table should be editable and perhaps Logic field if it not the first row (see bullet below for Logic).
The Value column - based on the column selection, the value column should initialize the widget appropriate for the data type. I have the data type as a column in the dataItem. What is the best way (and where) to initialize that <input> as the proper widget?
Right now, "Add New Record" isn't doing anything. What am I missing?
For the first row only, the Logic field should be non-editable and blank (or even better, static text of "WHERE")
Note, I think this sort of example would be really great to show in the list of grid demos you have on the site - a complex inline editing where the fields are cascading, the values may be different widget types, etc.
Thanks again,
--Ed
Rank 1
Once the filtering event starts firing (in Q1 2016), you will get access to the filter of the child widget, which will contain only the filter value from its direct parent. Basically, the cascading functionality stays unchanged, but you will get access to the filter expression and change/update if needed. Basically you can even prevent the default filtration and filter the widget using a much more complex filter expressions.
In general, I would suggest you filter the child widget and disable/enable it when parent selection is changed. This is how, we implement cascading feature: During the widget creation (when editorTemplate function is called), you can access to the model value. You can build the data result based on this selected values, as the model contains all required information. Basically, thus you will be able to filter the source correctly on initial load and allow the MVVM value binding to pre-select the correct item on edit. I am afraid that I will not be able to help with the concrete implementation as it falls out of the scope of the standard support service.
As to the demo showing cascading editing, you can refer to those demos:
- http://docs.telerik.com/kendo-ui/web/grid/how-to/grid-cascading-dropdown-editors
- https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/grid-editing-cascading-dropdownlist
Regards,
Georgi Krustev
Telerik