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

Cascading From DropDownListFor to a MultiSelectFor

1 Answer 238 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
Hilton
Top achievements
Rank 1
Hilton asked on 04 Feb 2019, 03:19 PM

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.

1 Answer, 1 is accepted

Sort by
0
Hilton
Top achievements
Rank 1
answered on 04 Feb 2019, 06:13 PM

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);
        }
}

Tags
MultiSelect
Asked by
Hilton
Top achievements
Rank 1
Answers by
Hilton
Top achievements
Rank 1
Share this question
or