1. Home
  2. Forum
  3. Angular - EJ 2
  4. Cascading dropdownedit in grid in beginEdit Mode

Cascading dropdownedit in grid in beginEdit Mode

We are using Cascading Dropdown. It's working properly, when in User starts editing a particular row. We want the ability to Edit any column based upon which the next column will get populated.


Normal flow is Division-->Department-->Category

In the above without selecting the division again, grid is not allowing to edit department and category. But we want to allow user to edit department or category.

If user is editing the Department based upon that value Category will get updated.


5 Replies
AG Ajith Govarthan Syncfusion Team September 7, 2021 04:55 PM UTC

Hi Ansuman Panda, 

Thanks for contacting Syncfusion support. 

Query: In the above without selecting the division again, grid is not allowing to edit department and category. But we want to allow user to edit department or category.If user is editing the Department based upon that value Category will get updated. 

Based on your query you want to use the cascading dropdown in your Grid application, and you also want to load the data in the last cascading dropdown based on either first or second column.  

So, we have prepared sample in that we have used the cascading dropdown with inline edit mode and in that we have loaded the data for shipState column’s dropdown based on either CustomerID or ShipCountry column’s dropdown data selection. For your convenience we have attached the sample, please refer them for your reference. 
 
Code Example: 
App.component.ts 
 
this.countryParams = { 
      create: () => { 
        this.countryElem = document.createElement('input'); 
        return this.countryElem; 
      }, 
      read: () => { 
        return this.countryObj.text; 
      }, 
      destroy: () => { 
        this.countryObj.destroy(); 
      }, 
      write: args => { 
        this.countryObj = new DropDownList({ 
          dataSource: this.country, 
          text: args.rowData[args.column.field], 
          fields: { value: 'countryId', text: 'countryName' }, 
          change: () => { 
            this.stateObj.enabled = true; 
            let tempQuery: Query = new Query().where( 
              'countryId', 
              'equal', 
              this.countryObj.value 
            ); 
            this.stateObj.query = tempQuery; 
            this.stateObj.text = null; 
            this.stateObj.dataBind(); 
          }, 
          placeholder: 'Select a country', 
          floatLabelType: 'Never' 
        }); 
        this.countryObj.appendTo(this.countryElem); 
      } 
    }; 
 
    this.customerParams = { 
      create: () => { 
        this.customerElem = document.createElement('input'); 
        return this.customerElem; 
      }, 
      read: () => { 
        return this.customerObj.text; 
      }, 
      destroy: () => { 
        this.customerObj.destroy(); 
      }, 
      write: args => { 
        this.customerObj = new DropDownList({ 
          dataSource: this.Customer, 
          text: args.rowData[args.column.field], 
          fields: { value: 'CustomerId', text: 'CustomerName' }, 
          change: () => { 
            this.stateObj.enabled = true; 
            let tempQuery: Query = new Query().where( 
              'CustomerId', 
              'equal', 
              this.customerObj.value 
            ); 
            this.stateObj.query = tempQuery; 
            this.stateObj.text = null; 
            this.stateObj.dataBind(); 
          }, 
          placeholder: 'Select a country', 
          floatLabelType: 'Never' 
        }); 
        this.customerObj.appendTo(this.customerElem); 
      } 
    }; 
 
    this.stateParams = { 
      create: () => { 
        this.stateElem = document.createElement('input'); 
        return this.stateElem; 
      }, 
      read: () => { 
        return this.stateObj.text; 
      }, 
      destroy: () => { 
        this.stateObj.destroy(); 
      }, 
      write: args => { 
        debugger; 
        this.stateObj = new DropDownList({ 
          dataSource: this.state, 
          text: args.rowData[args.column.field], 
          fields: { value: 'stateId', text: 'stateName' }, 
          enabled: false, 
          placeholder: 'Select a state', 
          floatLabelType: 'Never' 
        }); 
        this.stateObj.appendTo(this.stateElem); 
      } 
    }; 
  } 
 
 

Please get back to us if you need further assistance. 

Regards, 
Ajith G. 




AP Ansuman Panda September 8, 2021 04:56 AM UTC

In the current implementation the second dropdown(Ship State Dropdown) is not editable in when User is trying to edit.


We want it work normally when user is adding an item for the first time.

But when in edit mode it should allow User to edit ship state(second dropdown). 


If user changes Ship Country it should then make the Ship State blank. 


AG Ajith Govarthan Syncfusion Team September 9, 2021 05:08 PM UTC

Hi Ansuman Panda, 

Thanks for the update. 

Query: We want it work normally when user is adding an item for the first time.But when in edit mode it should allow User to edit ship state(second dropdown). 
 
Based on your query you want to edit the Shipstate column on edit mode. So, before we proceed to your query, please share the below details to validate further on your requirement. 

  1. While editing the records do you want to load the data in the Shipstate’s dropdown based on the current selected value in the CustomerID column.

  1. If user changes the values in the ShipCountry do you want to load the data based on the selected values in the ShipCountry?
 
  1. Share the video demonstration of your requirement.
 
  1. Do you want to use the cascading behavior only when adding the records?
 
  1. Share the Syncfusion package version.
 
Regards, 
Ajith G. 


AP Ansuman Panda September 13, 2021 06:12 AM UTC

  1. While editing the records do you want to load the data in the Shipstate’s dropdown based on the current selected value in the CustomerID column.
    Ans:-Yes
  2. If user changes the values in the ShipCountry do you want to load the data based on the selected values in the ShipCountry?
    Ans:-Yes
  3. Do you want to use the cascading behavior only when adding the records?
    Ans: It should be a cascading dropdown while adding , but in edit mode all the dropdown should be clickable, and user should be able to change values based on previous selection.
  4. Example:-
    User is editing and he has selected ShipCountry as Australia and shipState as Victoria previously.
    So now without changing the value in shipCountry dropdown the User should be able to select any new state from the ShipState Dropdwon "QueensLand", "Tasmania", "Victoria".

    If user changes the shipCountry to United States, based upon this the value should change in shipState DropDown.​
  5. Synfusion Package Version: 
    6. "@syncfusion/ej2-base": "~19.2.44",



PG Praveenkumar Gajendiran Syncfusion Team September 14, 2021 08:18 AM UTC

Hi Ansuman Panda,

Thanks for your update.

Based on your query, we would understand that while editing, you want to enable the ShipState’s field dropdown and select the values without changing the value in ShipCountry dropdown, and while adding, you want to enable and select the values in the ShipState’s field dropdown based on the changed value in ShipCountry dropdown.

For this we suggest you to use the below solution to achieve your requirement, please check the below sample and code example for your reference. 
[app.component.ts]

this.stateParams = { 
      create: () => { 
        this.stateElem = document.createElement('input'); 
        return this.stateElem; 
      }, 
      read: () => { 
        return this.stateObj.text; 
      }, 
      destroy: () => { 
        this.stateObj.destroy(); 
      }, 
      write: args => { 
        var bool; 
        if (args.requestType == 'add') { 
          bool = false; 
        } else { 
          bool = true; // enable the ShipState dropdown while editing. 
          var tQuery = new Query().where('countryId', 'equal', this.countryObj.value); //set the data for the ShipState dropdown based on the ShipCountry value 
        } 
        this.stateObj = new DropDownList({ 
          dataSource: this.state, 
          query: tQuery, 
          text: args.rowData[args.column.field], 
          fields: { value: 'stateId', text: 'stateName' }, 
          enabled: bool, 
          placeholder: 'Select a state', 
          floatLabelType: 'Never' 
        }); 
        this.stateObj.appendTo(this.stateElem); 
      } 
    }; 

Please get back to us if you need further assistance. 
Regards,
Praveenkumar G 


Loader.
Up arrow icon