Grid Add command

Question

In Add mode the name 'Link Type' is not showing for the dropdown columnAlso, is there a way to hide a column is ADD and Edit mode only? public editSettings: EditSettingsModel = { allowEditing: false, allowAdding: true, allowDeleting: true, mode: 'Dialog' };

e-column> e-column> e-column> e-column> e-columns> ejs-grid>this.ddParamsP = { create: () => { this.elem = document.createElement('input'); return this.elem; }, read: () => { console.log("Read"); return this.dropdownObj.value; }, destroy: () => { this.dropdownObj.destroy(); }, write: (args: { rowData: any, column: any }) => { this.dropdownObj = new DropDownList({ dataSource: this.assocTypesData, value: (args.rowData as any).linkType, fields: { text: 'name', value: 'id' } }); this.dropdownObj.appendTo(this.elem); } } this.getAssociationTypes(); }

vin · Answer

In Add mode the name 'Link Type' is not showing for the dropdown columnAlso, is there a way to hide a column is ADD and Edit mode only? public editSettings: EditSettingsModel = { allowEditing: false, allowAdding: true, allowDeleting: true, mode: 'Dialog' };

e-column> e-column> e-column> e-column> e-columns> ejs-grid>this.ddParamsP = { create: () => { this.elem = document.createElement('input'); return this.elem; }, read: () => { console.log("Read"); return this.dropdownObj.value; }, destroy: () => { this.dropdownObj.destroy(); }, write: (args: { rowData: any, column: any }) => { this.dropdownObj = new DropDownList({ dataSource: this.assocTypesData, value: (args.rowData as any).linkType, fields: { text: 'name', value: 'id' } }); this.dropdownObj.appendTo(this.elem); } } this.getAssociationTypes(); }Need help please

Balaji Sekar · Answer

Hi Vin, 
 
Query #1: In Add mode the name 'Link Type' is not showing for the dropdown column 

Based on your query we suspect that you need to display the label name when you add the new record.   

To show the label edit column name in the dropdownlist(which is bind by using cellEditTemplate feature) we suggest you to use write method of cellEditTemplate. 
 
We have created a label selector with a column name and it is prepend to the dropdownlist editing in the write method. Please refer the below code example and sample for more information. 





[normal-edit.component.ts] 
  this.editparams = { 
      create: () => { 
        this.elem = document.createElement("input"); 
        return this.elem; 
      }, 
      read: () => { 
        return this.dropdownObj.text; 
      }, 
      destroy: () => { 
        this.dropdownObj.destroy(); 
      }, 
      write: args => {         
        var label = document.createElement("label"); 
        label.innerText = "CustomerID"; 
        label.style.color = "rgba(0, 0, 0, 0.42)"; 
        label.style.fontWeight = "400"; 
        args.element.parentElement.appendChild(label); 
        var brelem = document.createElement("br"); 
        args.element.parentElement.appendChild(brelem); 
        args.element.parentElement.appendChild(this.elem); 
 
        this.dropdownObj = new DropDownList({ 
          dataSource: <any>orderDatas, 
          value: (args.rowData as any).OrderID, 
          fields: { text: "CustomerID", value: "OrderID" } 
        }); 
 
        this.dropdownObj.appendTo(this.elem); 
      } 
    }; 

Sample link: https://stackblitz.com/edit/angular-kc9hah-64nazr  

Query #2:  is there a way to hide a column is ADD and Edit mode only? 

From above query we are unable to get the exact requirement. So, please share your exact requirement with screenshot or video demo it will help us to provide the proper solution. 

Regards, 
Balaji Sekar

vin · Answer

It is rendering bit differently for me, The 1st dropdown select icon on left sideThe 2nd dropdown label is below dropdownAnd i see a new line before Save button

e-column> e-column> e-column> e-columns> ejs-grid>this.ddParamsP = { create: () => { this.elem = document.createElement('input'); return this.elem; }, read: () => { console.log("Read"); return this.dropdownObj.value; }, destroy: () => { this.dropdownObj.destroy(); }, write: (args) => { var label = document.createElement("label"); label.innerText = "Link Type"; label.style.color = "rgba(0, 0, 0, 0.42)"; label.style.fontWeight = "400"; args.element.parentElement.appendChild(label); var brelem = document.createElement("br"); args.element.parentElement.appendChild(brelem); args.element.parentElement.appendChild(this.elem); this.dropdownObj = new DropDownList({ dataSource: this.assocTypesData, value: (args.rowData as any).linkType, fields: { text: 'name', value: 'id' } }); this.dropdownObj.appendTo(this.elem); } } this.ddParamsTasks = { create: () => { this.elemTasks = document.createElement('input'); return this.elemTasks; }, read: () => { console.log("Read"); return this.dropdownTasksObj.value; }, destroy: () => { this.dropdownTasksObj.destroy(); }, write: args => { var label = document.createElement("label"); label.innerText = "Tasks "; label.style.color = "rgba(0, 0, 0, 0.42)"; label.style.fontWeight = "400"; args.element.parentElement.appendChild(label); var brelem = document.createElement("br"); args.element.parentElement.appendChild(brelem); args.element.parentElement.appendChild(this.elem); this.dropdownTasksObj = new DropDownList({ dataSource: this.tasksData, value: (args.rowData as any).itemName, fields: { text: 'itemName', value: 'itemId' } }); this.dropdownTasksObj.appendTo(this.elemTasks); } } }I added one more dropdown to your example

vin · Answer

It is rendering bit differently for me, The 1st dropdown select icon on left sideThe 2nd dropdown label is below dropdownAnd i see a new line before Save button

e-column> e-column> e-column> e-columns> ejs-grid>this.ddParamsP = { create: () => { this.elem = document.createElement('input'); return this.elem; }, read: () => { console.log("Read"); return this.dropdownObj.value; }, destroy: () => { this.dropdownObj.destroy(); }, write: (args) => { var label = document.createElement("label"); label.innerText = "Link Type"; label.style.color = "rgba(0, 0, 0, 0.42)"; label.style.fontWeight = "400"; args.element.parentElement.appendChild(label); var brelem = document.createElement("br"); args.element.parentElement.appendChild(brelem); args.element.parentElement.appendChild(this.elem); this.dropdownObj = new DropDownList({ dataSource: this.assocTypesData, value: (args.rowData as any).linkType, fields: { text: 'name', value: 'id' } }); this.dropdownObj.appendTo(this.elem); } } this.ddParamsTasks = { create: () => { this.elemTasks = document.createElement('input'); return this.elemTasks; }, read: () => { console.log("Read"); return this.dropdownTasksObj.value; }, destroy: () => { this.dropdownTasksObj.destroy(); }, write: args => { var label = document.createElement("label"); label.innerText = "Tasks "; label.style.color = "rgba(0, 0, 0, 0.42)"; label.style.fontWeight = "400"; args.element.parentElement.appendChild(label); var brelem = document.createElement("br"); args.element.parentElement.appendChild(brelem); args.element.parentElement.appendChild(this.elem); this.dropdownTasksObj = new DropDownList({ dataSource: this.tasksData, value: (args.rowData as any).itemName, fields: { text: 'itemName', value: 'itemId' } }); this.dropdownTasksObj.appendTo(this.elemTasks); } } }I added one more dropdown to your exampleAny help please?

Balaji Sekar · Answer

Hi Vin, 
 
We checked your query with provided the information and we found that you have append the input element(this.elem) instead “this.elemTask” to the editform which is defined in write function in the ddParamsTasks definition. 

We have created sample with multiple dropdown editing using cellEditTemplate feature as given below. 
 
Sample link: https://stackblitz.com/edit/angular-kc9hah-17bzwu  
 
If still facing same issue in your end, please replicate the reported problem in above sample/video demonstration of problem and share to us that will help to validate further. 
 
Regards, 
Balaji Sekar

vin · Answer

Thanks that fixed the issueHow do i force validations to select a value from dropdown when in ADD mode

Balaji Sekar · Answer

Hi Vin, We are happy hear that issue has been resolved. Query: How do i force validations to select a value from dropdown when in ADD mode By default we have built-in support for validation in the Grid form which is validate focus out from the input component. As per your query we have enabled the column validation in the ShipCountry column and it is apply the validating ShipCountry’s input component(dropdownlist) while add action. Please refer the below code example and sample for more information. [app.component.html]

[app.component.ts] export class NormalEditComponent implements OnInit { @ViewChild("grid") public grid: GridComponent; this.shipcountryValidation = { required: true }; Sample link: https://stackblitz.com/edit/angular-kc9hah-yrkyyh Help Documentation: https://ej2.syncfusion.com/angular/documentation/grid/edit/#column-validation https://ej2.syncfusion.com/angular/documentation/grid/edit/#custom-validation Please get back to us, if you need further assistance. Regards, Balaji Sekar