This is a migrated thread and some comments may be shown as answers.
required validation on condition
2 Answers 167 Views
This is a migrated thread and some comments may be shown as answers.
Vadim
Top achievements
Rank 1
Vadim asked on 29 Nov 2017, 05:08 AM

HI,

I need to validate Model field as required only if models datasource has items. If var models = [ ] - I don't need to validate.

Thank you for your help.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>how to make required field on condition</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="grid"></div>
<script>
    // array of all brands
    var brands = [
        { brandId: 1, name: "Ford" },
        { brandId: 2, name: "BMW" }
    ];

    // array of all models
    var models = [
        { modelId: 1, name: "Explorer", brandId: 1},
        { modelId: 2, name: "Focus", brandId: 1},
        { modelId: 3, name: "X3", brandId: 2},
        { modelId: 4, name: "X5", brandId: 2}
    ];

    $("#grid").kendoGrid({
        dataSource: {
            data: [
                { id: 1, brandId: 1, modelId: "" } // initial data item (Ford, Focus)
            ],
            schema: {
                model: {
                    id: "id",
                    fields: {
                        id: { editable: false } // the id field is not editable
                    }
                }
            }
        },
        editable: "inline", // use inline mode so both dropdownlists are visible (required for cascading)
        columns: [
        { field: "id" },
        {
            // the brandId column
            title: "Brand",
            field: "brandId", // bound to the brandId field
            template: "#= brandName(brandId) #", // the template shows the name corresponding to the brandId field
            editor: function(container) { // use a dropdownlist as an editor
                // create an input element with id and name set as the bound field (brandId)
                var input = $('<input id="brandId" required name="brandId">');
                // append to the editor container
                input.appendTo(container);

                // initialize a dropdownlist
                input.kendoDropDownList({
                    dataTextField: "name",
                   optionLabel: "Select...",
                    dataValueField: "brandId",
                    dataSource: brands // bind it to the brands array
                }).appendTo(container);
            }
        },
        {
            //The modelId column
            title: "Model",
            field: "modelId",  // bound to the modelId field
            template: "#= modelName(modelId) #", //the template shows the name corresponding to the modelId field
            editor: function(container) { // use a dropdownlist as an editor
                var input = $('<input id="modelId" name="modelId">');
                input.appendTo(container);
                input.kendoDropDownList({
                    dataTextField: "name",
                    dataValueField: "modelId",
                   optionLabel: "Select...",
                    cascadeFrom: "brandId", // cascade from the brands dropdownlist
                    dataSource: models // bind it to the models array
                }).appendTo(container);
            }
        },
        { command: "edit" }
        ]
    });

    function brandName(brandId) {
        for (var i = 0; i < brands.length; i++) {
            if (brands[i].brandId == brandId) {
                return brands[i].name;
            }
        }
    }

    function modelName(modelId) {
       if (modelId == null || modelId == "") {
                return "";
            }
        for (var i = 0; i < models.length; i++) {
            if (models[i].modelId == modelId) {
                return models[i].name;
            }
        }
    }
</script>
</body>
</html>

2 Answers, 1 is accepted

Sort by
0
Accepted
Stefan
Telerik team
answered on 30 Nov 2017, 11:59 AM
Hello, Vadim,

Thank you for the runnable example.

In this scenario, I can suggest in the editor function to check if the model's array is empty and based on that to set the input as required or not.

http://dojo.telerik.com/ilikO

Also, as the tooltip can be hidden in some scenarios, please check the following article demonstrating how it can be made visible:

https://docs.telerik.com/kendo-ui/controls/editors/validator/overview#validator-tooltip

I hope this is helpful.

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Vadim
Top achievements
Rank 1
answered on 30 Nov 2017, 07:22 PM

Hi Stefan,
Thank you for your solution. I placed a validation message as you sugested:
var message = $('<span class="k-invalid-msg" data-for="modelId"></span>');

message.appendTo(container);
and it works perfectly!
Thanks again
Vadim

Tags
Grid
Asked by
Vadim
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Vadim
Top achievements
Rank 1
Share this question
or