Hide kendo validator after success on DropDownTree selection in ASP.Net MVC using jQuery

mahesh21...

SOLVED CLOSED ACTIVE ANSWERED
User: mahesh213
Posted: on Mar 08, 2022 05:29 AM
Forum: ASP.Net MVC
Answer: 1
Views: 5108
Sample Code: Download

Hi,

i am trying to use kendo validator for displaying validation messages, after clicking of update button if user not selects any field it's displaying validation as expected.

once user selects any values on Name field validation message is disappearing properly, but in countries field even after selecting it's still showing error message.

can you please help me

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/NewCSS/kendo.mobile.all.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default-v2.min.css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="~/scripts/angular.js"></script>
    <script type="text/javascript" src="~/scripts/angular.js"></script>
    <script src="~/scripts/angular.min.js"></script>
    <script type="text/javascript" src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
    <style>

        .k-grid td {
            white-space: normal
        }

        .breakWord20 {
            word-break: break-all !important;
            word-wrap: break-word !important;
            vertical-align: top;
        }

        .k-grid-header .k-header {
            overflow: visible !important;
            white-space: normal !important;
        }
    </style>
    <script type="text/javascript">
        var app = angular.module("MyApp", ["kendo.directives"]);
        app.controller("MyController", function ($scope, $window, $http) {
            $scope.mainGridOptions = {
                dataSource: {
                    //type: "json",
                    transport: {
                        read: { url: "/home/GetCustomers" },
                        create: {
                            url: "/home/InsertCustomers",
                        },
                    },
                    pageSize: 2,
                    schema: {
                        model: {
                            id: "Id",
                            fields: {
                                Id: { editable: false, nullable: true, type: "number" },
                                Name: { editable: true, nullable: true, type: "string" },
                                countries: { editable: true, nullable: true, type: "object" },
                            }
                        }
                    },
                    serverPaging: true,
                    serverSorting: true
                },
                editable: "inline",
                sortable: true,
                pageable: true,
                resizeable: true,
                columns: [
                    { field: "Id", title: "Id", width: "50px" },
                    {
                        field: "Name", title: "Name"
                    },
                    {
                        title: "Country",
                        field: "countries",
                        width: "200px",
                        headerAttributes: { style: "white-space: normal", "class": "breakWord20" },
                        defaultValue: Customers,
                        template: "#=CountryName(countries) #",
                        editor: function (container) {
                            var input = $('<input id="countries" name="countries" />');
                            input.appendTo(container);
                            input.kendoDropDownTree({
                                autoClose: true,
                                checkboxes: true,
                                checkAll: true,
                                placeholder: "Select ...",
                                height: "auto",
                                dataTextField: "Name",
                                dataValueField: "CountryId",
                                dataSource: Countries,
                                dataBound: onDataBound,
                            }).appendTo(container);
                        }

                    },
                    {
                        title: 'Action',
                        command: [{ name: "edit", text: "Edit", iconClass: "k-icon k-i-hyperlink-open" }]
                    }
                ],
                toolbar: ["create"],
            };
            GetCountries();
        })

        //validations
        $(document).ready(function () {
            $.extend(true, kendo.ui.validator, {
                rules: {
                    CountryValidation: function (input, params) {
                        if (input.is("[name='countries']")) {

                            var grid = input.closest(".k-grid").data("kendoGrid");
                            var dataItem = grid.dataItem($(".k-grid-edit-row"));
                            return input.val().length != 0;
                        }
                        return true;
                    },
                    LimitValidation: function (input, params) {
                        if (input.is("[name='Name']")) {
                            var grid = input.closest(".k-grid").data("kendoGrid");
                            var dataItem = grid.dataItem($(".k-grid-edit-row"));
                            return input.val() != "";
                        }

                        return true;
                    },
                },
                messages: {
                    CountryValidation: "Country is mandatory",

                    LimitValidation: "Name is mandatory",
                }
            });
        });

        var selectedItem;
        function onDataBound(e) {
            if (selectedItem) {
                setTimeout(function () {
                    e.sender.value(selectedItem);
                    e.sender.trigger('change')
                });
            }
        }
        var Customers = [
            { Name: "Please select", CountryId: 0 },
        ];

        var Countries = [];
        function GetCountries() {
            $.ajax({
                method: 'Get',
                url: '/home/GetCountryName',
            }).success(function (data, status, headers, config) {
                Countries = data;
            }).error(function (data, status, headers, config) {
                message = 'Unexpected Error';
            });
        }
        function CountryName(countries) {
            if (countries != null)
                return Array.prototype.map.call(countries, function (item) { return item.Name; }).join("/")
        }
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <kendo-grid k-options="mainGridOptions"></kendo-grid>
</body>
</html>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 3

Reply
ANSWER
User: dharmendr
Replied: on Mar 08, 2022 06:01 AM
Modified: on Mar 10, 2022 10:54 PM
Report

Hi mahesh213,

Refer below code.

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }

    public JsonResult CheckStatus(Customer customer)
    {
        bool IsValidStatus = false;
        //do operations
        return Json(new { Isvalid = IsValidStatus }, JsonRequestBehavior.AllowGet);
    }

    public JsonResult GetCustomers()
    {
        List<Country> countries = new List<Country>(){
            new Country { CountryId = 1, Name = "USA" },
            new Country { CountryId = 2, Name = "India" }
        };

        List<Customer> customers = new List<Customer>();
        customers.Add(new Customer { Id = 1, Name = "John Hammond", countries = countries });
        customers.Add(new Customer { Id = 2, Name = "Mudassar Khan", countries = countries });
        customers.Add(new Customer { Id = 3, Name = "Suzanne Mathews", countries = countries });
        customers.Add(new Customer { Id = 4, Name = "Robert Schidner", countries = countries });
        return Json(customers, JsonRequestBehavior.AllowGet);
    }

    public JsonResult GetCountryName()
    {
        List<Country> countries = new List<Country>();
        countries.Add(new Country { CountryId = 1, Name = "USA" });
        countries.Add(new Country { CountryId = 2, Name = "India" });
        countries.Add(new Country { CountryId = 3, Name = "Canada" });
        return Json(countries, JsonRequestBehavior.AllowGet);
    }
    [HttpPost]
    public JsonResult UpdateCustomer(Customer customer)
    {
        if (customer.countries != null)
        {
            if (customer.countries[0] == null)
            {
                customer.countries = null;
            }
        }

        // Code for update record in database.

        return Json(customer, JsonRequestBehavior.AllowGet);
    }

    public class Customer
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public List<Country> countries { get; set; }
    }

    public class Country
    {
        public int CountryId { get; set; }
        public string Name { get; set; }
    }
}

View

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style>
        .k-grid td {
            vertical-align: top !important;
        }
    </style>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default-v2.min.css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="https://kendo.cdn.telerik.com/2020.1.114/js/angular.min.js"></script>
    <script type="text/javascript" src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("MyApp", ["kendo.directives"]);
        app.controller("MyController", function ($scope) {
            GetCountries();
            $scope.mainGridOptions = {
                dataSource: {
                    transport: {
                        read: { url: "/Home/GetCustomers" },
                        update: {
                            url: "/Home/UpdateCustomer",
                            type: 'POST'
                        }
                    },
                    schema: {
                        model: {
                            id: "Id",
                            fields: {
                                Id: { editable: false, nullable: true, type: "number" },
                                Name: { editable: true, nullable: true, type: "string" },
                                countries: { editable: true, nullable: true, type: "object" }
                            }
                        }
                    },
                    pageSize: 4,
                    serverPaging: true,
                    serverSorting: true
                },
                editable: "inline",
                sortable: true,
                pageable: true,
                resizeable: true,
                columns: [
                    { field: "Id", title: "Id", width: "70px" },
                    { field: "Name", title: "Name", width: "150px" },
                    {
                        title: "Country",
                        field: "countries",
                        width: "200px",
                        height: "50px",
                        template: "#= CountryName(countries) #",
                        editor: function (container) {
                            var input = $('<input id="countries" name="countries" />');
                            input.appendTo(container);
                            input.kendoMultiSelect({
                                optionLabel: "Select Country",
                                dataTextField: "Name",
                                dataValueField: "CountryId",
                                filter: "contains",
                                minLength: 2,
                                dataSource: Countries,
                                itemTemplate: "<input type='checkbox'/> #:data.Name#",
                                headerTemplate: "<div><input type='checkbox' id='Header'><label> Select All</label></div>",
                                autoClose: false
                            });
                            $(container).append('<br/><span id="lblCountry" style="color:red;display:none;">Country required!</span>')
                        }
                    },
                    {
                        title: 'Action',
                        command: [{ name: "edit", text: "Edit", iconClass: "k-icon k-i-hyperlink-open" }]
                    }
                ],
                edit: function (e) {
                    var updateButton = $(".k-grid-update")[0];
                    var grid = this;
                    $(updateButton).on("click", function (e) {
                        var dataItem = grid.dataItem(grid.editable.element[0]);
                        if (dataItem.countries.length == 0) {
                            $(this).closest('tr').find('#lblCountry').show();
                            return false;
                        } else {
                            $.ajax({
                                type: "POST",
                                url: "/Home/CheckStatus",
                                data: JSON.stringify(dataItem),
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                success: function (data) {
                                    if (!data.Isvalid) {
                                    }
                                }
                            });
                        }
                    })
                }
            };
        })
        $(function () {
            $('body').on('change', "input[name=countries]", function () {
                $(this).closest(".k-grid").data("kendoGrid").dataItem($(".k-grid-edit-row")).countries.length > 0 ?
                $(this).closest('tr').find('#lblCountry').hide() : $(this).closest('tr').find('#lblCountry').show();
             });
        });

        var Countries = [];
        function GetCountries() {
            $.ajax({
                method: 'Get',
                url: '/Home/GetCountryName',
            }).success(function (data) {
                Countries = data;
            }).error(function (response) {
                alert(response.responseText);
            });
        }

        function CountryName(countries) {
            if (countries != null) {
                return Array.prototype.map.call(countries, function (item) {
                    if (item != null) {
                        return item.Name;
                    }
                }).join(",");
            }
        }
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <kendo-grid k-options="mainGridOptions" id="tblCustomers"></kendo-grid>
</body>
</html>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Hide kendo validator after success on DropDownTree selection in ASP.Net MVC using jQuery

Company

Explore

Follow us

Contact Us