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. Image for the cookie policy date
close icon

Multirow selection with tri-state checkbox

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

1 Reply

PK Prasanna Kumar Viswanathan Syncfusion Team 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 

Live Chat Icon For mobile
Up arrow icon