Trying to set editTemplate to columns

Question

I'm trying to set a custom edit template to a column, which is a child column of another one.

Column directives in grid component:

<ColumnsDirective>
    <ColumnDirective columns={stackedGridColumns[0]}  headerText='Compatibility' field='Compatibility' textAlign="Center" />
    <ColumnDirective columns={stackedGridColumns[1]} headerText='Application Details' field='ApplicationDetails' textAlign="Center" />
    <ColumnDirective columns={stackedGridColumns[2]} headerText='Resources' field='Resources' textAlign="Center" />
    <ColumnDirective columns={stackedGridColumns[3]} headerText='Access Details' field='AccessDetails' textAlign="Center" />
    <ColumnDirective columns={stackedGridColumns[4]} headerText='IT Profile' field='ITProfile' textAlign="Center" />
    <ColumnDirective columns={stackedGridColumns[5]} headerText='Data Classification' field='DataClassification' textAlign="Center" />
    <ColumnDirective columns={stackedGridColumns[6]} headerText='Business Details' field='BusinessDetails' textAlign="Center" />
</ColumnsDirective>

I'm passing array of arrays of column models

let stackedGridColumns: ColumnModel[][] = [[
    { headerText: 'Testing', field: 'Testing', width: 100,   textAlign: 'Center', minWidth: 50, editTemplate:`<DropDownListComponent value=${gridDataSource[selectedId]?.Testing }   onChange=${(e:any) => { editTesting=e.value; editRowNumber=selectedId; deselectRowStatus=1; }}  width="45%" placeholder="Value"  dataSource=${dataDropDownLists.TestingData} />`},
    { headerText: 'Current Status', field: 'CurrentStatus', width: 120, textAlign: 'Center', minWidth: 50 },
], [
    { headerText: 'Application Name', field: 'ApplicationName', width: 150, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Version', field: 'Version', width: 120, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Description', field: 'Description', width: 120, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Notes', field: 'Notes', width: 120, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Category', field: 'Category', width: 200, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Type', field: 'Type', width: 100, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Platform', field: 'Platform', width: 120, textAlign: 'Center', minWidth: 50},
    { headerText: 'Authentication Method', field: 'AuthenticationMethod', width: 180, textAlign: 'Center', minWidth: 50},
    { headerText: 'Dependencies', field: 'Dependencies', width: 120, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Vendor', field: 'Vendor', width: 120, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Vendor Product URL', field: 'VendorProductURL', width: 120, textAlign: 'Center', minWidth: 50 },
], [
    { headerText: 'Physical Server', field: 'PhysicalServer', width: 150, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Virtual Server', field: 'VirtualServer', width: 150, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Database', field: 'Database', width: 120, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Test Resources', field: 'TestResources', width: 150, textAlign: 'Center', minWidth: 50 },
], [
    { headerText: 'Environments', field: 'Environments', width: 150, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Location', field: 'Location', width: 150, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Website URL', field: 'WebsiteURL', width: 150, textAlign: 'Center', minWidth: 50 },
], [
    { headerText: 'Application Owner', field: 'ApplicationOwner', width: 150, textAlign: 'Center', minWidth: 50 },
    { headerText: 'IT Division', field: 'ITDivision', width: 150, textAlign: 'Center', minWidth: 50 },
    { headerText: 'IT Solution Area', field: 'ITSolutionArea', width: 150, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Managed Service', field: 'ManagedService', width: 150, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Managed Service Provider', field: 'ManagedServiceProvider', width: 150, textAlign: 'Center', minWidth: 50 },
    { headerText: 'IT Lead', field: 'ITLead', width: 150, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Architect/Tech Lead', field: 'ArchitectTechLead', width: 160, textAlign: 'Center', minWidth: 50},
    { headerText: 'Solution/Architect', field: 'SolutionArchitect', width: 150, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Support Group', field: 'SupportGroup', width: 150, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Support Team', field: 'SupportTeam', width: 150, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Primary Contact', field: 'PrimaryContact', width: 150, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Test/QA Contact', field: 'TestQAContact', width: 150, textAlign: 'Center', minWidth: 50 },
    { headerText: 'SLA', field: 'SLA', width: 120, textAlign: 'Center', minWidth: 50},
], [
    { headerText: 'Sensitive Personal Information', field: 'SensitivePersonalInformation', width: 210, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Sensitive Account', field: 'SensitiveAccount', width: 150, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Sensitive Data Selection', field: 'SensitiveDataSelection', width: 190, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Sensitive Data', field: 'SensitiveData', width: 150, textAlign: 'Center', minWidth: 50 },
], [
    { headerText: 'Priority', field: 'Priority', width: 150, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Audience', field: 'Audience', width: 150, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Business Unit', field: 'BusinessUnit', width: 150, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Business Owner', field: 'BusinessOwner', width: 150, textAlign: 'Center' },
    { headerText: 'Business Owner Team', field: 'BusinessOwnerTeam', width: 170, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Additional Business Owners', field: 'AdditionalBusinessOwners', width: 210, textAlign: 'Center', minWidth: 50 },
]];

Testing edit template:

const testingEditTemplate = (args: any) => {
    return (<><span><DropDownListComponent value={args.Testing}   onChange={(e:any) => { editTesting=e.value; editRowNumber=args.index; deselectRowStatus=1; }}  width="45%" placeholder="Value"  dataSource={dataDropDownLists.TestingData} /></span> </>)
};

However, my Grid component says that there are no records to display (despite there are some), and when i'm trying to add new record - app crashes with following errors

How can i fix this?
When i don't use editTemplate everything works fine

Sujith Kumar Rajkumar · Answer

Hi Team, 

Greetings from Syncfusion support. 

The stacked header columns are initialized directly as an array of objects and so you need to use the TS approach for defining the edit template to these columns. This is demonstrated in the below code snippet, 





import { DropDownList } from '@syncfusion/ej2-dropdowns'; 
 
export class StackedHeader extends SampleBase { 
    constructor() { 
        this.dropDownObj; 
        this.elem; 
        this.cols2 = [ 
            { 
                field: 'ShipCountry', headerText: 'Ship Country', width: 150, edit: { 
                    create: () => { 
                        this.elem = document.createElement('input'); 
                        return this.elem; 
                    }, 
                    read: () => { 
                        return this.dropDownObj.value; 
                    }, 
                    write: (args) => { 
                        this.dropDownObj = new DropDownList({ 
                            dataSource: [...], 
                            value: args.rowData[args.column.field], 
                        }); 
                        this.dropDownObj.appendTo(this.elem); 
                    } 
               } 
            } 
        ] 
    } 
} 

We have prepared a sample based on this for your reference. You can find it below, 
 
Sample: https://stackblitz.com/edit/react-9nqujg?file=index.js 

More details on this can be checked in the below documentation links, 

Documentation: https://ej2.syncfusion.com/documentation/grid/editing/edit-types/#custom-editors-using-template 
                               https://ej2.syncfusion.com/documentation/drop-down-list/getting-started/ 

Please get back to us if you require any further assistance. 

Regards, 
Sujith R

Test Test · Answer

Can this.elem parameter be JSX element (for example MulstiSelectDropdown list) ? If so, how can i do it?

Sujith Kumar Rajkumar · Answer

Hi Team, 

As mentioned previously the stacked columns are initialized from the array objects and so the html element needs to be returned from edit template’s create method for creating the custom edit component. This is the behavior of this case and so it is not feasible to return a JSX element from here. 

Let us know if you have any concerns. 

Regards, 
Sujith R

Test Test · Answer

What i'm trying to achieve is to set MultiSelectDropdown component for edit row case.
I've changed my code, accroding to the first response, yet still i am expiriencing this error.

My columns: (Trying to set MultiSelectDropdown in

let stackedGridColumns: any[][] = [[
    { headerText: 'Testing', field: 'Testing', width: 100,  textAlign: 'Center', minWidth: 50, editType:'dropdownedit', edit:{params: {dataSource: dataCellType.TestingData, fields:{text: 'Value', value: ''}}} },
    { headerText: 'Current Status', field: 'CurrentStatus', width: 120, textAlign: 'Center', minWidth: 50,  },
], [
    { headerText: 'Application Name', field: 'ApplicationName', width: 150, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Version', field: 'Version', width: 120, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Description', field: 'Description', width: 120, textAlign: 'Center', minWidth: 50, editType:'dropdownedit', edit:{params: {dataSource: dataCellType.DescriptionData, fields: fieldCellType}} },
    { headerText: 'Notes', field: 'Notes', width: 120, textAlign: 'Center', minWidth: 50, editType:'dropdownedit', edit:{params: {dataSource: dataCellType.NotesData, fields: fieldCellType}} },
    { headerText: 'Category',  field: 'Category', width: 200, textAlign: 'Center', minWidth: 50, edit:{ params: {dataSource: dataCellType.CategoryData, fields: fieldCellType},
            create: () => {
                multielem = document.createElement('input');
                return multielem;
            },
            read: () => {
                return multiCategory;
                // return this.dropDownObj.value;
            },
            write: (args:any) => {
                let dropDownObj = new DropDownList({
                    dataSource: dataCellType.TestingData,
                    value: args?.rowData[args.column.field] ?? "",
                });
                dropDownObj.appendTo(multielem);
            }  }},
    { headerText: 'Type', field: 'Type', foreignKeyField:"Type" , width: 100, textAlign: 'Center', minWidth: 50, editType:'dropdownedit', edit:{params: {dataSource: dataCellType.TypeData, fields: fieldCellType}} },
    { headerText: 'Platform', field: 'Platform', width: 120, textAlign: 'Center', minWidth: 50,  },
    { headerText: 'Authentication Method', field: 'AuthenticationMethod', width: 180, textAlign: 'Center', minWidth: 50, },
    { headerText: 'Dependencies', field: 'Dependencies', width: 120, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Vendor', field: 'Vendor', width: 120, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Vendor Product URL', field: 'VendorProductURL', width: 120, textAlign: 'Center', minWidth: 50 },
], [
    { headerText: 'Physical Server', field: 'PhysicalServer', width: 150, textAlign: 'Center', minWidth: 50, editType:'dropdownedit', edit:{params: {dataSource: dataCellType.PhysicalServerData, fields: fieldCellType}} },
    { headerText: 'Virtual Server', field: 'VirtualServer', width: 150, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Database', field: 'Database', width: 120, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Test Resources', field: 'TestResources', width: 150, textAlign: 'Center', minWidth: 50 },
], [
    { headerText: 'Environments', field: 'Environments', width: 150, textAlign: 'Center', minWidth: 50,   },
    { headerText: 'Location', field: 'Location', width: 150, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Website URL', field: 'WebsiteURL', width: 150, textAlign: 'Center', minWidth: 50 },
], [
    { headerText: 'Application Owner', field: 'ApplicationOwner', width: 150, textAlign: 'Center', minWidth: 50 },
    { headerText: 'IT Division', field: 'ITDivision', width: 150, textAlign: 'Center', minWidth: 50 },
    { headerText: 'IT Solution Area', field: 'ITSolutionArea', width: 150, textAlign: 'Center', minWidth: 50,   },
    { headerText: 'Managed Service', field: 'ManagedService', width: 150, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Managed Service Provider', field: 'ManagedServiceProvider', width: 150, textAlign: 'Center', minWidth: 50 },
    { headerText: 'IT Lead', field: 'ITLead', width: 150, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Architect/Tech Lead', field: 'ArchitectTechLead', width: 160, textAlign: 'Center', minWidth: 50},
    { headerText: 'Solution/Architect', field: 'SolutionArchitect', width: 150, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Support Group', field: 'SupportGroup', width: 150, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Support Team', field: 'SupportTeam', width: 150, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Primary Contact', field: 'PrimaryContact', width: 150, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Test/QA Contact', field: 'TestQAContact', width: 150, textAlign: 'Center', minWidth: 50 },
    { headerText: 'SLA', field: 'SLA', width: 120, textAlign: 'Center', minWidth: 50, editType:'dropdownedit', edit:{params: {dataSource: dataCellType.SLAData, fields: fieldCellType}}},
], [
    { headerText: 'Sensitive Personal Information', field: 'SensitivePersonalInformation', width: 210, textAlign: 'Center', minWidth: 50, editType:'dropdownedit', edit:{params: {dataSource: dataCellType.SensitivePersonalInformationData, fields: fieldCellType}} },
    { headerText: 'Sensitive Account', field: 'SensitiveAccount', width: 150, textAlign: 'Center', minWidth: 50, editType:'dropdownedit', edit:{params: {dataSource: dataCellType.SensitiveAccountData, fields: fieldCellType}} },
    { headerText: 'Sensitive Data Selection', field: 'SensitiveDataSelection', width: 190, textAlign: 'Center', minWidth: 50,     },
    { headerText: 'Sensitive Data', field: 'SensitiveData', width: 150, textAlign: 'Center', minWidth: 50,    },
], [
    { headerText: 'Priority', field: 'Priority', width: 150, textAlign: 'Center', minWidth: 50, editType:'dropdownedit', edit:{params: {dataSource: dataCellType.PriorityData, fields: fieldCellType}} },
    { headerText: 'Audience', field: 'Audience', width: 150, textAlign: 'Center', minWidth: 50, editType:'dropdownedit', edit:{params: {dataSource: dataCellType.AudienceData, fields: fieldCellType}}},
    { headerText: 'Business Unit', field: 'BusinessUnit', width: 150, textAlign: 'Center', minWidth: 50,   },
    { headerText: 'Business Owner', field: 'BusinessOwner', width: 150, textAlign: 'Center' },
    { headerText: 'Business Owner Team', field: 'BusinessOwnerTeam', width: 170, textAlign: 'Center', minWidth: 50 },
    { headerText: 'Additional Business Owners', field: 'AdditionalBusinessOwners', width: 210, textAlign: 'Center', minWidth: 50  },
]];

Sujith Kumar Rajkumar · Answer

Hi Team, 

We checked the shared code snippet and the reported problem is occurring because the custom edit MultiSelect dropdown component was not properly initialized in the column edit template. So please check the below code snippet and sample to achieve this requirement, 





import { MultiSelect } from '@syncfusion/ej2-dropdowns'; 
 
this.cols1 = [{ field: 'ShipCountry', headerText: 'Ship Country', width: 150, edit: { 
   create: () => { 
     // Input element is created and returned for appending the multi select component 
     this.elem = document.createElement('input'); 
     return this.elem; 
   }, 
   read: () => { 
     // Multi select value is joined and returned as single string to the Grid(since Grid does not support array type columns) 
     return this.multiObj.value.join(','); 
   }, 
   write: (args) => { 
     // Current cell value 
     var cellValue = args.rowData['ShipCountry']; 
     var multiSelectVal; 
     if (cellValue !== undefined) { 
       // If multiple values are present, they are split and for single value – it is assigned in an array 
       multiSelectVal = cellValue.indexOf(',') !== -1 ? cellValue.split(',') : [cellValue]; 
     } else { 
       // Value is set as empty when adding a new record 
       multiSelectVal = ''; 
     } 
     // Multi select is initialized and appended to the created input element 
     this.multiObj = new MultiSelect({ 
       // Set the data to dataSource property 
       dataSource: this.country, 
       // The processed cell value is set as the edit multi select’s selected value 
       value: multiSelectVal, 
       fields: { text: 'countryName', value: 'countryName' }, 
       placeholder: 'Select countries', 
     }); 
     this.multiObj.appendTo(this.elem); 
   }, 
   destroy: () => { 
     // The multi select is destroyed on save/close 
     this.multiObj.destroy(); 
   } 
  } 
}] 

Sample: https://stackblitz.com/edit/react-9nqujg?file=index.js 

More details on the EJ2 Multi Select component can be checked in the below documentation links, 

Documentation: https://ej2.syncfusion.com/documentation/multi-select/getting-started/ 

Let us know if you have any concerns. 

Regards, 
Sujith R