This is a migrated thread and some comments may be shown as answers.

Editable Grid with custom validation rules

1 Answer 613 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
Vesselin Obreshkov
Top achievements
Rank 2
Vesselin Obreshkov asked on 10 Dec 2012, 08:33 PM
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     
});

1 Answer, 1 is accepted

Sort by
0
Vesselin Obreshkov
Top achievements
Rank 2
answered on 11 Dec 2012, 04:36 PM
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;
}
Tags
Data Source
Asked by
Vesselin Obreshkov
Top achievements
Rank 2
Answers by
Vesselin Obreshkov
Top achievements
Rank 2
Share this question
or