Check (Select) All CheckBoxes in KendoGrid Header CheckBox using AngularJS in ASP.Net MVC

Last Reply one month ago By dharmendr

Posted one month ago

How to use check all in Kendogrid header in angularjs

 



Posted one month ago

Hi rani,

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

Controller

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
    public JsonResult GetAll()
    {
        List<Employee> employees = new List<Employee>();
        employees.Add(new Employee { Id = 1, Name = "Category 1", IsActive = true });
        employees.Add(new Employee { Id = 2, Name = "Category 2", IsActive = false });
        employees.Add(new Employee { Id = 3, Name = "Category 3", IsActive = true });
        return Json(employees, JsonRequestBehavior.AllowGet);
    }
    public class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public bool IsActive { get; set; }
    }
}

View

<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>
    <script type="text/javascript">
        var app = angular.module("MyApp", ["kendo.directives"]);
        app.controller("MyController", function ($scope, $window, $http) {
            $scope.mainGridOptions = {
                dataSource: { transport: { read: "/Home/GetAll/" }, pageSize: 5 },
                columns: [
                { field: "Id", title: "Id" },
                { field: "Name", title: "Name" },
                {
                    template: function (dateItem) {
                        return dateItem.IsActive ?
                        "<input type='checkbox' class='k-checkbox row-checkbox' ng-click='CheckUnCheckHeader($event)' class='checkbox' ng-checked='" + dateItem.IsActive + "' />" :
                        "<input type='checkbox' class='k-checkbox row-checkbox' ng-click='CheckUnCheckHeader($event)' class='checkbox'/>";
                    },
                    headerTemplate: "<input id='checkAll' class='k-checkbox header-checkbox' ng-click='CheckUnCheckAllRow($event)'  type='checkbox' />"
                }]
            };
            $scope.CheckUnCheckAllRow = function (event) {
                var isChecked = event.currentTarget.checked;
                $('.row-checkbox').each(function (index, item) {
                    if (isChecked) {
                        if (!$(item)[0].checked) {
                            $(item).click();
                        }
                    } else {
                        if ($(item)[0].checked) {
                            $(item).click();
                        }
                    }
                });
            };
            $scope.CheckUnCheckHeader = function (event) {
                var isChecked = event.currentTarget.checked;
                var allChecked = true;
                if (isChecked) {
                    $('.row-checkbox').each(function (index, item) {
                        if (!$(item)[0].checked) {
                            allChecked = false;
                        }
                    });
                } else {
                    allChecked = false;
                }

                var itemHeader = $('.header-checkbox');
                if (allChecked) {
                    if (!$(itemHeader)[0].checked) {
                        $(itemHeader).click();
                    }
                } else {
                    $(itemHeader).removeAttr("checked");
                }
            };
        }) 
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <kendo-grid options="mainGridOptions"></kendo-grid>
</body>
</html>

Screenshot


Posted one month ago

How to implement without using juery code.