Cascading drop down boxes

[fev]

Hi,

I am using Grid control on AspNet Core >=3.1   platform.

Do you have  an example using aspnet core grid control where we have cascading dropdown boxes?.

I am using the dialog template. I want to have examples both with  the default dialog form and   with a custom dialog form.

 In the cascading drop-downs   I use Id and Names of two linked entities.  

I have developed myself the default template option. When sending the data to the server, however, I seem to be sending the Text values of the  dropdown boxes rather than the Ids. That looks strange. 

Thank you..

[Praveenkumar Gajendiran]

Hi Fev,

Thanks for contacting Syncfusion support.

Based on your request, we have prepared a Grid dialog editing with cascading dropdown sample.

In the below sample, we have sent the city id to the server side and display the city name in the Grid by using foreignkey feature of Grid. Please refer the below code example and sample for more information,

Code Example 

 

<ejs-grid id="Grid" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true" > 

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" newRowPosition="Top" mode="Dialog"></e-grid-editSettings> 

    <e-data-manager url="/api/Order" adaptor="WebApiAdaptor" crossdomain="true"></e-data-manager> 

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" validationRules="@(new { required=true, number=true})" width="140"></e-grid-column> 

        <e-grid-column field="CustomerID" headerText="Customer Name" validationRules="@(new { required=true})" width="150"></e-grid-column> 

        <e-grid-column field="Freight" headerText="Freight" validationRules="@(new { required=true})" textAlign="Right" editType="numericedit" format="C2" width="140"></e-grid-column> 

        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150" editType='dropdownedit' edit="@(new {create="countryCreate", read="countryRead", destroy="countryDestroy", write="countryWrite"  })"></e-grid-column> 

        <e-grid-column field="CityID" headerText="Ship city" width="150" foreignKeyValue="CityName" dataSource="ViewBag.ddData" editType='dropdownedit' edit="@(new {create="cityCreate", read="cityRead", destroy="cityDestroy", write="cityWrite"  })"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

<script> 

    var countryElem; 

    var countryObj; 

 

    var cityElem; 

    var cityObj; 

 

    var country = [ 

        { countryName: 'United citys', countryId: '1' }, 

        { countryName: 'Australia', countryId: '2' } 

    ]; 

    var city = [ 

        { cityName: 'New York', countryId: '1', cityId: '101' }, 

        { cityName: 'Virginia', countryId: '1', cityId: '102' }, 

        { cityName: 'Washington', countryId: '1', cityId: '103' }, 

        { cityName: 'Queensland', countryId: '2', cityId: '104' }, 

        { cityName: 'Tasmania', countryId: '2', cityId: '105' }, 

        { cityName: 'Victoria', countryId: '2', cityId: '106' } 

    ]; 

 

    function countryCreate() { 

        countryElem = document.createElement('input'); 

        return countryElem; 

    } 

    function countryRead() { 

        return countryObj.text; 

    } 

    function countryDestroy() { 

        countryObj.destroy(); 

    } 

    function countryWrite() { 

        countryObj = new ej.dropdowns.DropDownList({ 

            dataSource: country, 

            fields: { value: 'countryId', text: 'countryName' }, 

            change: function () { 

                cityObj.enabled = true; 

                var tempQuery = new ej.data.Query().where('countryId', 'equal', countryObj.value); 

                cityObj.query = tempQuery; 

                cityObj.text = null; 

                cityObj.dataBind(); 

            }, 

            placeholder: 'Select a country', 

            floatLabelType: 'Never' 

        }); 

        countryObj.appendTo(countryElem); 

    } 

 

    function cityCreate() { 

        cityElem = document.createElement('input'); 

        return cityElem; 

    } 

    function cityRead() { 

        return cityObj.value;   // sent the cityId to the server 

    } 

    function cityDestroy() { 

        cityObj.destroy(); 

    } 

    function cityWrite() { 

        cityObj = new ej.dropdowns.DropDownList({ 

            dataSource: city, 

            fields: { value: 'cityId', text: 'cityName' }, 

            enabled: false, 

            placeholder: 'Select a city', 

            floatLabelType: 'Never' 

        }); 

        cityObj.appendTo(cityElem); 

    } 

</script> 

Sample: https://www.syncfusion.com/downloads/support/directtrac/304444/ze/EJ2GRI~1-1390445229.zip

Documentation Link: https://ej2.syncfusion.com/aspnetcore/documentation/grid/how-to/cascading-drop-down-list-with-grid-editing/

Please get back to us if you need further assistance.

Regards,
Praveenkumar G