pass row data into validation rule

[hai shi tan]

Is there a way to pass  typeCodeRule with selected row data, I need the id value to check unique



<template>
    <div class="col-lg-12 control-section">
        <GridComponent
            ref="grid"
            :dataSource="data"
            allowPaging="true"
            :pageSettings="pageSettings"
            allowSorting="true"
            allowFiltering="true"
            :filterSettings="filterSettings"
            :editSettings="editSettings"
            :toolbar="toolbar"
            :actionComplete="actionComplete"
            :actionBegin="actionBegin"
            :rowDataBound="rowDataBound"
        >
            <ColumnsDirective>
                <ColumnDirective headerText="S.No" width="90" textAlign="Center"></ColumnDirective>
                <ColumnDirective field="id" headerText="ID" width="120" textAlign="Right" isPrimaryKey="true" isIdentity="true" isReadOnly="true"></ColumnDirective>
                <ColumnDirective field="code" headerText="Code" width="120" :validationRules="typeCodeRule" :editTemplate="'codeEditTemplate'"></ColumnDirective>
                <template v-slot:codeEditTemplate="{ data }">
                    <div v-if="data && data.code !== undefined">
                        <TextBoxComponent id="code" :value="data.code"></TextBoxComponent>
                    </div>
                </template>

...
const typeCodeRule = ref({
    required: true,
    unique: [
        (args: any) => {
            console.debug('argssssssssssssssssssss', args, args.rowData?.id, args.data, args?.record);
            const currentRecordId = args.rowData?.id;
            const isDuplicate = data.value.some((item: any) => item.id !== currentRecordId && item.code.toUpperCase() === args.value.toUpperCase());
            console.debug('isDuplicate', !isDuplicate);
            return !isDuplicate; // Return an object with a `message` property
        },
        'Code must be unique',
    ],
});

[Vasanthakumar K]

Hi hai shi tan,

Greetings from Syncfusion support.

Query: Is there a way to pass typeCodeRule with selected row data? I need the ID value to check uniqueness.

Yes, you can achieve this by using the grid's editModule arguments of the actionBegin and actionComplete events. These events arguments allow you to access the selected row data (or the row being edited) through the args.rowData property.

In the specific case of validating uniqueness, you can use the rowData field (e.g., OrderID) during the beginEdit action to check whether the new value being entered already exists in the grid's data source. The validation can be applied using a custom rule.

How It Works:

1. When editing begins, the rowData of the selected row is accessible via the editModule.
2. Use this rowData to compare the value being entered with the rest of the rows in the grid.
3. If the value already exists (except for the current row), the validation fails, and a message prompts the user to enter a unique value.

Example Scenarios:

• For numeric fields like OrderID, you can write a min rule to ensure no duplicate values exist.
• Similarly, for text fields, you can enforce rules like minLength or uniqueness based on your requirements.

For more details and sample implementations, you can refer to these resources:

• Custom Validation: Explains how to add custom rules for grid editing.
• Dynamic Add/Remove Validation: Shows how to dynamically apply rules based on conditions.

We have also prepared a working sample to demonstrate this:

Sample: 195639-duplicate-id-validation - StackBlitz

Below is an example of how you can achieve this:

<ejs-grid ref='grid' :dataSource="data" :allowPaging='true' :pageSettings='pageSettings' :allowSorting='true' :allowFiltering='true' :filterSettings='filterSettings' :editSettings='editSettings' :toolbar='toolbar' :actionBegin="actionBegin">

        <e-columns>

                <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' :validationRules='orderidrules'></e-column>

                . . . . . .

        </e-columns>

</ejs-grid>

 

data: function() {

    return {

      . . . . .

      orderidrules: {

        required: true,

        min: [

          ((args) => {

            return this.$refs.grid.dataSource.every((data) => {

              return data['OrderID'] + '' !== args['value'] || data['OrderID'] === this.$refs.grid.ej2Instances.editModule.editModule.args.rowData['OrderID']

            });

          }).bind(this),

          'The entered value already exists in the primary key column OrderID. Please enter a unique value.'

        ]

      },

      customeridrules: { required: true, minLength: 5 },

      freightrules:  { required: true, min: 0 },

      toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],

    };

},

Regards,

Vasanthakumar K