Need to do cascade with dropdowns in child grid

[Javier A Aguilera]

Good afternoon,

I'm having trouble with doing cascade (filter the options of a dropdown with the selected item of another dropdown) in a child grid. In a ejs grid I followed your examples and doing it successfully with code like: edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})"

However I can't make it work in a child grid, can you help me please?

This is my child grid:

var CatalogoClientesDireccionesGrid = new ej.grids.Grid({

            dataSource: dataDirecciones,

            foreignKeyField: ["ClientID"],

            toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],

            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },

            load: function (args) {

                this.query = new ej.data.Query().where("ClientID", 'equal', e.data.ClientID)

            },

            columns: [

                { field: 'IDRelation', visible: false, isPrimaryKey: true, isIdentity: true },

                { field: 'AddressID', visible: false },

                { field: 'ClientID', visible: false, defaultValue: e.data.ClientID },

                { field: 'StreetAddress', headerText: 'Calle', visible: true, width: 180 },

                { field: 'IntNumber', headerText: 'Num Int', visible: true, width: 90 },

                { field: 'ExtNumber', headerText: 'Num Ext', visible: true, width: 92 },

                { field: 'PostalCode', headerText: 'CP', visible: true, width: 96 },

                { field: 'CountryID', headerText: 'País', foreignKeyField: "CountryID", foreignKeyValue: "CountryName", dataSource:@Html.Raw(Json.Serialize(ViewBag.Paises)), width: 130 },

                { field: 'StateID', headerText: 'Estado', foreignKeyField: "StateID", foreignKeyValue: "StateName", dataSource:@Html.Raw(Json.Serialize(ViewBag.Estados)), width: 180 },

                { field: 'Address2', headerText: 'Vecindario', visible: true, width: 150 },

                { field: 'City', headerText: 'Ciudad', visible: true, width: 150 }

            ]

        });

[Manivel Sellamuthu]

Hi Javier, 

Greetings from Syncfusion support. 

Based on your query we suspect that you need an cascading dropdown in the child grid using the JavaScript way. We have already discussed about the mentioned query in our documentation.  

So, please refer the below code example and documentation for more information. 

var grid = new ej.grids.Grid({ 

    dataSource: cascadeData, 

    toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'], 

    editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' }, 

    columns: [ 

        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100, isPrimaryKey: true, validationRules: { required: true } }, 

        { field: 'CustomerID', headerText: 'Customer ID', width: 120, validationRules: { required: true, minLength: 3 } }, 

        { 

            field: 'ShipCountry', headerText: 'Ship Country', width: 120, 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({ 

                        dataSource: country, 

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

                        change: function(){ 

                            stateObj.enabled = true; 

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

                            stateObj.query = tempQuery; 

                            stateObj.text = null; 

                            stateObj.dataBind(); 

                        }, 

                        placeholder: 'Select a country', 

                        floatLabelType: 'Never' 

                    }); 

                    countryObj.appendTo(countryElem); 

                } 

            } 

        }, 

        { 

            field: 'ShipState', headerText: 'Ship State', width: 150, 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({ 

                        dataSource: state, 

                        fields: { value: 'stateId', text: 'stateName' }, 

                        enabled: false, 

                        placeholder: 'Select a state', 

                        floatLabelType: 'Never' 

                    }); 

                    stateObj.appendTo(stateElem); 

                } 

            } 

        } 

    ], 

    height: 273 

}); 

Documentation: https://ej2.syncfusion.com/javascript/documentation/grid/how-to/cascading-drop-down-list-with-grid-editing/#cascading-dropdownlist-with-grid-editing 

Please let us know if you need any further assistance. 

Regards, 

Manivel 

[Javier A Aguilera]

Worked perfectly, thx!

[Manivel Sellamuthu]

Hi Javier, 

We are happy to hear that the provided solution worked. 

Please let us know, if you need further assistance. 

Regards, 

Manivel