ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Implement Check Uncheck all CheckBox in Header row of ng-grid in AngularJS<p>Hi <a class="username" rel="rani"> rani</a>,</p> <p>Check this example. Now please take its reference and correct your code.</p> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <div class="demo_block"> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://code.jquery.com/jquery-2.2.3.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js&#34;&gt;&lt;/script&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;//cdn.rawgit.com/angular-ui/ng-grid/v2.0.14/ng-grid.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;//cdn.rawgit.com/angular-ui/ng-grid/v2.0.14/build/ng-grid.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; var app = angular.module(&#39;MyApp&#39;, [&#39;ngGrid&#39;]); app.controller(&#39;MyController&#39;, function ($scope) { $scope.gridData = [ { Id: 1, Name: &#39;Nancy Davolio&#39;, City: &#39;Seattle&#39;, Country: &#39;USA&#39;, &#34;checker&#34;: false }, { Id: 2, Name: &#39;Andrew Fuller&#39;, City: &#39;Tacoma&#39;, Country: &#39;USA&#39;, &#34;checker&#34;: true }, { Id: 3, Name: &#39;Janet Leverling&#39;, City: &#39;Kirkland&#39;, Country: &#39;USA&#39;, &#34;checker&#34;: true }, { Id: 4, Name: &#39;Margaret Peacock&#39;, City: &#39;Redmond&#39;, Country: &#39;USA&#39;, &#34;checker&#34;: true }, { Id: 5, Name: &#39;Steven Buchanan&#39;, City: &#39;London&#39;, Country: &#39;UK&#39;, &#34;checker&#34;: true }, { Id: 6, Name: &#39;Michael Suyama&#39;, City: &#39;London&#39;, Country: &#39;UK&#39;, &#34;checker&#34;: true }, { Id: 7, Name: &#39;Robert King&#39;, City: &#39;London&#39;, Country: &#39;UK&#39;, &#34;checker&#34;: true }, { Id: 8, Name: &#39;Laura Callahan&#39;, City: &#39;Seattle&#39;, Country: &#39;USA&#39;, &#34;checker&#34;: true }, { Id: 9, Name: &#39;Anne Dodsworth&#39;, City: &#39;London&#39;, Country: &#39;UK&#39;, &#34;checker&#34;: true } ]; $scope.columnDefs = [ { sortable: false, field: &#39;checker&#39;, displayName: &#39;&#39;, headerCellTemplate: &#34;&lt;div class=\&#34;ngHeaderSortColumn {{col.headerClass}}\&#34; ng-style=\&#34;{&#39;cursor&#39;: col.cursor}\&#34; ng-class=\&#34;{ &#39;ngSorted&#39;: !noSortVisible }\&#34;&gt; \ &lt;div ng-click=\&#34;col.sort($event)\&#34; ng-class=\&#34;&#39;colt&#39; + col.index\&#34; class=\&#34;ngHeaderText\&#34;&gt; \ {{col.displayName}} \ &lt;input type=\&#34;checkbox\&#34; ng-model=\&#34;checker.checked\&#34; ng-change=\&#34;toggleCheckerAll(checker.checked);\&#34;&gt; \&lt;/div&gt; \&lt;/div&gt;&#34;, cellTemplate: &#34;&lt;div class=\&#34;ngCellText\&#34; ng-class=\&#34;col.colIndex()\&#34;&gt; \ &lt;input type=\&#34;checkbox\&#34; ng-input=\&#34;COL_FIELD\&#34; ng-model=\&#34;COL_FIELD\&#34; ng-change=\&#34;toggleChecker(COL_FIELD)\&#34;&gt; \&lt;/div&gt;&#34; }, { field: &#34;Id&#34;, width: 50, sortable: false, enableCellEdit: false }, { field: &#34;Name&#34;, width: 150, sortable: true, enableCellEdit: false }, { field: &#34;City&#34;, width: 100, sortable: true, enableCellEdit: false }, { field: &#34;Country&#34;, width: 100, sortable: true, enableCellEdit: false } ]; $scope.gridOptions = { data: &#39;gridData&#39;, enableCellSelection: false, enableRowSelection: false, columnDefs: &#39;columnDefs&#39; }; $scope.toggleCheckerAll = function (checked) { for (var i = 0; i &lt; $scope.gridData.length; i++) { $scope.gridData[i].checker = checked; } }; $scope.toggleChecker = function (checked) { var rows = $scope.gridOptions.$gridScope.renderedRows; var allChecked = true; for (var r = 0; r &lt; rows.length; r++) { if (rows[r].entity.checker !== true) { allChecked = false; break; } } if (!$scope.gridOptions.$gridScope.checker) { $scope.gridOptions.$gridScope.checker = {}; } $scope.gridOptions.$gridScope.checker.checked = allChecked; }; }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div ng-app=&#34;MyApp&#34; ng-controller=&#34;MyController&#34;&gt; &lt;div ng-grid=&#34;gridOptions&#34; style=&#34;width: 450px; height: 350px&#34;&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> </div> <p><a class="demo button orange btn btn-red">Demo</a></p>https://www.aspforums.net:443/Threads/202094/Implement-Check-Uncheck-all-CheckBox-in-Header-row-of-ng-grid-in-AngularJS/https://www.aspforums.net:443/Threads/202094/Implement-Check-Uncheck-all-CheckBox-in-Header-row-of-ng-grid-in-AngularJS/Thu, 08 Aug 2019 04:12:52 GMT