Validation - CheckBox compare

[Prasanth]

Hi there,

With custom validation is there a way to compare values of two checkboxes (EditingType.Boolean) on two columns to ensure both check boxes aren't selected on each rows.

The Grid is batch update 

        .Datasource(ds => ds.URL("DataSource").BatchURL("Update").Adaptor(AdaptorType.UrlAdaptor))

Regards

Prasanth

[Seeni Sakthi Kumar Seeni Raj]

Hi Prasanth,

To compare two Boolean columns and to validate them, please refer the following code example.

@(Html.EJ().Grid<object>("HierarchyGrid")

            .Datasource(ds => ds.URL("DataSource").BatchURL("Update").Adaptor(AdaptorType.UrlAdaptor))

             . . . . .

            .ToolbarSettings(toolbar =>

            {

                 . .. . .

            })

            .Columns(col =>

            {

                 ,. . . . .. .

                col.Field("Verified1").ValidationRules(rule => rule.AddRule("customCompare1", new List<object>() { "checked" })).EditType(EditingType.Boolean).Add();

                col.Field("Verified2").ValidationRules(rule => rule.AddRule("customCompare2", new List<object>() { "checked" })).EditType(EditingType.Boolean).Add();

            })

)

<script>

    $(function () {

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

            if (!$(element).parents("tr").find(".e-boolrowcell:eq(1)").is(":checked"))

                return !$(element).is(":checked")//Returns true, only if the second and and first boolean column also false

        }, "Either Verified1 or Verified2 will be checked");

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

            if (!$(element).parents("tr").find(".e-boolrowcell:eq(0)").is(":checked"))

                return !$(element).is(":checked")//Returns true, only if the second and and first boolean column also false

        }, "Either Verified1 or Verified2 will be checked");

    });

</script>

In the above code example, we have taken two custom validation for each Boolean columns. In the validator method, we have compared the values of each column.

Refer to the online demo and Help Document for custom Validation.

http://mvc.syncfusion.com/demos/web/grid/customvalidation

http://help.syncfusion.com/aspnetmvc/grid/editing#custom-validation

Regards,
Seeni Sakthi Kumar S.

[Prasanth]

Hi Seeni,

Thanks for the reply, I tried to copy paste the code (modified as per my requirement).  Having trouble with the code segment.  I seems to lose the grid data, possibly syntax error in the javascript?

Would you be able to attach the sample project which I can use it to get mine going?

Regards

Prasanth

[Prasanth]

Hi Seeni,

I just wrapped the javascript with try catch and I got the following error message

TypeError: Cannot read property 'addMethod' of undefined

$(function () {

        try {

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

                //if (!$(element).parents("tr").find(".e-boolrowcell:eq(1)").is(":checked"))

                //    return !$(element).is(":checked");//Returns true, only if the second and and first boolean column also false

                return true;

            }, "Either Verified1 or Verified2 will be checked");

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

                // if (!$(element).parents("tr").find(".e-boolrowcell:eq(0)").is(":checked"))

                //    return !$(element).is(":checked");//Returns true, only if the second and and first boolean column also false

                return true;

            }, "Either Verified1 or Verified2 will be checked");

        } catch (e) {

            alert(e);

        }

    });

Regards

Prasanth

[Prasanth]

Hi Seeni,

Found the problem, I just had to load the necessary js files

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>

    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>

Seems to have sorted the error message

However to ensure that only one check box can be ticked at a time in a row (not both at the same time) what would be the javascript?  I have tried to change the sample (which ensures that no check box is checked) without any luck

Regards

Prasanth

[Seeni Sakthi Kumar Seeni Raj]

Hi Prasanth,

We have prepared a sample that can be downloaded from the following location.

Sample: http://www.syncfusion.com/downloads/support/forum/121677/ze/BatchEditing_validation-1690075277

In the sample, we have modified our solution as follows: this ensures that either one of the checkbox is checked. If the two checkbox is checked, it pop up a validation flag. Refer to the following code example.

@(Html.EJ().Grid<OrdersView>("BatchEditing")

        .Datasource(ds => ds.URL(@Url.Action("DataSource")).BatchURL(@Url.Action("UpdateBatch")).Adaptor(AdaptorType.UrlAdaptor))

         .. . .

        .Columns(col =>

        {

             . . . .

            col.Field("Verified1").ValidationRules(rule => rule.AddRule("customCompare1", new List<object>() { "checked" })).EditType(EditingType.Boolean).Add();

            col.Field("Verified2").ValidationRules(rule => rule.AddRule("customCompare2", new List<object>() { "checked" })).EditType(EditingType.Boolean).Add();

        })

)

<script>

    $(function () {

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

            if (!$(element).parents("tr").find(".e-boolrowcell:eq(1) input").is(":checked") || !$(element).is(":checked"))

                return true;//Returns true, only if the second and and first boolean column also false

        }, "Either Verified1 or Verified2 will be checked");

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

            if (!$(element).parents("tr").find(".e-boolrowcell:eq(0) input").is(":checked") || !$(element).is(":checked"))

                return true;//Returns true, only if the second and and first boolean column also false

        }, "Either Verified1 or Verified2 will be checked");

    });
</script>

Above code example will leaves the two checkboxes unchecked. If you do not want to leave the two checkboxes unchecked or checked at time, please refer the following code example (used XOR operation).

    $(function () {

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

            if (!$(element).parents("tr").find(".e-boolrowcell:eq(1) input").is(":checked") ^ !$(element).is(":checked"))

                return true;//Returns true, only if the second and and first boolean column also false

        }, "Either Verified1 or Verified2 will be checked");

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

            if (!$(element).parents("tr").find(".e-boolrowcell:eq(0) input").is(":checked") ^ !$(element).is(":checked"))

                return true;//Returns true, only if the second and and first boolean column also false

        }, "Either Verified1 or Verified2 will be checked");
    });

Regards,
Seeni Sakthi Kumar S.

[Prasanth]

Hi Seeni,

Thanks for the solution, I have got it working.  much appreciated

Regards

Prasanth

[Seeni Sakthi Kumar Seeni Raj]

Hi Prasanth,

We are happy to hear that your issue has been resolved.

Get back to us if you need further assistance.

Regards,

Seeni Sakthi Kumar S.