Syncfusion + Angular + TreeGrid: Contextual validation of composite data types

[External Vaidotas Strazdas]

Hello, I am trying to implement the solution that would support properly use of templates, context based custom edit rules, and validations for that. First, let us start with example data type. Let it be the following data types:

type TDimensions = {
  width: number;
  height: number;
}

type TItem = {
  id: string;
  name: string;
  dimensions: TDimensions
}

There is nothing complex here, except the dimensions utilizes the use of custom non-promitive data type. Then, I create the grid for my data type:

<div class="control-section">

  <div class="col-lg-9">

    <ejs-treegrid

      #itemsGrid

      id="itemsGrid"

      [treeColumnIndex]="1"

      [dataSource]="items"

      [toolbar]="itemsToolbar"

      [editSettings]="itemsEditSettings"

      [allowPaging]="true"

      [pageSettings]="{ pageSize: 10 }"

      [allowSorting]="true"

      [allowTextWrap]="true"

      [textWrapSettings]="{ wrapMode: 'Header' }"

      [allowSelection]="true"

    >

      <e-columns>

        <e-column

          field="id"

          width="30"

          headerTextAlign="center"

          textAlign="center"

          headerText="ID"

          isPrimaryKey="true"

        >

        </e-column>

        <e-column

          field="name"

          width="100"

          headerTextAlign="center"

          textAlign="center"

          headerText="Name"

          [validationRules]="nameRequiredRule"

        >

          <ng-template #template let-item>{{ item.name }}</ng-template>

          <ng-template #editTemplate let-item>

            <input name="name" [(ngModel)]="item.name" />

          </ng-template>

        </e-column>

        <e-column

          field="dimensions"

          width="120"

          headerTextAlign="center"

          textAlign="center"

          headerText="Width x Height"

          [validationRules]="dimensionsRequiredRule"

        >

          <ng-template #template let-item

            >{{ item.dimensions.width }} x

            {{ item.dimensions.height }}</ng-template

          >

          <ng-template #editTemplate let-item>

            <input name="width" [(ngModel)]="item.dimensions.width" />

            x

            <input name="height" [(ngModel)]="item.dimensions.height" />

          </ng-template>

        </e-column>

      </e-columns>

    </ejs-treegrid>

  </div>

</div>

As you can see, I have added two rules:

1. nameRequiredRule
   
2.  dimensionsRequiredRule 

Regarding name requirement rule, it is trivial. However, with dimensions requirement it is complex, and makes me wonder if Syncfusion Angular is even able to support such use cases. The problem here is that I am unable to provide any reasonable rule that would allow me to achieve the following:

1. Make sure width is set and is in correct range. If width is not set, I would like the user to show the following message: "Width must be set". In case it is set, but the range is not correct (for instance, it is not in the range from 0 to 1000 inclusive), then I would like to show the following message: "Width must be from 0 to 1000".
2.  Make sure height is set and is in correct range. If height is not set, I would like the user to show the following message: "Height must be set". In case it is set, but the range is not correct (for instance, it is not in the range from 0 to 1000 inclusive), then I would like to show the following message: "Height must be from 0 to 1000".
3. In case both width and height are not set, I would like to show the following: "Both width and height must be set." In case both values do not fit in the range, then the following message should be shown: "Both width and height must be in the range from 0 to 1000."

When I try to set that dimensions should be required, then on save I get the following error: "Error: this.inputElement is null". As far as I understand, Syncfusion is unable to deduce any field that would be "dimensions". But I can not provide any such field, since "dimensions" is not a primitive type, thus it is the reason why I use edit template for two values. And I need these two values to be in a single column, since they are not separate contextually (as validation requirements mentioned show this).

So, to sum it all up, my questions would be the following:

1. Is it possible to achieve the result described using the Syncfusion + Angular + TreeGrid? TreeGrid here is a necessity, since it is necessary to keep the cell edit mode for our use case.
2. Could you provide an example that implements the result described?

Finally, you may use the following code which includes also the sample I have described in this post: https://stackblitz.com/edit/angular-dtah5k-zftrim . Feel free to use it and modify. Thank you for your help in advance.

[Farveen Sulthana Thameeztheen Basha]

Hi Customer,

Greetings from Syncfusion.

From your shared details we suspect that you need to apply custom validation rules for Width and Height (Dimensions) while on Editing. To achieve this, we have perform Validation using CustomValidation rules feature available in TreeGrid. With this we can define our own custom rules.

Refer to the documentation link:- https://ej2.syncfusion.com/angular/documentation/treegrid/editing/validation#custom-validation

Refer to the code below:-

App.Component.html:-

 

  <ejs-treegrid

      #itemsGrid

      id="itemsGrid"

      [treeColumnIndex]="1"

      [dataSource]="items"

      [toolbar]="itemsToolbar"

      [editSettings]="itemsEditSettings"

      [allowPaging]="true"

      [pageSettings]="{ pageSize: 10 }"

      [allowSorting]="true"

      [allowTextWrap]="true"

      [textWrapSettings]="{ wrapMode: 'Header' }"

      [allowSelection]="true"

      (actionBegin)="actionBegin($event)"

    >

      <e-columns>

        </e-column>

        <e-column

          field="width"

          width="100"

          headerTextAlign="center"

          textAlign="center"

          headerText="Height"

          [validationRules]="customrulewidth"

        >

        </e-column>

        <e-column

          field="height"

          width="100"

          headerTextAlign="center"

          textAlign="center"

          headerText="Height"

          [validationRules]="customrule"

        >

        </e-column>

</e-columns>

 

App.Component.ts:-

 

    public customFnWidth(args)

    {

        if (args.value > 0 && args.value < 1000)

        {

            return true;

        }

    }

 

  public ngOnInit() : void {

   

    this.itemsToolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];

    this.customrulewidth = {required: true, minLength: [

    this.customFnWidth,

    'value width must be within range [0,1000]',

      ],

    };

    this.customrule = {

    required: true,

      minLength: [this.customFn, 'value height must be within range [0,1000]'],

    };

   

  }

 

Modified Sample link:- https://stackblitz.com/edit/angular-dtah5k-934f3n?file=app.component.html

Screenshot:-

Note:- For display purpose, you can use both height and width under same column using template.

For more reference:- https://ej2.syncfusion.com/angular/documentation/grid/editing/validation#custom-validation-based-on-dropdown-change

https://ej2.syncfusion.com/documentation/form-validator/validation-rules/

If we misunderstood your query or your requirement is different from above, share more details to proceed further.

Regards,

Farveen sulthana T