Remove Validation of cell

[Toan Bui]

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?

[Farveen Sulthana Thameeztheen Basha]

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:- 

https://ej2.syncfusion.com/angular/documentation/treegrid/edit/#custom-validation 

 

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 T

[Toan Bui]

I did it. Thank you so much.

Now I want to edit ng-template for header, body and footer of dialog reactive form. 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?

[Farveen Sulthana Thameeztheen Basha]

Thanks 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:- 

https://ej2.syncfusion.com/angular/documentation/treegrid/how-to/customize-the-edit-dialog/ 

Please get back to us if you need any further assistance. 

Regards,
Farveen sulthana T