Remove Validation of cell
i have a treegrid, i want to check if the row has a parent then it will be required, if the row has no parent then it won't be required. Can you help me?
SIGN IN To post a reply.
3 Replies
Hi Toan,
Thanks for your interest in Syncfusion Components.
Query#:- i want to check if the row has a parent then it will be required, if the row has no parent then it won't be required.
We have achieved your requirement through Custom Validation feature of the TreeGrid. Using this, we can define your own custom validation rules for the specific columns by using Form Validator custom rules. In the method, we have get the corresponding rowData and based on hasChildRecords property we have differentiate parent and child records and added Rules accordingly.
Refer to the code below:-
|
App.component.html:-
<ejs-treegrid #treegrid [dataSource]='data' height='400' childMapping='subtasks' [treeColumnIndex]='1'
[editSettings]='editSettings' [toolbar]='toolbar'>
<e-columns>
<e-column field='taskID' headerText='Task ID' isPrimaryKey='true' width='90' textAlign='Right'
[validationRules]='taskidrules'></e-column>
<e-column field='taskName' headerText='Task Name' editType='stringedit' width=220
[validationRules]='customrule'></e-column>
. . .
</e-columns>
</ejs-treegrid>
App.component.ts
public customFn: (args: { [key: string]: string}) => boolean = (args: {
[key: string]: string;}) => {
var rowdetail = parentsUntil((< any > args).element.parentElement, 'e-rowcell'); //get the corresponding row detail
var data = this.treegrid.getRowInfo(rowdetail.parentElement); //get the rowData from using getRowInfo method
var rowData = data.rowData;
var val = isNullOrUndefined(rowData.hasChildRecords);
if (isNullOrUndefined(rowData.hasChildRecords) && args['value'].length == 0)
{
return false; //Based on hasChildRecords property add validation rules
}
else
{
return true;
}
};
@ViewChild('treegrid')
public treegrid: TreeGridComponent;
ngOnInit() : void {
this.customrule = {
required: [this.customFn, 'Required for Childrows'] //add validation
};
|
Refer to the documentation Link:-
Sample link:- https://stackblitz.com/edit/angular-jyzakb-34hpqm
Screenshot:-
Please get back to us if you need any further assistance on this.
Regards,
Farveen sulthana TThanks for your feedback.
Query#:- But I can only edit the body using <ng-template #editSettingsTemplate let-data>. Is there any way I can use ng-template for header and footer?
We have achieved your requirement using actionComplete event of the TreeGrid and In this event we can customize the appearance of the header and footer of the Dialog reactive form. In addition to that we need to bind separate click events to perform its actions manually when customizing save and Cancel buttons.
Refer to the code below:-
|
App.component.html:-
<ejs-treegrid #treegrid [dataSource]='data' childMapping='subtasks' height='350' [treeColumnIndex]='1' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'(actionBegin)="actionBegin($event)" (actionComplete)="actionComplete($event)">
<e-columns>
<e-column field='taskID' headerText='Task ID' width='120' textAlign='Right' isPrimaryKey='true'></e-column>
. . .
</e-columns>
<ng-template #editSettingsTemplate let-data>
<div [formGroup]="taskForm">
<div class="form-row">
<div class="form-group col-md-6">
<div class="e-float-input e-control-wrapper"
[ngClass]="{'e-error': taskID.invalid && (taskID.dirty || taskID.touched)}">
<input formControlName="taskID" data-msg-containerid='taskIDError' id="taskID" name="taskID" type="text" [attr.disabled]="!data.isAdd ? '' : null">
<span class="e-float-line"></span>
. . .
<label class="e-float-text e-label-top" for="taskID"> Task ID</label>
</div>
</div>
</div>
</ng-template>
</ejs-treegrid>
App.component.ts:-
export class AppComponent {
public data: Object[] = [];
public editSettings: Object;
@ViewChild('treegrid')
public treegrid: TreeGridComponent;
ngOnInit(): void {
this.data = sampleData;
this.editSettings = {
allowEditing: true,
allowAdding: true,
allowDeleting: true,
mode: 'Dialog',
newRowPosition: 'Below'
};
this.toolbar = ['Add', 'Edit', 'Delete'];
}
actionComplete(args: DialogEditEventArgs): void {
if (args.requestType === 'beginEdit' || args.requestType === 'add') {
const dialog = args.dialog as Dialog;
const TaskName = 'taskName';
dialog.height = 400;
// change the header of the dialog
dialog.header =args.requestType === 'beginEdit' ? 'Record of ' + args.rowData[TaskName]: 'New Customer';
dialog.buttons = [
{ // Customize the button and handle click actions for save and cancel actions
buttonModel: {
isPrimary: true,
content: 'OK Save',
iconCss: 'e-icons e-ok-icon'
},
click: this.saveBtnClick
},
{
buttonModel: {
isPrimary: true,
content: 'Ok Cancel',
iconCss: 'e-icons e-close-icon'
},
click: this.cancelBtnClick
}
];
}
}
saveBtnClick(args) {
var treeobj = document.getElementsByClassName('e-treegrid')[0].ej2_instances;
treeobj[0].endEdit(); { //save the Edited values using endEdit method
}
cancelBtnClick(args) {
var treeobj = document.getElementsByClassName('e-treegrid')[0].ej2_instances;
treeobj[0].closeEdit(); //save the Edited values using closeEdit method
}
|
Note:- Using this event, you can customize the appearance of Dialog (header/footer) of your own.
Sample Link:- https://stackblitz.com/edit/angular-gglpcx-8v61jy
Screenshot:-
Refer to the documentation Link:-
Please get back to us if you need any further assistance.
Regards,
Farveen sulthana T
Farveen sulthana T
SIGN IN To post a reply.
