[Solved] ASP.Net MVC AngularJS KendoGrid toolbar create Error: Uncaught ReferenceError: CountryId is not defined

mahesh213
 
on Oct 22, 2021 04:10 AM
391 Views

Hi,

In code i am trying to implement insert new records

toolbar: ["create"],

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

but here i am getting like below error message 

Unknown DataSource transport type 'json'. Verify that registration scripts for this type are included after Kendo UI on the page.

Uncaught ReferenceError: CountryId is not defined

if i comment below line code then it's not displaying error

template: "#= CountryName(Country) #"

can you please help me out this one

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Oct 23, 2021 04:08 AM

Hi mahesh213,

Check this example.

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 Json(customer, JsonRequestBehavior.AllowGet);
    }

    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: {
                    transport: {
                        read: { url: "/Home/GetCustomers" },
                        update: { url: "/Home/UpdateCustomer" }
                    },
                    schema: {
                        model: {
                            id: "Id",
                            fields: {
                                Id: { editable: false, nullable: true, type: "number" },
                                Name: { editable: true, nullable: true, type: "string" },
                                CountryId: { editable: true, nullable: true, type: "number" },
                                StateId: { editable: true, nullable: true, type: "number" }
                            }
                        }
                    },
                    pageSize: 4,
                    serverPaging: false,
                    serverSorting: false
                },
                toolbar: ["create"],
                editable: "inline",
                sortable: true,
                pageable: true,
                resizeable: true,
                columns: [
                    { field: "Id", title: "Id", width: "70px" },
                    { 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>