Need to change tooltip content for dynamically bind columns

Question

Hi,Need to change tooltip content from "This field is required." to "Required" for dynamically binding columns in grid.I have a grid with dynamically loading columns, where on Add will have drop down for each column and last column will have 2 textbox to update, for textbox I'm able to give tooltip with content = "Required", but for dropdown its getting content as "This field is required" by itself where i have not hardcoded anything for dropdown.How can I change the tooltip content for this.Thanks,Deepika P

Sujith Kumar Rajkumar · Accepted Answer

Hi Deepika, Greetings from Syncfusion support. We could understand from the query that your requirement is to change the validation message(tooltip content displayed based on validation) for the controls while editing Grid row. You can achieve this by specifying the required custom validation message along with the validation rules in the columns validationRules property as demonstrated in the below code snippets, app.component.html

. .

app.component.ts export class AppComponent { public shipcountryrules: Object; public ngOnInit(): void { this.shipcountryrules = { required: [true, 'Required'] }; } } We have prepared a sample based on this for your reference. You can find it below, Sample: https://stackblitz.com/edit/angular-epgalx?file=app.component.ts API link: https://ej2.syncfusion.com/angular/documentation/api/grid/columnModel/#validationrules Please get back to us if you require any further assistance. Regards, Sujith R

Deepika · Answer

Hi, One more concern, for the drop down i want to highlight the border on validation , but these dropdowns are dynamically binding. how can i highlight the border.Thanks,Deepika.P

Sujith Kumar Rajkumar · Answer

Hi Deepika, You can achieve your requirement of highlighting the dropdown border on validation by adding the ‘e-error’ class to the dropdown wrapper element when its value is null and removing it when it has value. This needs to be done by binding click event to the Grid and in the dropdown’s blur event. In the Grid’s click event the class has to be added in a timeout function in order for the form validation to be completed. And before adding this class, we need to check if Grid row is in edit state(by using its isEdit property) and if the corresponding dropdown edit column is validated(based on its column field name). This is demonstrated in the below code snippet, // Grid’s click event function onClickFun(e) { setTimeout( function (e) { // Check if Grid is in edit state and if the dropdown column is validated if (this.grid.isEdit && this.grid.editModule.formObj.validated.indexOf("ShipCountry") != -1) { // Dropdown instance is accessed by using it class to retrieve the dropdown element in the edit form var dropObj = this.grid.editModule.formObj.element.querySelector(".e-dropdownlist").ej2_instances[0]; if (isNullOrUndefined(dropObj.value)) { // Adding this class highlights dropdown border // You can also use your own custom class here dropObj.element.parentElement.classList.add("e-error"); } else { // Class is removed if dropdown has value dropObj.element.parentElement.classList.remove("e-error"); } } }.bind(this), 10); } The same action of adding/removing this class for the dropdown wrapper needs to be done in the dropdown component’s blur event also. This event can be bound to the Grid’s edit dropdown by using the columns edit params property as demonstrated in the below code snippets, app.component.html

app.component.ts public ngOnInit(): void { this.shipcountryrules = { required: [true, "Required"] }; this.editparams = { params: { popupHeight: "300px", blur: this.onBlur.bind(this) } }; } // Edit dropdown’s blur event function onBlur() { // Dropdown instance is accessed by using it class to retrieve the dropdown element in the edit form // If there are multiple edit dropdown’s in the form this actions needs to be performed for each of them var dropObj = this.grid.editModule.formObj.element.querySelector(".e-dropdownlist").ej2_instances[0]; if (isNullOrUndefined(dropObj.value)) { // Adding this class highlights dropdown border // You can also use your own custom class here dropObj.element.parentElement.classList.add("e-error"); } else { // Class is removed if dropdown has value dropObj.element.parentElement.classList.remove("e-error"); } } We have modified the previously provided sample based on this for your reference. You can find it below, Sample: https://stackblitz.com/edit/angular-epgalx-htums8?file=app.component.ts API links: https://ej2.syncfusion.com/angular/documentation/api/drop-down-list#blur https://ej2.syncfusion.com/angular/documentation/api/grid/column/#edit Let us know if you have any concerns. Regards, Sujith R

Deepika · Answer

Hi Sujith,As its a dynamically binding column i don't know what all and how many columns may come in my grid, to do the edit on specific column.Please find the code snippet below:.html file :

Location Hierarchy

Hierarchy Level :

info

Select a Hierarchy Level to view the data.

.ts file :async actionBegin(e: any) { switch (e.requestType) { case 'add': this.editDropDowns = []; this.location.description = null; this.location.name = null; this.renderedColumns.length === 1 ? this.disabled = false : this.disabled = true; this.cancelAction = false; break;}}actionComplete(e): void { if (e.requestType === 'beginEdit' || e.requestType === 'add') { this.grid.columns.forEach((col, i) => { if (i !== this.renderedColumns.length - 1) e.form.ej2_instances[0].addRules(col.field, { required: [true, 'Required'] }); }) e.form.ej2_instances[0].addRules('code', { required: [true, 'Required'] }); const focusOn = this.columns.length > 1 ? this.columns[0].field : 'code'; e.form.elements.namedItem(focusOn).focus(); } }private editRow(idx, ctrl) { let dropDownListEdit: IEditCell; let dropDownList: DropDownList; let ele: HTMLElement; dropDownListEdit = { create: () => { ele = document.createElement('input'); ele.setAttribute('required', ''); return ele; }, read: () => { return dropDownList.text; }, destroy: () => { dropDownList.destroy(); }, write: (args: { rowData: object, column: Column }) => { dropDownList = new DropDownList({ dataSource: idx === 0 ? this.parentDdlData : [], allowFiltering: true, zIndex: 10001, fields: { value: 'id', text: 'fullDescription' }, // itemTemplate: '

${name} | ${description}

', // valueTemplate: '

${name} | ${description}

', change: () => { let tempQuery: Query = new Query().where('id', 'equal', dropDownList.value); this.editDropDowns.forEach((el, i) => { if (!(i <= idx)) { el.text = null; el.enabled = false; this.disabled = true; this.location.name = null; this.location.description = null; } }); if (tempQuery.queries[0].e.value != null) { this.getGridDropdownData(tempQuery.queries[0].e.value).pipe(takeUntil(this.unSubscribe)).subscribe(res => { const data = res.data.map(el => { if (el.description) { el.fullDescription = el.name + ' | ' + el.description; } else { el.fullDescription = el.name; } return el; }); this.validationData = res.data; if (this.editDropDowns[idx + 1]) { this.editDropDowns[idx + 1].enabled = true; this.editDropDowns[idx + 1].text = null; this.editDropDowns[idx + 1].dataSource = data; this.editDropDowns[idx + 1].dataBind(); } else { this.disabled = false; } }); } }, filtering: (e) => { const data = dropDownList.dataSource let predicate = new Predicate('description', 'startswith', e.text, true); predicate = predicate.or('name', 'startswith', e.text, true); let query: Query = new Query(); //frame the query based on search string with filter type. query = (e.text !== '') ? query.where(predicate) : query; //pass the filter data source, filter query to updateData method. e.updateData(data, query); }, actionComplete: () => false, enabled: idx !== 0 ? false : true, placeholder: 'Select ' + ctrl, floatLabelType: 'Never', }); dropDownList.appendTo(ele); this.editDropDowns.push(dropDownList); } } return dropDownListEdit; }Question :Im able to highlight it now, as soon as i click on Add button the dropdown's are getting highlighted. but I want them to be highlighted only if i didn't selected any value from the mandatory drop downs ,not on soon as clicking on Add button in toolbar.so how can we achieve it in this scenario.Thanks,Deepika.P

Sujith Kumar Rajkumar · Answer

Hi Deepika, 
 
You can perform the same operation of highlighting the cell edit rendered edit dropdown border depending on the validation state by using the following steps, 
 
Initially bind ‘blur’ event directly to the dropdown initialized through columns cell edit functionality and perform the adding/removing the error class there as demonstrated in the below code snippet, 
 




this.dpParams = { 
        create: () => { 
                     . 
                     . 
        } 
                     . 
                     . 
        write: (args: { rowData: object; column: Column }) => { 
            dropDownObj = new DropDownList({ 
                     . 
                     . 
                blur: function (e) { 
                    if (isNullOrUndefined(this.dropDownObj.value)) { 
                        this.dropDownObj.element.parentElement.classList.add('e-error') 
                    } 
                    else { 
                        this.dropDownObj.element.parentElement.classList.remove('e-error') 
                    } 
                }.bind(this), 
            }); 
            dropDownObj.appendTo(this.elem); 
        } 
 }; 
 
Then in the Grid’s click event function, get the available dropdown list controls from the edit form using its class name(e-dropdownlist) and add/remove the ‘e-error’ class to its parent element depending on the dropdown value. This is demonstrated in the below code snippet, 
 




// Grid’s click event function 
onClickFun(e){ 
        setTimeout(function (e) { 
            // Check if Grid is in edit state and validation has been performed 
            if (this.grid.isEdit && this.grid.editModule.formObj.validated.length !== 0) { 
                this.grid.editModule.formObj.inputElements.forEach(ele => { 
                    // Get the available dropdown list controls from the edit form elements 
                    if (ele.classList.contains('e-dropdownlist')) { 
                        // Dropdown instance 
                        var dropInst = ele.ej2_instances[0]; 
                        // The error class is added/removed based on the dropdown value 
                        if (isNullOrUndefined(dropInst.value)) { 
                            ele.parentElement.classList.add('e-error'); 
                        } else { 
                            ele.parentElement.classList.remove('e-error'); 
                        } 
                    } 
                }) 
            } 
        }.bind(this), 10) 
} 
 
We have modified the previously provided sample based on this. You can find it below, 
 
Sample: https://stackblitz.com/edit/angular-epgalx-68wj4n?file=app.component.ts  
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R