- Home
- Forum
- Angular - EJ 2
- Need to change tooltip content for dynamically bind columns
Need to change tooltip content for dynamically bind columns
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
SIGN IN To post a reply.
5 Replies
1 reply marked as answer
SK
Sujith Kumar Rajkumar
Syncfusion Team
September 22, 2020 10:23 AM UTC
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
|
<ejs-grid #normalgrid [dataSource]='data' ... >
<e-columns>
.
.
<e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit' [edit]='editparams' [validationRules]='shipcountryrules'></e-column>
</e-columns>
</ejs-grid> |
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,
Please get back to us if you require any further assistance.
Regards,
Sujith R
Marked as answer
DE
Deepika
September 23, 2020 02:23 PM UTC
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
SK
Sujith Kumar Rajkumar
Syncfusion Team
September 24, 2020 12:04 PM UTC
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
|
<ejs-grid (click)='onClickFun($event)' ...>
<e-columns>
<e-column field='ShipCountry' [validationRules]='shipcountryrules' [edit]='editparams' editType='dropdownedit'></e-column>
</e-columns>
</ejs-grid> |
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,
Let us know if you have any concerns.
Regards,
Sujith R
DE
Deepika
September 25, 2020 12:33 PM UTC
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 :
<div fxLayout="column" fxLayoutAlign="space-around" fxLayoutGap="10px" style="margin-top: 10px; padding: 0 10px;">
<div class="grid-header" fxLayout="row" fxLayoutAlign="space-between center">
<span class="grid-title">Location Hierarchy</span>
<div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap='10px'>
<label for="ddlLocationHierarchy">Hierarchy Level : </label>
<ejs-dropdownlist id='ddlLocationHierarchy' [dataSource]="hierarchyLevel" (change)="hierarchyChange($event)"
[fields]="locationHierarchyFields" placeHolder="-- select --" [(ngModel)]="location.levelId" [disabled]="deleting">
</ejs-dropdownlist>
</div>
</div>
<div class="grid-container">
<mat-card *ngIf="gridData">
<ejs-grid #grid [dataSource]="gridData" [searchSettings]="searchOptions" [locale]='en-US'
[textWrapSettings]='wrapSettings' (actionBegin)="actionBegin($event)"
(actionComplete)='actionComplete($event)' (toolbarClick)='toolbarClick($event)'
[editSettings]="editSettings" [columns]="columns" [toolbar]="toolbarOptions" [allowPaging]="true"
[pageSettings]="pageSettings" [allowSelection]="true" allowTextWrap='true'
[selectionSettings]="selectOptions" (rowSelecting)='rowSelecting($event)' [allowSorting]="true"
[sortSettings]="sortOptions" allowScrolling="true" [height]='windowHeight'></ejs-grid>
</mat-card>
<div class="grid-placeHolder" *ngIf="!gridData" fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="10px">
<mat-icon aria-hidden="false">info</mat-icon>
<span>
Select a
<strong>Hierarchy Level</strong>
to view the data.
</span>
</div>
</div>
</div>
<ng-template #textBox let-data>
<div fxLayout="row" fxLayoutAlign="space-around stretch" fxLayoutGap="10px">
<span fxFlex="50">
<!-- <ejs-tooltip id="tooltipFocus" opensOn="Focus" content="this Field is required" target="#input"
cssClass="custom-tip"> -->
<input id="input" class="e-input" type="text" placeholder="Code" [(ngModel)]="location.name" required
autocomplete="off" [disabled]="disabled" name="code" maxlength="15" />
<!-- </ejs-tooltip> -->
</span>
<span fxFlex>
<input class="e-input" type="text" placeholder="Description" [(ngModel)]="location.description"
autocomplete="off" [disabled]="disabled" maxlength="50"/>
</span>
</div>
</ng-template>
.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: '<div>${name} | ${description}</div>',
// valueTemplate: '<div>${name} | ${description}</div>',
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
SK
Sujith Kumar Rajkumar
Syncfusion Team
September 28, 2020 12:38 PM UTC
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,
Let us know if you have any concerns.
Regards,
Sujith R
SIGN IN To post a reply.
- 5 Replies
- 2 Participants
- Marked answer
-
DE Deepika
- Sep 21, 2020 02:07 PM UTC
- Sep 28, 2020 12:38 PM UTC
