We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Multirow selection with tri-state checkbox

Thread ID:





124541 Jun 13,2016 01:26 PM UTC Jun 14,2016 02:04 PM UTC JavaScript 1
Tags: ejGrid
Prashant Prasad
Asked On June 13, 2016 01:26 PM UTC

I want to select first row of the grid page by selecting checkbox in initial state. But at that time my header row checkbox should be in indeterminate state and after clicking on header checkbox the indeterminate state should be replaced with checked or unchecked.  I am unable to maintain tri-state in initial rendering and also unable to set check mark for first record. Please check the attached code.

Please find attached file for your reference.

Attachment: MultiSelectRow_9cdd6f91.rar

Prasanna Kumar Viswanathan [Syncfusion]
Replied On June 14, 2016 02:04 PM UTC

Hi Prasad, 

Thank you for contacting Syncfusion support. 

We created a sample and in this sample we bound the Checkbox to the Grid rows using the template property of the Grid and to the Grid header using the headerTemplateID property of the Grid. The template property is used to bind unbound column to the Grid. The headerTemplateID is used to add template within the header element. 
<script type="text/x-jsrender" id="checkboxTemplate"> 
    <input type="checkbox" class="rowCheckbox" /> 
<script type="text/x-jsrender" id="headerTemplate"> 
    <input type="checkbox" id="headchk" /> 
In the dataBound and actionComplete events of the Grid, the change event of the Checkbox is triggered. 
function create(args) { 
            $("#Grid .rowCheckbox").ejCheckBox({ "change": checkChange }); 
            $("#headchk").ejCheckBox({ "change": headCheckChange }); 
        function complete(args) { 
            $("#Grid .rowCheckbox").ejCheckBox({ "change": checkChange }); 
            $("#headchk").ejCheckBox({ "change": headCheckChange, checked: false }); 
To maintain the tri-state in initial rendering we used selectedRowsIndexes method of ejGrid. In headCheckchange event we get the index of an rows which is selected in initial state and stored in a records variable.  This can be done before the indeterminate state should be replaced. 
When we uncheck the header checkbox we remove the selection for all rows using clearSelection method of ejGrid and maintain the initial state using records variable. 
<script type="text/javascript"> 
        $(function () {// Document is ready. 
            var records; 
            var dataManager = ej.DataManager({ 
                url: "/Grid/DataSource", 
                adaptor: new ej.UrlAdaptor() 
                dataSource: dataManager, 
                allowSelection: true, 
                selectionType: "multiple", 
                allowPaging: true, 
                allowFiltering: true, 
                filterSettings: { filterType: "excel" }, 
                columns: [ 
                          { type: "boolean", width: 100, headerTemplateID: "#headerTemplate", template: true, templateID: "#checkboxTemplate", textAlign: ej.TextAlign.Center },//The checkbox column is bound to the grid using template property and headerTemplateID property 
                          { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, width: 100 }, 
                          { field: "CustomerID", headerText: "Customer ID", width: 130 }, 
                          { field: "Freight", headerText: "Freight", width: 100, format: "{0:C}" }, 
                          { field: "ShipCountry", headerText: "ShipCountry", width: 100 } 
                dataBound: "create", 
                actionComplete: "complete", 
                recordClick: "recordClick", 
                actionBegin: "ab", 
                rowSelected: "rowselected", 
        function checkChange(e) { 
            gridObj = $("#Grid").data("ejGrid"); 
            var rowCheck = $(".rowCheckbox:checked"); 
        function headCheckChange(e) { 
            var grid = $("#Grid").ejGrid("instance"); 
            $("#Grid .rowCheckbox").ejCheckBox({ "change": checkChange }); 
            gridObj = $("#Grid").data("ejGrid"); 
            if ($("#headchk").is(':checked')) { 
                records = grid.selectedRowsIndexes; 
                $(".rowCheckbox").ejCheckBox({ "checked": true }); 
                gridObj.multiSelectCtrlRequest = true; 
                gridObj.selectRows(0, gridObj.model.pageSettings.pageSize);  // To Select all rows in Grid Content 
            else { 
                $(".rowCheckbox").ejCheckBox({ "checked": false }); 
                gridObj.clearSelection(); // To remove selection for all rows 
                var grid = $("#Grid").ejGrid("instance"); 
                for (var i = 0 ; i < records.length ; i++) { 
                    grid.getRowByIndex(records[i]).find(".rowCheckbox").ejCheckBox({ "checked": true }); 
If we misunderstood your query, please get back to us. 
Prasanna Kumar N.S.V 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon