We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Validation - CheckBox compare

Thread ID:

Created:

Updated:

Platform:

Replies:

121677 Jan 15,2016 01:01 PM UTC Jan 20,2016 04:09 AM UTC ASP.NET MVC 7
loading
Tags: Grid
Prasanth
Asked On January 15, 2016 01:01 PM UTC

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 [Syncfusion]
Replied On January 18, 2016 06:29 AM UTC

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
Replied On January 18, 2016 09:54 AM UTC

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
Replied On January 18, 2016 10:13 AM UTC

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
Replied On January 18, 2016 11:00 AM UTC

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 [Syncfusion]
Replied On January 19, 2016 07:30 AM UTC

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
Replied On January 19, 2016 10:03 AM UTC

Hi Seeni,

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

Regards
Prasanth

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On January 20, 2016 04:09 AM UTC

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.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;