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

mahesh213
 
on Oct 27, 2021 11:29 PM
Sample_221831.zip
672 Views

Hi,

my requirement is that after clicking of edit button based upon Id value display relevant values on multiselect checkbox

@{
    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="~/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>
    <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/UpdateCustomers" },
                      
                    },
                    pageSize: 2,

                    schema: {
                        model: {
                            id: "Id",
                            fields: {
                                QId: { editable: false, nullable: true, type: "number" },
                                QName: { editable: true, nullable: true, type: "string" },                               
                                CountryId: { editable: true, nullable: true, type: "number" },
                            }
                        }
                    },
                    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",
                        template: "#=CountryName(countries) #",
                        editor: function (container) {
                            var input = $('<input id="CountryId" name="CountryId" />');
                            input.appendTo(container);
                            input.kendoMultiSelect({
                                optionLabel: "Select Country",
                                dataTextField: "Name",
                                dataValueField: "CountryId",
                                filter: "contains",
                                minLength: 2,
                                dataSource: Countries,
                                dataBound: function () {
                                    var items = this.ul.find("li");
                                    setTimeout(function () {
                                        //checkInputs(items);
                                    });
                                },
                                itemTemplate: "<input type='checkbox'/> #:data.Name#",
                                headerTemplate: "<div><input type='checkbox' id='Header'><label> Select All</label></div>",
                                autoClose: false,
                                change: function () {
                                    var items = this.ul.find("li");
                                    //checkInputs(items);
                                }
                            }).appendTo(container);
                        }
                    },
                    {
                        title: 'Action',
                        command: [{ name: "edit", text: "Edit", iconClass: "k-icon k-i-hyperlink-open" }]
                    }
                ],

                edit: function (e) {
                         
                }
            };

            GetCountries();
           
        })
      
        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) {
            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>

 

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

countries are binding based upon Id value

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

can you please help me

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Oct 28, 2021 07:33 AM

Hi mahesh213,

Refer below code.

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);
    }

    public JsonResult UpdateCustomer(Customer customer)
    {
        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" }
                    },
                    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,
                                change: function () {
                                    var items = this.ul.find("li");
                                    //checkInputs(items);
                                }
                            }).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) {
            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" id="tblCustomers"></kendo-grid>
</body>
</html>