Editable Grid with custom validation rules

[Vesselin Obreshkov]

Hello,

I'm using Kendo for ASP.NET MVC but I have a grid defined using JavaScript syntax, however, I am struggling with defining a custom validation rule for my model that the grid is bound to.

Updated: After some research I found out my syntax issue with the rule definitions inside a grid, however, now I'm struggling with one of my validation rules. Basically I have 2 IP addresses that can be edited one row at a time. I have 2 custom validation rules defined, one that verifies that the IP is valid and the second one verifies that the two IP's are a valid range. The logic in this sample doesn't do as extensive validation at the moment. All I do is convert the dot notation of the IP's into their Int64 value and make sure that StartIP <= EndIP. The problem I'm facing now is that the second validation rule never works for me and I am unsure how I can even debug it. I assume due to the way the validation rules are evaluated, console.log or writing output to a dummy console div on the page does not work so I can't verify the values that are coming in.

Any help would be greatly appreciated.

var companyId = parseInt(@ViewBag.CompanyID);

 

var dataSource = new kendo.data.DataSource({

    type: 'aspnetmvc-ajax',

    transport: {                   

        create: {

            url: '@Url.Action("CreateHost", "Security", new { area = "" })',

            dataType: 'json'

        },

        read: {

            url: '@Url.Action("GetHosts", "Security", new { area = "" })',     

            data: {

                companyId: companyId

            },

            dataType: 'json',

            type: 'GET'

        },

        update: {

            url: '@Url.Action("UpdateHost", "Security", new { area = "" })',

            dataType: 'json'

        },

        destroy: {

            url: '@Url.Action("DeleteHost", "Security", new { area = "" })',

            dataType: 'json'

        }

    },

    schema: {

        model: {

            id: 'HostID',

            fields: {

                HostID: {

                    type: 'number',

                    editable: false

                },

                StartIP: {

                    type: 'string',

                    editable: true,

                    validation: {

                        required: {

                            message: 'Start IP is required'

                        },

                        validIP: function (input1) {

                            input1.attr('data-validIP-msg', 'Invalid IP address');

                            return ipRegEx.test(input1.val());

                        },

                        validIPRange: function (input1) {                      

                            if (input1.is('input[id=StartIP]')) {

                                input1.attr('data-validIPRange-msg', 'Start IP must be smaller than End IP');

 

                                var input2 = input1.closest('input[id=EndIP]');

 

                                var d1 = input1.val().split('.');

                                var d2 = input2.val().split('.');

 

                                var n1 = ((((((+d1[0]) * 256) + (+d1[1])) * 256) + (+d1[2])) * 256) + (+d1[3]);

                                var n2 = ((((((+d2[0]) * 256) + (+d2[1])) * 256) + (+d2[2])) * 256) + (+d2[3]);

 

                                return n1 >= n2;

                            }

                            return true;

                        }

                    }

                },

                EndIP: {

                    type: 'string',

                    editable: true,

                    validation: {

                        required: {

                            message: 'End IP is required'

                        },

                        validIP: function (input2) {

                            input2.attr('data-validIP-msg', 'Invalid IP address');

                            return ipRegEx.test(input2.val());

                        },

                        validIPRange: function (input2) {                                                          

                            if (input2.is('input[id=EndIP]')) {

                                input2.attr('data-validIPRange-msg', 'End IP must be greater than Start IP');

 

                                var input1 = input2.closest('input[id=StartIP]');

 

                                var d1 = input1.val().split('.');

                                var d2 = input2.val().split('.');

 

                                var n1 = ((((((+d1[0]) * 256) + (+d1[1])) * 256) + (+d1[2])) * 256) + (+d1[3]);

                                var n2 = ((((((+d2[0]) * 256) + (+d2[1])) * 256) + (+d2[2])) * 256) + (+d2[3]);

 

                                return n1 >= n2;

                            }

                            return true;

                        }

                    }

                },

                StatusID: {

                    type: 'number',

                    editable: false,

                    defaultValue: 3

                },

                CreatedOn: {

                    type: 'date',

                    editable: false,

                    defaultValue: new Date()

                }

            }

        },

        data: 'Data',

        total: 'Total'

    },

    batch: false,

    pageSize: 30,

    serverPaging: true,

    serverFiltering: true,

    serverSorting: true

});

 

var grid = $('#HostsGrid').kendoGrid({

    dataSource: dataSource,

    toolbar: ['create'],

    columns: [

        { field: 'StatusID', title: 'Status', editable: false, filterable: false, sortable: true, template: '#= formatStatus(StatusID, true, "html") #', width: 97 },

        { field: 'StartIP', title: 'Start IP', editable: true, filterable: false, sortable: false },

        { field: 'EndIP', title: 'End IP', editable: true, filterable: false, sortable: false },               

        { field: 'CreatedOn', title: 'Added On', editable: false, filterable: true, sortable: true, format: '{0:MM/dd/yyyy hh:mm tt}', width: 150 },

        { command: ["edit", "destroy"], title: ' ', width: 200 },             

    ],

    columnMenu: true,

    editable: 'inline',

    height: 250,

    filterable: true,

    pageable: {

        // Disable traditional paging, we are using virtual scrolling (which does the paging)

        previousNext: false,

        numeric: false,

 

        // Show the refresh button in the pager

        refresh: true

    },

    scrollable: {

        virtual: true

    },

    sortable: true     

});

[Vesselin Obreshkov]

Figured out my own problem. Basically the selectors I was using to verify my input was coming from the correct control weren't working.

Here's my updated, working validation rules:

validIP: function (input2) {

    if (input2.is('input[data-bind="value:EndIP"]')) {

        input2.attr('data-validIP-msg', 'Invalid IP address');

        return ipRegEx.test(input2.val());

    }

    return true;

},

validIPRange: function (input2) {

    if (input2.is('input[data-bind="value:EndIP"]')) {

        input2.attr('data-validIPRange-msg', 'End IP must be greater than Start IP');

 

        var input1 = $('input[data-bind="value:StartIP"]');

 

        var d1 = input1.val().split('.');

        var d2 = input2.val().split('.');

                                         

        return ((d1[0] == d2[0]) && (d1[1] == d2[1]) && (d1[2] == d2[2]) && (d1[3] <= d2[3]));                                     

    }

    return true;

}