Checkbox column in ejgrid syncfusion

Question

I am Using SyncFusion ejGrid i.e. in my project.

I want to show Checkbox in first column to select/unselect multiple rows. One checkbox in the column header to select/unselect all.

Answer 1

To add checkbox to Grid Column content we can use “templateId” property of columns and to add checkbox to Column header we can use “headerTemplateId” property. Then in checkbox click event we can select row by using “selectRows” method of Grid.

 <script type="text/x-jsrender" id="check">
    <input type="checkbox" class="rowCheckbox" id="chk" />
</script>
<script type="text/x-jsrender" id="head">
    <input type="checkbox" id="headchk" />
</script>

$("#Grid").ejGrid({
        ...
        columns: [
                     { headerTemplateId: "#head", columnTemplate: true, templateId: "#check" },   
        ...
        });
    $("#headchk").change(function () {
            $("#Grid .rowCheckbox").on("change", checkChange);
            gridObj = $("#Grid").data("ejGrid");
            if ($("#headchk").is(':checked')) {// TO Select all rows in Grid Content
            …
                gridObj.selectRows(0, gridObj.model.pageSettings.pageSize);
            }
            else {       // To remove selection for all rows
            …
                gridObj.cleanUpSelection();
            }
        });
    function checkChange(e) {
            …
            //For MultiSelection using Checkbox
            gridObj._multiSelectCtrlRequest = true;
    }

I have created a sample based on your requirement and the same can be downloaded from below link. Sample: http://www.syncfusion.com/downloads/support/directtrac/125963/grid898060682.zip