Treegrid Numeric Selector

Hi,

I want to limit the input for this column from 0 to 5 only

  <ej:TreeGridColumn Field="DataElement" HeaderText="Data Element" EditType="Numeric" FilterEditType="Numeric">
                        <ValidationRule>
                            <ej:KeyValue Key="0" Value="0" />
                            <ej:KeyValue Key="1" Value="1" />
                            <ej:KeyValue Key="2" Value="2" />
                            <ej:KeyValue Key="3" Value="3" />
                            <ej:KeyValue Key="4" Value="4" />
                            <ej:KeyValue Key="5" Value="5" />
                        </ValidationRule>
    </ej:TreeGridColumn>


But the code above doesn't limit the input I can still input any number?

David



1 Reply

PE Punniyamoorthi Elangovan Syncfusion Team March 15, 2018 03:14 PM UTC

Hi David, 
Thank you for contacting Syncfusion support. 
We have analyzed your code snippet and requirement. The validation syntax was not properly included in your application. Please refer the below code snippet to achieve your requirement, we have included a custom validator for limiting the cell values. 
<ej:TreeGrid runat="server" ID="TreeGrid" IdMapping="Id" ParentIdMapping="ParentId" 
//.. 
  <Columns> 
     <ej:TreeGridColumn HeaderText="Progress" Field="PercentDone" EditType="Numeric"> 
                    <ValidationRule> 
                        <ej:KeyValue Key="customCompare" Value="[-1,6]" /> 
                        <ej:KeyValue Key="required" Value="true" /> 
                    </ValidationRule> 
                </ej:TreeGridColumn> 
  </Columns> 
</ej:TreeGrid> 
 
<script type="text/javascript"> 
         $.validator.addMethod("customCompare", function (value, element, params) { 
             return element.value > params[0] && element.value < params[1] 
         }, "Progress value must be between 0 and 5"); 
 
 
     </script> 
 
We have prepared the sample for column validation with your requirement please refer this 
 
Regards, 
Punniyamoorthi 


Loader.
Up arrow icon