Pass (Send) kendoMultiSelect CheckBox inside KendoGrid value to Controller using AngularJS in ASP.Net MVC

mahesh213
 
on Nov 14, 2021 10:17 PM
Sample_234408.zip
556 Views

Hi,

Bind kendoMultiSelect with CheckBox inside KendoGrid inline edit using AngularJS in ASP.Net MVC

In above URL code after clicking on update button country values are getting null

Can you please help me in above shared URLcode

 

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Nov 15, 2021 06:50 AM
on Nov 16, 2021 11:34 PM

Hi mahesh213,

You need to set the HttpPost attrubute and transport update type to POST.

Check the below example.

Controller

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

    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>
    <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",
                        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
                            }).appendTo(container);
                        }
                    },
                    {
                        title: 'Action',
                        command: [{ name: "edit", text: "Edit", iconClass: "k-icon k-i-hyperlink-open" }]
                    }
                ]
            };
        })
        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