Cascading cell choices

8 posts, 0 answers
  1. Jay
    Jay avatar
    10 posts
    Member since:
    Apr 2015

    Posted 26 Jan 2017 Link to this post

    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.

  2. Jay
    Jay avatar
    10 posts
    Member since:
    Apr 2015

    Posted 26 Jan 2017 Link to this post

    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.
  3. Jay
    Jay avatar
    10 posts
    Member since:
    Apr 2015

    Posted 26 Jan 2017 Link to this post

    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.
  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2377 posts

    Posted 31 Jan 2017 Link to this post

    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.
  5. Jay
    Jay avatar
    10 posts
    Member since:
    Apr 2015

    Posted 31 Jan 2017 in reply to Viktor Tachev Link to this post

    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.

  6. Jay
    Jay avatar
    10 posts
    Member since:
    Apr 2015

    Posted 01 Feb 2017 in reply to Jay Link to this post

    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.
  7. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2377 posts

    Posted 03 Feb 2017 Link to this post

    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.
  8. Jay
    Jay avatar
    10 posts
    Member since:
    Apr 2015

    Posted 03 Feb 2017 in reply to Viktor Tachev Link to this post

    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?
Back to Top