How do I compare two column using ValidationRule in Grid

[Yukiko Imazu]

Hello,

I want to compare two column in a same row using validationRule in ej:grid.

How do I implement this?

For example, there's a startDate and endDate column in a grid.  When editing, if startDate > endDate, I want to show validation message.

$.validator.addMethod("customDate", function (value, element, params) {

     // how do I get next column in the same row in ej:grid?

}

        <ej:Column Field="startDate" Format="{0:dd/MM/yyyy}" HeaderText="start date" Width="190px" EditType="DatePicker" >
                <ValidationRule>
                    <ej:KeyValue Key="customDate" Value=""/>
                </ValidationRule>
            </ej:Column>

            <ej:Column Field="endDate" Format="{0:dd/MM/yyyy}" HeaderText="end date" Width="190px" EditType="DatePicker" >
                <ValidationRule>
                    <ej:KeyValue Key="customDate" Value=""/>
                </ValidationRule>
            </ej:Column>

I attach screenshot.

Thanks,

Yukiko

Attachment: compare_1fa6ec9a.7z

[Seeni Sakthi Kumar Seeni Raj]

Hi Yukiko, 

 

Thanks for contacting Syncfusion Support.  

 

<ej:Grid ID="Grid1" AllowPaging="True" runat="server"> 

            <Columns> 

                <ej:Column Field="OrderID" IsPrimaryKey="true"  Width="100" > 

                </ej:Column> 

                <ej:Column Field="startDate" Format="{0:dd/MM/yyyy}" HeaderText="start date" Width="190px" EditType="DatePicker" > 

                   <ValidationRule> 

                       <ej:KeyValue Key="customDate" Value="value"/> 

                   </ValidationRule> 

                </ej:Column> 

                <ej:Column Field="endDate" Format="{0:dd/MM/yyyy}" HeaderText="end date" Width="190px" EditType="DatePicker" > 

                   <ValidationRule> 

                       <ej:KeyValue Key="customDate" Value="value"/> 

                   </ValidationRule> 

                </ej:Column> 

           </Columns> 

        </ej:Grid> 

    </div> 

  <script type="text/javascript"> 

               $(function () { 

                    $.validator.addMethod("customDate", function (value, element, params) { 

                        var startval =  $("#MainContent_Grid1startDate").val(); 

                        var endval = $("#MainContent_Grid1endDate").val();  

                        startDate = new Date(startval); 

                        endDate = new Date(endval); 

                        return (startDate) < (endDate)  

                       }, "Start Date must be less than End Date");  

               }); 

          </script> 

 

Sample link, 

 

http://www.syncfusion.com/downloads/support/directtrac/general/7z/customValidation-211570301.7z  

 

Refer to the following Help Document and showcase demo, 

 

https://help.syncfusion.com/aspnet/grid/editing#column-validation  

http://asp.syncfusion.com/demos/web/grid/customvalidation.aspx  

 

Regards, 

Seeni Sakthi Kumar S. 

[Yukiko Imazu]

Hi Seeni Sakthi,

Thank you for replying.

I tried to run the sample that you attached.

When I typed 30/12/2014 for start date and 31/12/2014 for end date, it doesn't work properly.

I realized in addMethod function, start date gives  Invalid Date.

ej:grid Format="{0:dd/MM/yyyy}"

It seems like date and month is not the same order that set as Format in ej:grid in jquery function.

Is there any good way to fix this?  I need to use format="{0:dd/MM/yyyy}" as requirement in grid.

Thank you,

Yukiko

[Seeni Sakthi Kumar Seeni Raj]

Hi Yukiko,  

 

We can reproduce the reported problem when we convert the “dd/MM/yyyy” formatted date into date object and it becomes invalid. Due to this the validation is not working. To overcome this, we have retrieved selected dates from ejDatePicker model by creating its instance. Refer to the following code example. 

 

<ej:Grid ID="Grid1" AllowPaging="True" runat="server"> 

            <Columns> 

                <ej:Column Field="OrderID" IsPrimaryKey="true"  Width="100" > 

                </ej:Column> 

                <ej:Column Field="startDate" Format="{0:dd/MM/yyyy}" HeaderText="start date" Width="190px" EditType="DatePicker" > 

                   <ValidationRule> 

                       <ej:KeyValue Key="customDate" Value="value"/> 

                   </ValidationRule> 

                </ej:Column> 

                <ej:Column Field="endDate" Format="{0:dd/MM/yyyy}" HeaderText="end date" Width="190px" EditType="DatePicker" > 

                   <ValidationRule> 

                       <ej:KeyValue Key="customDate" Value="value"/> 

                   </ValidationRule> 

                </ej:Column> 

                <ej:Column Field="ShipCity" HeaderText="Ship City" Width="100" /> 

            </Columns> 

        </ej:Grid> 

    </div> 

  <script type="text/javascript"> 

      $(function () { 

                    $.validator.addMethod("customDate", function (value, element, params) { 

                        var startval = $("#MainContent_Grid1startDate").ejDatePicker("instance") 

                        var endval = $("#MainContent_Grid1endDate").ejDatePicker("instance")  

                        var startDate = startval.model.value; 

                        var endDate = endval.model.value; 

                              return startDate < endDate  

                       }, "Start Date must be less than End Date");  

               }); 

  </script> 

     

 

Please refer to the documentation Link:- 

https://help.syncfusion.com/api/js/ejdatepicker#members:value 

 

Refer the below link for sample, 

http://www.syncfusion.com/downloads/support/directtrac/general/7z/customValidation1753218444.7z  

 

Regards,  

Seeni Sakthi Kumar S. 

[Yukiko Imazu]

Hi Seeni Sakthi Kumar,

It worked.

Thank you for your help.

Best Regards,

Yukiko

[Seeni Sakthi Kumar Seeni Raj]

Hi Yukiko,  

 

Thanks for the update.  

 

We are happy to hear your requirement has been achieved. Please get back to us, if you require further assistance on this. 

 

Regards,  

Seeni Sakthi Kumar S.