Himy requirement is that after clicking of edit button based upon Id value display relevant values on multiselect checkbox Layout nullltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta name34viewport34 content34widthdevicewidth34 gt lttitlegtIndexlttitlegt ltlink rel34stylesheet34 href34httpskendocdntelerikcom20201114styleskendodefaultv2mincss34 gt ltscript type34textjavascript34 src34httpsco

Hi mahesh213Refer below codeControllerpublic class HomeController Controller GET Home public ActionResult Index return View public JsonResult GetCustomers ListltCountrygt countries new ListltCountrygt new Country CountryId 1 Name 34USA34 new Country CountryId 2 Name 34India34 ListltCustomergt customers new ListltCustomergt customersAddnew Customer Id 1 Name 34John Hammond34 countries countries customersAddnew Customer Id 2 Name 34Mudassar Khan34 countries countries customersAddnew Customer Id 3 Name 34Suzanne Mathews34 countries countries customersAddnew Customer Id 4 Name 34Robert Schidner34 countries countries return Jsoncustomers JsonRequestBehaviorAllowGet public JsonResult GetCountryName

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

mahesh21...

SOLVED CLOSED ACTIVE ANSWERED
User: mahesh213
Posted: on Oct 27, 2021 11:29 PM
Forum: ASP.Net MVC
Answer: 1
Views: 3435
Sample Code: Download

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

dharmend...

0 3

Reply
ANSWER
User: dharmendr
Replied: on Oct 28, 2021 07:33 AM
Modified: on Feb 16, 2022 10:07 AM
Report

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>

Screenshot

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

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

Company

Explore

Follow us

Contact Us