How can I implement cross field validation for inline editing?

[Legion Rempel]

I have a grid with inline editing. I have a field called BandMin and another called BandMax. I want to have a custom validator that checks that BandMin < BandMax. However, if I put the validator on BandMax I don't know how to get the value for BandMin.  I can get max from args.value but I can't figure out how to get min. It's always null.

  bandMaxRule(args: any): boolean {
    console.log(args);
    const rowElement = args.element.closest('tr');
    console.log(rowElement);

    const rowIndex = parseInt(rowElement.getAttribute('aria-rowindex'));
    console.log(rowIndex);

    const rowData = (this.pbGrid.dataSource as any[])[rowIndex];

    const min = rowData.BandMin;
    const max = args.value;
    console.log('min: ', min);
    console.log('max: ', max);

    return min == null || max > min;
  }

    <ejs-grid #PctBandsGrid id='PctBandsGrid'
              [dataSource]='pctBands$ | async'
              [allowPaging]="true"
              [pageSettings]="{ pageSize: 10, pageSizes: [5, 10, 25], pageCount: 5}"
              [allowSorting]='true'
              [editSettings]="editSettings"
              (commandClick)="onPctBandsGridCommandClick($event)"
              (dataBound)="onPctBandsGridDataBound()"
              (actionBegin)="onPctBandsGridActionBegin($event)"
              (actionComplete)="onPctBandsGridActionComplete($event)"
              height='auto'>
      <e-columns>
        <e-column headerText="" width="65" [commands]="commands"></e-column>
        <e-column field="Id" [allowEditing]="false" isPrimaryKey='true' visible="false" width="0">
        </e-column>
        <e-column field="BandMin"
                  headerText="Band Min"
                  [allowEditing]="true"
                  editType="NumericEdit"
                  [validationRules]="{ required: true, min: 0 }"
                  width="100"
                  textAlign="Right">
          <ng-template #template let-data>
            {{ data.BandMin | number: '1.2-2' }}
          </ng-template>
        </e-column>
        <e-column field="BandMax"
                  headerText="Band Max"
                  [allowEditing]="true"
                  editType="NumericEdit"
                  [validationRules]="{ required: true, min: 0 }"
                  width="100"
                  textAlign="Right">
          <ng-template #template let-data>
            {{ data.BandMax | number: '1.2-2' }}
          </ng-template>
        </e-column>
        <e-column field="DeferralPct"
                  headerText="Deferral %"
                  [allowEditing]="true"
                  editType="NumericEdit"
                  [validationRules]="{ required: true, min: 0, max: 1 }"
                  width="100"
                  textAlign="Right">
          <ng-template #template let-data>
            {{ data.DeferralPct | percent: '1.2-2' }}
          </ng-template>
        </e-column>
      </e-columns>
    </ejs-grid>

[Sivaranjani Rajasekaran]

Hi Legion Rempel,

Greetings from Syncfusion support!

To achieve your requirement, you can use a custom validation function along with the this.grid.editModule.getCurrentEditedData method. By passing the current row element, you can retrieve the edited row data and perform the validation based on that information.

We have prepared a sample demonstrating this approach. In the sample, we apply custom validation on the BandMax column. Inside the custom validation function, we compare whether BandMin < BandMax. If the condition is true, the validation passes; otherwise, we display the message “BandMax must be greater than BandMin.”

Please refer to the code below for more information:

Code example : 

 <e-column

        field="BandMax"

        headerText="Band Max"

        [allowEditing]="true"

        editType="NumericEdit"

        [validationRules]="bandmaxRules"

        width="100"

        textAlign="Right"

      > 

 this.bandmaxRules = {

      required: true,

      greaterThanBandMin: [

        this.customFn,

        'BandMax must be greater than BandMin',

      ], // Custom key

    };

  }

    };

public customFn = (args: any): boolean => {

    const currentRow = args.element.closest('tr');

    const currentRowData: any = this.grid.editModule.getCurrentEditedData(

      currentRow,

      {}

    );

    const bandMin = currentRowData.BandMin;

    const bandMax = currentRowData.BandMax;

    // Check if BandMin is less than BandMax

    return bandMin < bandMax;

  };

GIF : 

Sample Link : https://stackblitz.com/edit/angular-mlzxnxrk?file=src%2Fapp.component.ts

Please let us know if you need any further assistance!

Regards,

Sivaranjani R