1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Cascades the data sources with multiple DropDownList.

Cascades the data sources with multiple DropDownList.

Hi
It's possibile to have a sample in asp.net core mvc to show how to binding to two DropDownList (server mode and client mode if it possible)
Thank you for your support

Franco. 

5 Replies
PO Prince Oliver Syncfusion Team January 13, 2017 10:29 AM UTC

Hi Franco, 

Thanks for contacting Syncfusion support. 

In order to Cascade two dropdownlist, refer to the following code snippet. 

<div class="col-xs-8 col-sm-4"> 
            <span class="txt">Select Group</span> 
            <ej-drop-down-list id="groupsList" datasource="(IEnumerable<groups>)ViewBag.datasource" cascade-to="countryList" change="onChange" watermark-text="Select"> 
                <e-drop-down-list-fields value="parentId" text="text" /> 
            </ej-drop-down-list> 
        </div> 
        <div class="col-xs-8 col-sm-4"> 
            <span class="txt">Select Country</span> 
            <ej-drop-down-list id="countryList" datasource="(IEnumerable<Countries>)ViewBag.datasource1" enabled="false"></ej-drop-down-list> 
            
        </div> 

Refer to the following link for sample: 

Refer to the following UG link for more information on cascading in client side: 

Regards, 
Prince 


FP franco perduca replied to Prince Oliver January 24, 2017 12:06 PM UTC

Hi Franco, 

Thanks for contacting Syncfusion support. 

In order to Cascade two dropdownlist, refer to the following code snippet. 

<div class="col-xs-8 col-sm-4"> 
            <span class="txt">Select Group</span> 
            <ej-drop-down-list id="groupsList" datasource="(IEnumerable<groups>)ViewBag.datasource" cascade-to="countryList" change="onChange" watermark-text="Select"> 
                <e-drop-down-list-fields value="parentId" text="text" /> 
            </ej-drop-down-list> 
        </div> 
        <div class="col-xs-8 col-sm-4"> 
            <span class="txt">Select Country</span> 
            <ej-drop-down-list id="countryList" datasource="(IEnumerable<Countries>)ViewBag.datasource1" enabled="false"></ej-drop-down-list> 
            
        </div> 

Refer to the following link for sample: 

Refer to the following UG link for more information on cascading in client side: 

Regards, 
Prince 


Hi
this work also in a grid ?

VA Venkatesh Ayothi Raman Syncfusion Team January 25, 2017 12:09 PM UTC

Hi Franco, 

Yes, you can use cascading dropdown list in Grid and we have already discussed this and created a Knowledge base documentation for this. Please refer to the knowledge base documentation, 
Regards, 
Venkatesh Ayothiraman. 


BR Benjamín Rivero Cruz June 19, 2018 10:19 PM UTC

I am using EJS2 with ASP.NET MVC... how I do this?

PS Pavithra Subramaniyam Syncfusion Team June 20, 2018 07:19 AM UTC

Hi Franco, 
 
You can achieve the Cascading DropDownList with grid Editing by using the Cell Edit Template feature. We have prepared a simple sample based on your query in which Cascading DropDownList is rendered for the ShipCountry and ShipState column using edit property of Grid columns. Please refer to the below code example, Documentation link and sample link. 
 
[index.chtml] 
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 
    { 
        .  .  . 
        col.Field("ShipCountry").HeaderText("ShipCountry").Width("150").Add(); 
        col.Field("ShipCity").HeaderText("ShipCity").Width("150").Add(); 
 
    }).Height("400").Created("created").AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()  
 
<script> 
   .   .   . 
    function created(args) { 
        this.getColumns()[2].edit = { 
            create: function () { 
                countryElem = document.createElement('input'); 
                return countryElem; 
            }, 
            read: function () { 
                return countryObj.text; 
            }, 
            destroy: function () { 
                countryObj.destroy(); 
            }, 
            write: function () { 
                countryObj = new ej.dropdowns.DropDownList({ 
                     .   .   . 
                }); 
                countryObj.appendTo(countryElem); 
            } 
        }; 
        this.getColumns()[3].edit = { 
            create: function () { 
                stateElem = document.createElement('input'); 
                return stateElem; 
            }, 
            read: function () { 
                return stateObj.text; 
            }, 
            destroy: function () { 
                stateObj.destroy(); 
            }, 
            write: function () { 
                stateObj = new ej.dropdowns.DropDownList({ 
                     .   .   . 
               }); 
                stateObj.appendTo(stateElem); 
            } 
        } 
    } 
         
</script> 



Regards, 
Pavithra S.  



Loader.
Up arrow icon