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

Cascading cell choices

7 Answers 70 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jay
Top achievements
Rank 1
Jay asked on 26 Jan 2017, 04:11 PM

I have a RadGrid in Batch Edit mode with three drop down columns (I have tried this with both GridDropDownColumn and GridTemplateColumn containing a DropDownList control).  The problem is that I need to populate each subsequent column based on what is selected in the previous one.

For example, if the first column has options A, B and C, and the user picks A, the second column is populated with D and E.  If the user picks B, the second column is populated with F, G and H.  And if the user picks A is the first column, and E in the second column, the third column is populated with I, J, K and L.

The datasource for the RadGrid is a List<class> structure where each row is an instance of the class.  The class contains the selected value and options for the first dropdownlist.  When the value of the first column is set in the class, the class setter for it updates the option values used in the second column and if the current second column value is no longer an option, sets it to the first entry in the second column options.  Once the second column is set, the same thing happens for the third column's value and options.  Therefore, each row could have different values for the second and third dropdownlists based on what is selected in the first dropdownlist of each row.

Can I do this in Batch Edit mode or do I have to do something like InPlace mode instead?  I prefer the user experience in Batch Edit mode, but JavaScript is not my strong point.  Using the pre-render event (either RadGrid's when I use GridDropDownColumns or the DropDownList control's when I use a template column), I can easily populate the first column with the right options, but I am having trouble populating and setting values in the subsequent columns.

7 Answers, 1 is accepted

Sort by
0
Jay
Top achievements
Rank 1
answered on 26 Jan 2017, 04:22 PM
The other option I thought about was replacing all three dropdown list columns with one GridTemplateColumn containing a Tree control with all of the possible options, but I do not think this would look as good.  I could also have just one dropdown list with all of the possible combinations, separated with something like " | ", but again, not attractive.
0
Jay
Top achievements
Rank 1
answered on 26 Jan 2017, 10:13 PM
Maybe what should happen is some sort of client-side filter, so that when the first column changes, certain values become available in the second column and some do not.  Likewise for the third column.
0
Viktor Tachev
Telerik team
answered on 31 Jan 2017, 01:31 PM
Hello Jay,

Note that using cascading dropdown controls with Batch Editing is not entirely supported. However, you can use custom code to achieve the functionality. Please examine the following code library that shows the approach.



Regards,
Viktor Tachev
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Jay
Top achievements
Rank 1
answered on 31 Jan 2017, 09:25 PM

Hi Viktor,

This methodology only works when every entry is unique.  What if you had a fourth dropdown (e.g. Language) where some of  the options are:

North America | Canada | London | French

Europe | England | London | English

When ItemsRequested is called for the fourth column, it will crash because there are 2 Londons and the code does not know which way to go.

0
Jay
Top achievements
Rank 1
answered on 01 Feb 2017, 05:47 PM
There is still a flaw, but mine is crashing because I am using the Linq command Single() instead of Where()[0] (which is the equivalent of First()) used in the test case.  But if you need the second item returned, the code is still faulty.
0
Viktor Tachev
Telerik team
answered on 03 Feb 2017, 12:59 PM
Hi Jay,

The options in a dropdown control should be unique by design. The idea behind a dropdown is to give the users unique options from which they can make a selection. Having multiple items with the same text is not expected and will be confusing to the user.

With that said, generally a cascading dropdown control would depend on the selected value in the previous dropdown. Thus, even if there are duplicate values in one dropdown control, the cascading behavior should work.


Regards,
Viktor Tachev
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Jay
Top achievements
Rank 1
answered on 03 Feb 2017, 03:02 PM
In the example I posted above, London is unique for the path North America | Canada, but London is also unique for Europe | England.  The back trail is unique, but the individual element is not.  Is it possible to compare the entire back trail, instead of just the last element?
Tags
Grid
Asked by
Jay
Top achievements
Rank 1
Answers by
Jay
Top achievements
Rank 1
Viktor Tachev
Telerik team
Share this question
or