Multirow selection with tri-state checkbox

[Prashant Prasad]

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]

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> 

<script type="text/x-jsrender" id="headerTemplate"> 

    <input type="checkbox" id="headchk" /> 

</script> 

 

 

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() 

            }); 

$("#Grid").ejGrid({ 

                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 }); 

                    grid.selectRows(records[i]); 

                } 

            } 

        } 

    </script> 

Sample: http://www.syncfusion.com/downloads/support/forum/124541/ze/Sample118577-610808662 

 

If we misunderstood your query, please get back to us. 

 

Regards, 

Prasanna Kumar N.S.V