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

Last Reply 4 months ago By dharmendr

Posted 4 months ago

How to use check all in Kendogrid header in angularjs

 

Posted 4 months ago

I will get back to you soon.



Posted 4 months 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 4 months ago

How to implement without using juery code.


Posted 4 months ago

You have to use jquery to select the element and assign the click event to check uncheck the checkbox.