1. Home
  2. Forum
  3. React - EJ 2
  4. How to add custom drop down to a cell in grid in case of Batch mode

How to add custom drop down to a cell in grid in case of Batch mode

How to add custom drop down to a cell in grid in case of Batch mode?

Can you guys help me with this?

6 Replies 1 reply marked as answer
SM Shalini Maragathavel Syncfusion Team February 10, 2021 11:07 AM UTC

Hi Venkatesh, 

Thanks for contacting Syncfusion support.

Based on the provided query, we could understand that your requirement is to render the dropdown component for the columns of Grid while editing the row. To achieve your requirement of rendering the custom component while editing a record, we suggest you to use cellEditTemplate feature of Grid.  

Please refer the below code example for your reference 
 
export class NormalEdit extends SampleBase { 
  constructor() { 
    
    this.editOptions = { 
      allowEditing: true, 
      allowAdding: true, 
      allowDeleting: true, 
      mode: "Batch" 
    }; 
  } 
 
  ddlData = DataUtil.distinct(cascadeData, "ShipState", true); 
  dpParams = { 
    create: () => { 
      this.elem = document.createElement("input"); 
      return this.elem; 
    }, 
    read: () => { 
      return this.dropDownListObj.value; 
    }, 
    destroy: () => { 
      this.dropDownListObj.destroy(); 
    }, 
    write: args => { 
       
     this.dropDownListObj = new DropDownList({ 
        dataSource: this.ddlData, 
        fields: { value: "ShipState", text: "ShipState" }, 
        value: args.rowData[args.column.field] 
      }); 
      this.dropDownListObj.appendTo(this.elem); 
    } 
  }; 
  render() { 
    return ( 
      <div> 
        <GridComponent 
          dataSource={orderDataSource.slice(0, 5)} 
          
        > 
          <ColumnsDirective> 
          
            <ColumnDirective 
              field="ShipCountry" 
              headerText="Ship Country" 
              width="150" 
              editType="dropdownedit" 
              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. 


Regards, 
Shalini M. 


Marked as answer
VB Venkatesh Babu S N February 10, 2021 11:28 AM UTC

Hi,

     Thanq for the solution.

But here If I am doing an api call to get the data for the drop down values, DropDown rendering is failing. 
sample write() method is here,

            write :async()=>{
              let params = {
                versionNo : versionNo,
                entityViewUuId : entityViewUuId,
                columnUuId : column.columnUuid,
                columnLookupUuid : column.columnLookupUuid,
                businessDate : businessDate
              }

              let response = await EntityDataService.getLookUpValues(params);
              let dropDownValues = [];
              response.data.model.columnValues.map((col) => {
                let dpObj = {};
                dpObj[column.columnName + "_id"] = col;
                dpObj[column.columnName + "_name"] = col;
                dropDownValues.push(dpObj);
              });
              this[column.columnName] = new DropDownList({
                actionComplete: () => false,
                allowFiltering: true,
                dataSource: new DataManager({dropDownValues}),
                fields: {
                  text: column.columnName + "_name",
                  value: column.columnName + "_name",
                },
                placeholder : 'Select a '+ column.columnName,
                query: new Query(),
              });
              this[column.columnName].appendTo(this[column.columnAlias]);
            }


Exact exception it is throwing here is,

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

I thought reason for this issue might be because I am doing an async call here. 



Can you guys please help me to solve this issue?

VB Venkatesh Babu S N February 16, 2021 05:20 AM UTC

Hi,

     I am still facing this issue. Can I know the status of  this ticket?



regards,
Venky

SM Shalini Maragathavel Syncfusion Team February 16, 2021 02:19 PM UTC

Hi Venkatesh,  
  
We have created a new incident under your Direct trac account to follow up with this query. We suggest you to follow up with the incident for further updates. Please log in using the below link.   
  
  
Regards,  
Shalini M. 


BG bhojaraj gc February 18, 2021 01:27 PM UTC

hi ,

as we discussed in call, attaching the package.json and js file for your referrence.

we are facing this issue when we make a async server call inside the write method.

thanks,
Bhojraj.

Attachment: files_2ba198c.zip

SM Shalini Maragathavel Syncfusion Team February 19, 2021 01:49 PM UTC

Hi Venkatesh,   
   
We have created a new incident under your Direct trac account to follow up with this query. We suggest you to follow up with the incident for further updates. Please log in using the below link.    
   
   
Regards,   
Shalini M.  
 


Loader.
Up arrow icon