Implement cascading DropDownList inside KendoGridView inline edit mode using AngularJS in ASP.Net MVC

mahesh213
 
on Oct 20, 2021 11:02 PM
Sample_176481.zip
464 Views

Hi,

My requirement is that display State values based upon Country dropdown values

can you please help me

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Index</title>
    <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>
    <style type="text/css">
        body {
            font-family: Arial;
            font-size: 10pt;
        }
    </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" },
                        update: { url: "Home/UpdateCustomer" }
                    },
                    schema: {
                        model: {
                            id: "CustomerId",
                            fields: {
                                CustomerId: { editable: false, nullable: true, type: "number" },
                                Name: { editable: true, nullable: true, type: "string" },
                                Country: { editable: true, nullable: true, type: "string" }
                            }
                        }
                    },
                    pageSize: 2,
                    serverPaging: false,
                    serverSorting: false
                },
                editable: "inline",
                sortable: true,
                pageable: true,
                resizeable: true,
                columns: [{ field: "CustomerId", title: "Id", width: "50px" },
                { field: "Name", title: "Name" },
                {
                        
                        title: "Country",
                        field: "Country", 
                        template: "#= CountryName(Country) #", 
                        editor: function (container) { 
                            
                            var input = $('<input id="Country" name="Country">');
                            // append to the editor container
                            input.appendTo(container);

                          
                            input.kendoDropDownList({
                                dataTextField: "Text",
                                dataValueField: "Value",
                                dataSource: Countries,
                                
                            }).appendTo(container);
                        }
                    },
                    {
                       
                        title: "State",
                        field: "State",
                        template: "#= GetStateName(State) #", 
                        editor: function (container) { 
                          
                            var input = $('<input id="State" name="State">');
                          
                            input.appendTo(container);

                          
                            input.kendoDropDownList({
                                dataTextField: "Text",
                                dataValueField: "Value",
                                dataSource: states,
                            }).appendTo(container);
                        }
                    },
                {
                    title: 'Action',
                    command:
                        [
                            { name: "edit", text: "Edit", iconClass: "k-icon k-i-hyperlink-open" }
                        ]
                }
                ]
            };
        })
        var Countries = [];
        var States = [];

        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(Country) {
            for (var i = 0; i < Countries.length; i++) {
                if (Countries[i].Value == Country) {
                    return Countries[i].Text;
                }
            }
        }

        function GetStateName(State) {
            for (var i = 0; i < States.length; i++) {
                if (States[i].Value == State) {
                    return States[i].Text;
                }
            }
        }

    </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: Download
dharmendr
 
on Oct 22, 2021 03:03 AM

Hi mahesh213,

Check this example. Now please take its reference and correct your code.

Controller

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

    public JsonResult GetCustomers()
    {
        List<Customer> customers = new List<Customer>();
        customers.Add(new Customer { Id = 1, Name = "John Hammond", CountryId = 1, StateId = 1 });
        customers.Add(new Customer { Id = 2, Name = "Mudassar Khan", CountryId = 2, StateId = 4 });
        customers.Add(new Customer { Id = 3, Name = "Suzanne Mathews", CountryId = 3, StateId = 8 });
        customers.Add(new Customer { Id = 4, Name = "Robert Schidner", CountryId = 1, StateId = 3 });
        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);
    }

    public JsonResult GetStateName()
    {
        List<State> states = new List<State>();
        states.Add(new State { StateId = 1, Name = "Alabama", CountryId = 1 });
        states.Add(new State { StateId = 2, Name = "Arizona", CountryId = 1 });
        states.Add(new State { StateId = 3, Name = "Alaska", CountryId = 1 });
        states.Add(new State { StateId = 4, Name = "Maharashtra", CountryId = 2 });
        states.Add(new State { StateId = 5, Name = "Gujarat", CountryId = 2 });
        states.Add(new State { StateId = 6, Name = "Goa", CountryId = 2 });
        states.Add(new State { StateId = 7, Name = "Ontario", CountryId = 3 });
        states.Add(new State { StateId = 8, Name = "Quebec", CountryId = 3 });
        states.Add(new State { StateId = 9, Name = "Manitoba", CountryId = 3 });
        return Json(states, JsonRequestBehavior.AllowGet);
    }

    public JsonResult UpdateCustomer(Customer customer)
    {
        return null;
    }

    public class Customer
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int CountryId { get; set; }
        public int StateId { get; set; }
    }

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

    public class State
    {
        public int StateId { get; set; }
        public string Name { get; set; }
        public int CountryId { get; set; }
    }
}

View

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <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();
            GetStates();
            $scope.mainGridOptions = {
                dataSource: {
                    type: "json",
                    transport: {
                        read: { url: "/Home/GetCustomers" },
                        update: { url: "/Home/UpdateCustomer" }
                    },
                    schema: {
                        model: {
                            id: "Id",
                            fields: {
                                Id: { editable: false, nullable: true, type: "number" },
                                Name: { editable: false, nullable: true, type: "string" }  
                            }
                        }
                    },
                    pageSize: 4,
                    serverPaging: false,
                    serverSorting: false
                },
                editable: "inline",
                sortable: true,
                pageable: true,
                resizeable: true,
                columns: [
                    { field: "Id", title: "Id", width: "50px" },
                    { field: "Name", title: "Name", width: "150px" },
                    {
                        title: "Country",
                        field: "CountryId",
                        width: "200px",
                        template: "#= CountryName(CountryId) #",
                        editor: function (container) {
                            var input = $('<input id="CountryId" name="CountryId" />');
                            input.appendTo(container);
                            input.kendoDropDownList({
                                dataTextField: "Name",
                                dataValueField: "CountryId",
                                dataSource: Countries
                            }).appendTo(container);
                        }
                    },
                    {
                        title: "State",
                        field: "StateId",
                        width: "200px",
                        template: "#= GetStateName(StateId) #",
                        editor: function (container) {
                            var input = $('<input id="StateId" name="StateId" />');
                            input.appendTo(container);
                            input.kendoDropDownList({
                                dataTextField: "Name",
                                dataValueField: "StateId",
                                cascadeFrom: "CountryId",
                                dataSource: States
                            }).appendTo(container);
                        }
                    },
                    {
                        title: 'Action',
                        command: [{ name: "edit", text: "Edit", iconClass: "k-icon k-i-hyperlink-open" }]
                    }
                ]
            };
        })

        var Countries = [];
        var States = [];
        function GetCountries() {
            $.ajax({
                method: 'Get',
                url: '/Home/GetCountryName',
            }).success(function (data) {
                Countries = data;
            }).error(function (data) {
                message = 'Unexpected Error';
            });
        }

        function GetStates() {
            $.ajax({
                method: 'Get',
                url: '/Home/GetStateName',
            }).success(function (data) {
                States = data;
            }).error(function (data) {
                message = 'Unexpected Error';
            });
        }

        function CountryName(countryId) {
            for (var i = 0; i < Countries.length; i++) {
                if (Countries[i].CountryId == countryId) {
                    return Countries[i].Name;
                }
            }
        }

        function GetStateName(stateId) {
            for (var i = 0; i < States.length; i++) {
                if (States[i].StateId == stateId) {
                    return States[i].Name;
                }
            }
        }
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <kendo-grid k-options="mainGridOptions" id="tblCustomers"></kendo-grid>
</body>
</html>

Screenshot