1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Grid Inline Edit - Cascading Dropdown-Razor

Grid Inline Edit - Cascading Dropdown-Razor

Hi Team,


I'm trying to use the ASP.NET Core Grid(via Razor) in inline edit mode. I want to achieve the cascading dropdown during edit. I tried to search in your Documentation for cascading and found the below link which doesnt work.

Can you please help me to achieve this?

Regards,
Lakxman

1 Reply
PS Pavithra Subramaniyam Syncfusion Team April 26, 2018 04:42 PM UTC

  
Hi Lakxman, 
 
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] 
<ejs-grid id="Grid" dataSource="ViewBag.dataSource"  created="created" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true" height="300"> 
   <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings> 
     <e-grid-columns> 
        .   .    . 
        <e-grid-column field="ShipCountry" headerText="ShipCountry " width="110"> 
                        </e-grid-column> 
        <e-grid-column field="ShipCity" width="110"> 
 
        </e-grid-column> 
    </e-grid-columns> 
</ejs-grid> 
 
<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