Cascading dropdown on foreign key field

Question

Hi,I have two columns on my grid: Surname and Category. They are foreign key fields and when adding a new row to the grid, I'd like the Category dropdown field to be updated/filtered based on the Surname selected. I'm getting an "Uncaught TypeError: Cannot set property 'query' of undefined" when changing the surname option. How do I accomplish that?Attachment: SPS_8ff2fe3f.zip

Balaji Sekar · Accepted Answer

Hi Christian, Greetings from the Syncfusion support. Based on your query we suspect that you want update District column value based on Country column value changes and you have tried to update District column value using updateCell method in change event of Country column’s editing(Dropdownlist editing).but in your code snippet, you have used the inline editing it is cause of the problem. We can overcome the mentioned problem using Batch editing with updateCell method. Please refer the below code example and sample for more information for more information. [App.Vue]

editSettings: { allowEditing: true, showConfirmDialog: false, allowAdding: true, allowDeleting: false, mode: "Batch", }, surnamesParams: { create: function () { surnameElem = document.createElement("input"); return surnameElem; }, read: function () { return surnameObj.value; }, destroy: function () { surnameObj.destroy(); }, write: function (args) { surnameObj = new DropDownList({ dataSource: surnames, fields: { value: "id", text: "name" }, change: function (e) { const tempQuery = new Query().where( "id", "equal", surnameObj.value ); this.parent.updateCell( this.parent.getRowInfo(e.element).rowIndex, "category", null ); categoryObj.query = tempQuery; categoryObj.value = null; categoryObj.dataBind(); }.bind(this), floatLabelType: "Never", }); surnameObj.value = args.rowData.surnameID; surnameObj.appendTo(surnameElem); }, }, Sample link: https://codesandbox.io/s/156225-vue-recordclick-forked-p9ded Please get back to us, if you need further assistance. Regards, Balaji Sekar

Balaji Sekar · Answer

Hi Christian, 

Greetings from the Synfusion support. 

Based on your query we suspect that you have bound cascading dropdown editing in the ForeignKey columns using edit.params feature.  We are able to reproduce the reported problem while select a dropdown item of “Surname” column. 

In your attachment we found that dropdownlist instance store variables(surnameObj, categoryObj) is not initialized with DropdownList model which is cause of the problem. 

We suggest you to define the imported Dropdownlist module to that instance store variable and it will assign the Dropdownlist component required properties to overcome that reported problem use this solution. 

Please refer the below code example and sample for more information. 





[App.Vue] 
let surnameElem; 
let surnameObj= new DropDownList() 
let categoryElem 
let categoryObj = new DropDownList(); 

surnamesParams: { 
        create: function () { 
          surnameElem = document.createElement('input') 
          return surnameElem 
        }, 
        read: function () { 
          return surnameObj.value 
        }, 
        destroy: function () { 
          surnameObj.destroy() 
        }, 
        write: function () { 
          debugger; 
          surnameObj = new DropDownList({ 
            dataSource: surnames, 
            fields: { value: 'id', text: 'name' }, 
            change: function () {               
              const tempQuery = new Query().where('id', 'equal', surnameObj.value) 
              categoryObj.query = tempQuery 
              categoryObj.value = null 
              categoryObj.dataBind() 
            }, 
            placeholder: 'Select a Surname', 
            floatLabelType: 'Never' 
          }) 
          surnameObj.appendTo(surnameElem) 
        } 
      }, 
 
      categoriesParams: { 
        create: function () { 
          categoryElem = document.createElement('input') 
          return categoryElem 
        }, 
        read: function () { 
          return categoryObj.value 
        }, 
        destroy: function () { 
          categoryObj.destroy() 
        }, 
        write: function () { 
          debugger; 
          categoryObj = new DropDownList({ 
            dataSource: categories, 
              
            fields: { value: 'id', text: 'name' }, 
            placeholder: 'Select a Category', 
            floatLabelType: 'Never' 
          }) 
          categoryObj.appendTo(categoryElem) 
        } 
      }, 
        
    }; 


Sample link: https://codesandbox.io/s/156225-vue-recordclick-forked-xgoqk  

Please get back to us, if you need further assistance. 

Regards, 
Balaji Sekar

Christian DAquino · Answer

Hi,Using your sample below I don't get the error anymore but the query doesn't get applied to the categoryObj either?

Balaji Sekar · Answer

Hi Christian, 
 
Based on your query we suspect that second dropdown of cascading dropdown is not properly bind the generated query(categoryObj.query).so you can see the whole data in the Category column edit mode.  
 
We have store the generate query to local variable(query) in the read function from the Category column’s edit.params and it is assign to categoryObj after set the dropdownlist instance. 
 
Now we can perform the cascading functionality using the following solution and sample for more information. 
 




[App.Vue] 
surnamesParams: { 
        create: function () { 
          surnameElem = document.createElement("input"); 
          return surnameElem; 
        }, 
        read: function () { 
          return surnameObj.value; 
        }, 
        destroy: function () { 
          surnameObj.destroy(); 
        }, 
        write: function (args) { 
          debugger; 
          surnameObj = new DropDownList({ 
            dataSource: surnames, 
            fields: { value: "id", text: "name" }, 
            change: function () { 
              const tempQuery = new Query().where( 
                "id", 
                "equal", 
                surnameObj.value 
              ); 
              categoryObj.query = tempQuery; 
              categoryObj.value = null; 
              categoryObj.dataBind(); 
            }, 
 
            floatLabelType: "Never", 
          }); 
          surnameObj.value = args.rowData.surnameID; 
          surnameObj.appendTo(surnameElem); 
        }, 
      }, 
 
  
 
 categoriesParams: { 
        create: function () { 
          categoryElem = document.createElement("input"); 
          return categoryElem; 
        }, 
        read: function () { 
          return categoryObj.value; 
        }, 
        destroy: function () { 
          categoryObj.destroy(); 
        }, 
        write: function () { 
          var query = categoryObj.query; 
          categoryObj = new DropDownList({ 
            dataSource: categories, 
            fields: { value: "id", text: "name" }, 
            placeholder: "Select a Category", 
            floatLabelType: "Never", 
          }); 
          if (query) { 
            categoryObj.query = query; 
          } 
          categoryObj.appendTo(categoryElem); 
        }, 
      }, 
 
Sample link: https://codesandbox.io/s/156225-vue-recordclick-forked-9fi6h   
 
Please get back to us, if you need further assistance. 
 
Regards, 
Balaji Sekar

Christian DAquino · Answer

Hi,Why isn't the category field being refreshed after the change on the surnameObj ? I was expecting that after modifying the surnameObj the categoryObj would be refreshed to null.change: function () {               const tempQuery = new Query().where(                 "id",                 "equal",                 surnameObj.value               );               categoryObj.query = tempQuery;               categoryObj.value = null;               categoryObj.dataBind();             },I'm trying to replicate this example: https://ej2.syncfusion.com/vue/documentation/grid/how-to/cascading-drop-down-list-with-grid-editing/. But that doesn't work even if I remove the foreign key binding.

Balaji Sekar · Answer

Hi Christian, 
 
Before proceeding your requirement, we need to confirm that you want to show the Category column value is “Null” while edited the first cascading dropdownlist(Surname column) or if we misunderstood your requirement, please share the exact requirement to us that will help to validate further. 
 
Regards, 
Balaji Sekar

Christian DAquino · Answer

Yes, you are correct. I want to "want to show the Category column value is “Null” while edited the first cascading dropdownlist(Surname column)"

Balaji Sekar · Answer

Hi Christian, Thanks for your update. Based on your query we have updated “Null” value to the category column value when we edited the surnameID column and also we prevent the edit action in the catergory column value using cellEdit event. It will allow the edit action for category column’s cell after edited the corresponding row of surnameID’s cell. Please refer the below code example and sample for more information. [App.Vue]

. . . .

surnamesParams: { create: function () { surnameElem = document.createElement("input"); return surnameElem; }, read: function () { return surnameObj.value; }, destroy: function () { surnameObj.destroy(); }, write: function (args) { surnameObj = new DropDownList({ dataSource: surnames, fields: { value: "id", text: "name" }, change: function (e) { const tempQuery = new Query().where( "id", "equal", surnameObj.value ); this.parent.updateCell( this.parent.getRowInfo(e.element).rowIndex, "category", null ); // Update the null value to category cell categoryObj.query = tempQuery; categoryObj.value = null; categoryObj.dataBind(); }.bind(this), floatLabelType: "Never", }); surnameObj.value = args.rowData.surnameID; surnameObj.appendTo(surnameElem); }, }, . . . . methods: { cellEdit: function (e) { if (e.columnName === "category" &&!e.cell.previousElementSibling.classList.contains("e-updatedtd")) { e.cancel = true; // Prevent the edit action in category column } }, }, Sample link: https://codesandbox.io/s/156225-vue-recordclick-forked-4f4ti Please get back to us, if you need further assistance. Regards, Balaji Sekar

Shivani · Answer

Hello, I am following this example for dropdown selection.

Here, I want to select country, based on country show district and based on district show area dropdown lists.
But I am getting error - 'Cannot read property 'updateCell' of undefined'

IF possible please send me an example. whatever examples you shared in this post, I can not see any of them.
Here is my code,

countryParams: {
        create: () => {
          countryElem = document.createElement("input");
          return countryElem;
        },
        read: () => {
          if (countryObj != null || countryObj != undefined) {
            return countryObj.value;
          }
        },
        destroy: () => {
          if (countryObj != null || countryObj != undefined) {
            countryObj.destroy();
          }
        },
        write: (args) => {
          countryObj = new DropDownList({
            dataSource: this.countriesList,
            fields: {
              value: "CountryCode",
              text: "CountryName"
            },
            change: function (e) {
              debugger;
              districtObj.enabled = true;
              const tempQuery = new Query().where('CountryCode', 'equal', countryObj.value);
              this.parent.updateCell(this.parent.getRowInfo(e.element).rowIndex,"country", null); 
              districtObj.query = tempQuery 
              districtObj.value = null; 
              districtObj.dataBind();
            }.bind(this),
            //value: args.rowData[args.column.field], // need to set value peroperty to show the row data in the dropdown
            placeholder: "Select a Country"
          });
          countryObj.value = args.rowData[args.column.field]; 
          countryObj.appendTo(countryElem);
        }
      },
      districtParams: {
        create: () => {
          districtElem = document.createElement("input");
          return districtElem;
        },
        read: () => {
          if (districtObj != null || districtObj != undefined) {
            return districtObj.value;
          }
        },
        destroy: () => {
          if (districtObj != null || districtObj != undefined) {
            districtObj.destroy();
          }
        },
        write: () => {
          debugger;
          var query = districtObj.query;
          districtObj = new DropDownList({
            dataSource: this.districtList,
            fields: {
              value: "DistrictCode",
              text: "DistrictCode"
            },
            enabled: false,
            //value: args.rowData[args.column.field], // need to set value peroperty to show the row data in the dropdown
            placeholder: "Select a District"
          });
          if (query) { 
             districtObj.query = query; 
          } 
          districtObj.appendTo(districtElem);
        }
      },