How to add validations to columns with custom-template and restrict user from adding row to grid

[Sandeep G]

Hi Team,

I have custom-template for few columns, where I want to add validation to notify user and restrict saving row.

I have added an sample example, Where I want to restrict user from saving row if SalesPrice is equal to zero or null. I am using ItemPriceEditTemplate for this column. How to add validation for the same and show validation message below the column and also in alert()

Regards,
Sandeep G

Attachment: IssueWithInlineEdit_bd9b25ce.zip

[Rajapandiyan Settu]

Hi Sandeep, 

 

Thanks for contacting Syncfusion support. 

 

Based on your requirement you want to validate the column before the saving the record. You can achieve this by using validationRules property of Column Model. Refer to the below documentation for more information. 

 

Column validation: https://ej2.syncfusion.com/vue/documentation/grid/edit/#column-validation 

Custom validation: https://ej2.syncfusion.com/vue/documentation/grid/edit/#custom-validation 

 

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

 

[app.component.html] 

 

 

<template> 

  <div id="app"> 

    <ejs-grid 

      :dataSource="dataGrid" 

      --- 

    > 

      <e-columns> 

        <e-column 

          field="ItemCode" 

          headerText="Item Code" 

          :isPrimaryKey='true'  

          :editTemplate="itemCodeTemplate" 

          minWidth="150" 

          width="200" 

          maxWidth="300" 

          textAlign="center" 

          :validationRules='requiredValidation' 

        ></e-column> 

        <e-column 

          minWidth="105" 

          width="105" 

          maxWidth="150" 

          field="SalesPrice" 

          headerText="Item Price" 

          textAlign="center" 

          :template="ItemPriceViewTemplate" 

          :editTemplate="ItemPriceEditTemplate" 

          :validationRules='SalesPriceValidation' 

        ></e-column> 

       ---- 

      </e-columns> 

    </ejs-grid> 

  </div> 

</template> 

 

<script> 

--- 

export default { 

  name: "App", 

  data() { 

    return { 

      --- 

      requiredValidation: { required: true }, 

      SalesPriceValidation: { required: true, number: true, min:1 }, 

    }; 

  }, 

}; 

</script> 

 

 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/IssueWithInlineEdit464533369.zip 

 

Please get back to us if you need further assistance with this. 

 

Regards, 

Rajapandiyan S