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

Grid Popup Validation with AngularJS

1 Answer 85 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Christoph
Top achievements
Rank 1
Christoph asked on 23 Sep 2015, 03:43 PM

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

1 Answer, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 28 Sep 2015, 07:51 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Christoph
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Share this question
or