MinValue Depedant on other column in grid.

Hi, I have 2 columns Min and max values. how can i set validation so that MaxPoint column is alwasy grater then MinPoint.

    <e-grid-column field="MinPoint" headerText="Min Point" width="150" defaultValue="0" edit="@(new
                                               {
                                                   @params = new Syncfusion.EJ2.Inputs.NumericTextBox()
                                                   {
                                                       ValidateDecimalOnType = true,
                                                       Decimals = 0,
                                                       Format = "N"
                                                   }
                                               })" editType="numericedit" validationRules="@(new { required=true})"></e-grid-column>
                <e-grid-column field="MaxPoint" headerText="Max Point" defaultValue="10" editType="numericedit" edit="@(new
                                               {
                                                   @params = new Syncfusion.EJ2.Inputs.NumericTextBox()
                                                   {
                                                       ValidateDecimalOnType = true,
                                                       Decimals = 0,
                                                       Format = "N"
                                                   }
                                               })" width="150" validationRules="@(new { required=true})"></e-grid-column>

1 Reply 1 reply marked as answer

SM Shalini Maragathavel Syncfusion Team March 8, 2021 01:21 PM UTC

Hi Sandip, 

Thanks for contacting Syncfusion support. 

Based on your query we found that you want to set the max value validation for a column based on another column value. You can achieve your requirement using custom validation functionality of Grid as demonstrated in the below code snippet,

index.cshtml 
<ejs-grid id="Grid" dataSource="ViewBag.dataSource" allowPaging="true"   load="onLoad"   toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 
    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings> 
    <e-grid-columns> 
        <e-grid-column field="EmployeeID" headerText="MINVAL" defaultValue="0"  editType="numericedit" validationRules="@(new { required=true})" textAlign="Right" width="120"></e-grid-column> 
        <e-grid-column field="Freight" headerText="MAXVAL" format="N" defaultValue="10" editType="numericedit" textAlign="Right" width="120"></e-grid-column> 
 
    </e-grid-columns> 
 
</ejs-grid> 
<script> 
    function onLoad() { 
        this.columns[2].validationRules = { required: true, valueCompare: [customFn, 'MAXVAL should be greater than MINVAL'] }; 
    } 
    function customFn(args) { 
        var gridObj = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 
        var form = ej.grids.parentsUntil(args.element, 'e-gridform');  
        var cusData = gridObj.editModule.getCurrentEditedData(form, {}); 
        var EmpID = cusData.EmployeeID; 
        return parseInt(args.value) > EmpID; 
    }; 
   
     
</script>  
Please get back to us, if you need further assistance .  

Regards, 
Shalini M. 



Marked as answer
Loader.
Up arrow icon