Grid Popup Validation with AngularJS

[Christoph]

Hy,

i cant find the best way to validate dependent fields within the popup dialog from Kendo.

Here are my grid options:

 

$scope.gridOptions = {
    dataSource: data,
    selectable: "row",
    language : $translate.use(),
    pageable: true,
    editable: {
        mode: "popup",
        template: kendo.template($("#orderEditTemplate").html())
    },
    save: function(e) {
        if(e.model.OrderStateId == 9) {
            if(!e.model.ErrorReason) {

                $scope.error = "Reason!!!";

                e.preventDefault();
            }
        }
    },
    columns: [
        {
            field: "CreatedOn",
            title: $translate.instant("ADMIN.ORDERS.GRID.CREATEDON"),
            template: "#= moment(CreatedOn).format('L LT') #"
        },
        {
            field : 'TotalAmount',
            template : "{{ dataItem.TotalAmount | ccurrency:dataItem.Currency }}",
            title: $translate.instant("ADMIN.ORDERS.GRID.TOTALAMOUNT")
        },
        {
            field: "Description",
            title: $translate.instant("ADMIN.ORDERS.GRID.DESCRIPTION")
        },
        {
            field: "OrderStateId",
            title: $translate.instant("ADMIN.ORDERS.GRID.STATUS"),
            template : '{{ dataItem.OrderStateId | orderStatus }}'
        },
        {
            command: "edit",
            title: " ",
            width: "100px"
        }
    ]
};

 This is my Popup Template:

<script type="text/x-kendo-template" id="orderEditTemplate">
    <div>

        <div class="alert alert-danger" ng-show="error">
            {{error}}
        </div>

        <div class="form-group">
            <label>PaymentState</label>
            <select kendo-drop-down-list k-on-change="dataItem.dirty=true" k-data-text-field="'Text'" k-data-value-field="'Value'" k-data-source="orderStates" ng-model="dataItem.OrderStateId"></select>
        </div>
        <div class="form-group" ng-show="dataItem.OrderStateId == 9">
            <label>Reason:</label>
            <textarea class="form-control" rows="3" ng-model="dataItem.ErrorReason"></textarea>
        </div>
    </div>
</script>

 

What i woud like to to is. If the OrderStateId is set to 9, the ErrorReason field is required. If the OrderStateId is set the anything else, your good to go without ErrorReason. My Problem ist that my error-Alert in the Popup is never going to be displayed. I don't know why, but could it be possible that inside the popup its a different scope?

 What is the best way with Kendo and Angular to Validate such things?

 

Best Regards

Dominik

[Vladimir Iliev]

Hi Christoph,

This can be done by either setting custom validation rules in the dataSource "schema.model.fields.field.valdation" option or by extending the grid build-in validation rules. The demo for the first approach is available in the linked help article. For the second approach (extending the grid build-in validation rules) you can check the following example:

//the code should be placed before the grid is initialized
function ($, kendo) {
    //Extending the build in validator
    $.extend(true, kendo.ui.validator, {
        rules: {
            // custom rules
            custom: function (input, params) {
                //check if current input is the needed one as the
                //custom rules are executed against all editors in the edit form
                if (input.is("#LastSupply")) {
                    var datePicker = $(input).data("kendoDatePicker");
                    var max = datePicker.max();
                    var min = datePicker.min();
                    var currentInputDate = new Date(input.val());

                    if (min > currentInputDate || max < currentInputDate) {
                        //return false to signify validation error
                        return false;
                    }
                }
                //return true to signify validation success
                return true;
            }
        },
        messages: {
            //custom rules messages
            custom: function (input) {
                // return the message text
                return "Date out of range!";
            }
        }
    });
})(jQuery, kendo);

Regards,
Vladimir Iliev
Telerik