dropdown in batch mode giving Cannot read property 'container' of undefined

[bhojaraj gc]

when I am trying do an axios call to get the data for the drop down values, DropDown rendering is failing. 

below is my column edit code.

colmnObj.edit = {

            create:()=>{

              this.lookUpElement = document.createElement('input');

              return this.lookUpElement;

            },

            destroy : () => {

              this.lookUpObject.destroy();

            },

            read:()=>{

              return this.lookUpObject.text;

            },

            write :async  (args)=>{

              

              let params = {

                versionNo : versionNo,

                entityViewUuId : entityViewUuId,

                columnUuId : column.columnUuid,

                columnLookupUuid : column.columnLookupUuid,

                businessDate : businessDate

              }

              let dependentLookupvalues=new Map();

              let lookUpdepdtValues=column.linkedColumnAliasForLookup;

              lookUpdepdtValues.map(key=>{

                dependentLookupvalues.set(key,column.columnAlias);

              });

              let columnLookupDependentValues={};

              columnLookupDependentValues.dependentLookupvalues=dependentLookupvalues;

              let response = await EntityDataService.getLookUpValues(params,columnLookupDependentValues);

              let dropDownValues=[];

              response.data.model.columnValues.forEach((col) => {

                let dpObj = {};

                dpObj[column.columnName + "_id"] = col;

                dpObj[column.columnName + "_name"] = col;

                dropDownValues.push(dpObj);

              });

                this.lookUpObject = new DropDownList({

                allowFiltering: true,

                dataSource: new DataManager(dropDownValues),

                fields: {

                  text: column.columnName + "_name",

                  value: column.columnName + "_name",

                },

                placeholder : 'Select a '+ column.columnName,

              });

              this.lookUpObject.appendTo(this.lookUpElement);

            }

          }

attached the error screenshot

Exact exception it is throwing here is,

Uncaught TypeError: Cannot read property 'container' of undefined at t.unWireEvent (drop-down-list.js:988) 

 

Attachment: error_6cf4955a.zip

[Vignesh Sivagnanam]

Hi Bhojaraj, 

Sorry for the late reply.

Based on the provided query, we could understand that your requirement is to render the dropdown(with async data) component for the columns of Grid while editing the row. We suggest you to fetch the asynchronous data in the componentDidMount() and then bound the fetched asynchronous data to the dropdown’s datasource as demonstrated in the below code snippet, 

var dropDownValues; 

export class NormalEdit extends SampleBase { 

  constructor() { 

    super(...arguments); 

    

  } 

async componentDidMount() { 

     let response = await fetch( 

      `https://ej2services.syncfusion.com/production/web-services/api/Employees` 

    ).then(res => res.json()); 

  dropDownValues=[]; 

    response.forEach((col) => { 

      let dpObj = {}; 

      dpObj["Emp_id"] = col.EmployeeID; 

      dpObj["Emp_name"] = col.FirstName; 

      dropDownValues.push(dpObj); 

    }); 

  } 

 

  dpParams = { 

    create: () => { 

      this.elem = document.createElement("input"); 

      return this.elem; 

    }, 

    read: () => { 

      return this.dropDownListObj.value; 

    }, 

    destroy: () => { 

      this.dropDownListObj.destroy(); 

    }, 

    write :()=>{ 

    

      this.dropDownListObj = new DropDownList({ 

        dataSource:dropDownValues, 

        fields: { text: "Emp_name", value: "Emp_name"}, 

      }); 

      this.dropDownListObj.appendTo(this.elem); 

    } 

  }; 

  render() { 

    return ( 

      <div> 

        <GridComponent 

          dataSource={orderDataSource.slice(0, 5)} 

          editSettings={this.editOptions} 

          toolbar={this.toolbarOptions} 

        > 

          <ColumnsDirective> 

         . . . 

            <ColumnDirective 

              field="ShipCountry" 

              headerText="Ship Country" 

              width="150" 

              

              edit={this.dpParams} 

              textAlign="Right" 

            /> 

          </ColumnsDirective> 

          <Inject services={[Edit, Toolbar]} /> 

        </GridComponent> 

      </div> 

    ); 

  } 

} 

render(<NormalEdit />, document.getElementById("sample")); 

Please find the below sample for your reference. 

Sample : https://stackblitz.com/edit/react-152731-kdymtc?file=index.js

Please get back to us if you need further assistance. 

Regards, 

Vignesh Sivagnanam