Cascading From DropDownListFor to a MultiSelectFor

2 posts, 0 answers
  1. Hilton
    Hilton avatar
    11 posts
    Member since:
    Aug 2012

    Posted 04 Feb 2019 Link to this post

    I have found many examples of cascading from DropDownListFor to DropDownListFor using the CascadeFrom() event. However, I need to get a similar effect from using a DropDownListFor to a MultiSelectFor. Since the MultiSelectFor does not have the CascadeFrom() event,  how would I go about making it work? 

    Example
    - The user selects an item from the DropDownListFor.
    - The MultiSelectFor DataSource will be updated based on the selected item of the DropDownListFor.
    - The MultiSelectFor will be enabled/disabled based on DropDownListFor.

    Found the following JS sample but it does not seem to really apply to asp.net core.
    https://docs.telerik.com/kendo-ui/controls/editors/multiselect/how-to/cascade/cascade-from-ddl


    Any help will be greatly appreciated.

  2. Hilton
    Hilton avatar
    11 posts
    Member since:
    Aug 2012

    Posted 04 Feb 2019 in reply to Hilton Link to this post

    I figured it out but if you guys come up with a better solution please share.

    In the DropDownListFor, define the Cascade event

    @(Html.Kendo().DropDownListFor(x => x.AppList[i].SelectedRestrictionId)
                 .DataTextField("RestrictionDescr")
                 .DataValueField("RestrictionId")
                 .OptionLabel("-- Select --")
                 .DataSource(source =>
                 {
                      source.Read(read =>
                      {
                           read.Action("GetAppRestrictions", "User");
                      })
                     .ServerFiltering(true);
                 })
                 .Enable(false)
                 .AutoBind(false)
                 .HtmlAttributes(new { id = "appRestrictionList", style = "width: 100%;" })
                 .Events(e =>
                 {
                      e.Cascade("RestrictionChange");
                 })
    )

     

    In the MultiSelectFor, define the DataSource

    @(Html.Kendo().MultiSelectFor(x => x.AppList[i].SelectedRestrictions)
          .DataTextField("ResValDescr")
          .DataValueField("ResValId")
          .Placeholder("Select Values...")
          .HtmlAttributes(new { id = "RestrictionValueList" })
          .DataSource(source =>
          {
                source.Read(read =>
                {
                       read.Action("GetRestrictionValueList", "User");
                })
                .ServerFiltering(true); ;
          })
          .Enable(false)
          .AutoBind(true)
    )

    In the script, call the DataSource and enable/disable the MultiSelectFor

    function RestrictionChange(e) {
     
            var dataItem = this.dataItem(e.item);
            var multiselect = $("#RestrictionValueList").data("kendoMultiSelect");
            
            // If has a RestrictionId, call the DataSource on the server
            if (dataItem.RestrictionId) {
                multiselect.dataSource.read({ ResId: dataItem.RestrictionId });
                multiselect.enable(true);
            }
            else {
                multiselect.value([]);
                multiselect.enable(false);
            }
    }

Back to Top