1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Child grid with dropdownlist filtered with the father grid

Child grid with dropdownlist filtered with the father grid

Good night gentlemen! 

I'm having a hard time trying to create a child grid with a dropdownlist in a column, I know how to create one of those thanks to you guys in a previous post (I'm still thanksful!), but now I need that dropdown data is filtered by the row of the father grid

For example, if my data for the child grid's dropdownlist  come from a Datasource that has these:
     IDFruit          Fruit
     1                    Manzana
     1                    Durazno
     1                    Sandia
     2                    Melon
     2                    Uvas    
     1                    Platano

and my father grid has the column IDFruit with value of "1", I need that my child grid's dropdown list display just these options:
     1                    Manzana
     1                    Durazno
     1                    Sandia
     1                    Platano


Can you help me out please?

Thanks in advance! 



-----------------------------------------------------------------------
The code you share that other time (worked perfectly):

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




3 Replies 1 reply marked as answer
BS Balaji Sekar Syncfusion Team August 7, 2020 11:23 AM UTC

Hi Javier, 
 
Greetings from the Syncfusion support. 
 
We analyzed your query with the information given. To achieve this, only the existing items in the dropdown list are displayed in the childGrid column. In the example below, we have bound the generated query (which generates based on queryString) to dropdownlist editing the cellEditTemplate feature in write function. For more information please refer to the  code example below. 
 
[Index.cshtml] 
 
var grid = new ej.grids.Grid({ 
    dataSource: cascadeData, 
    queryString: 'EmployeeID', 
    allowPaging: true, 
    toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'], 
    editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' }, 
    columns: [ 
      { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 }, 
      { field: 'ShipCity', headerText: 'Ship City', width: 120 }, 
      { field: 'Freight', headerText: 'Freight', width: 120 }, 
      { 
        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 (args) { 
            countryObj = new ej.dropdowns.DropDownList({ 
              dataSource: cascadeData, 
              fields: { value: 'EmployeeID', text: 'ShipCountry' }, 
              query: new ej.data.Query().where("EmployeeID", "equal", args.rowData["EmployeeID"]), // Generate query with row EmployeeID value  of parent grid basis 
              placeholder: 'Select a country', 
              floatLabelType: 'Never' 
            }); 
            countryObj.appendTo(countryElem); 
          } 
        } 
      }, 
    ], 
  }) 
 
Please get back to us, if you need further assistance. 
 
Regards, 
Balaji Sekar 


Marked as answer
JA Javier A Aguilera August 25, 2020 06:34 PM UTC

Thanks for the fast answer!

BS Balaji Sekar Syncfusion Team August 26, 2020 04:29 AM UTC

Hi Javier, 
  
Thanks for the update. 

Please get back to us if you require further other assistance. 
  
Regards, 
Balaji Sekar. 



Loader.
Up arrow icon