Editable Grid with custom validation rules

2 posts, 0 answers
  1. Vesselin Obreshkov
    Vesselin Obreshkov avatar
    81 posts
    Member since:
    Jan 2010

    Posted 10 Dec 2012 Link to this post

    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     
    });
  2. Vesselin Obreshkov
    Vesselin Obreshkov avatar
    81 posts
    Member since:
    Jan 2010

    Posted 11 Dec 2012 Link to this post

    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;
    }
  3. Kendo UI is VS 2017 Ready
Back to Top