MultiSlection with CheckBox in Grid Cell

[Nurkmez]

Hi,

Is there any feature the put checkbox in grid like a custom item?

http://blog.ofanitguy.com/2014/05/07/lightswitch-2013-html-client-easily-add-multi-item-selection-to-your-lists-and-tables/

Best Regards

[Balaji Marimuthu]

Hi Nurkmez,

we have already logged this as feature and will be available in any of our future releases.

We have analyzed and achieved you requirement by using columnTemplate in Grid for “Multiple row selection using Checkbox”. Please find the below code snippet.

var templateform = $('<script type="text/x-jsrender" id="checkboxTemplate"></script>').html('<input type="checkbox" class="rowCheckbox" />');

itemTemplate.ejGrid(

            {

                dataSource: window.gridData,

                allowSelection: true,

                selectionType: "multiple",

                columns: [

                    { headerText: "Checkbox Column", template: true, templateID: "#checkboxTemplate", textAlign: ej.TextAlign.Center },

                . . . . . .

                ],

                create: function (args) {

                    $("#Grid .rowCheckbox").ejCheckBox({ "change": checkChange });

                },

                complete: function (args) {

                    if (args.requestType == "paging")

                        $("#Grid .rowCheckbox").ejCheckBox({ "change": checkChange });

                },

                recordClick: "recordClick"

          

            });

    }

}

function checkChange(e) {

    gridObj = $("#Grid").data("ejGrid");

    gridObj.multiSelectCtrlRequest = true;//For MultiSelection using Checkbox

}

function recordClick(args) {

    if (this.multiSelectCtrlRequest == false) {

        for (var i = 0; i < $("#Grid .rowCheckbox").length; i++)

            $($("#Grid .rowCheckbox")[i]).ejCheckBox({ "checked": false })  //To clear checkbox when we select row by recordclick rather than checkbox

        this.clearSelection();

    }

}

By using column template we have rendered the checkbox in the Grid and the multiple selection performed in the change event of the checkbox and the selected records are cleared in the record click event.

Please find the sample for your reference.

http://www.syncfusion.com/downloads/support/directtrac/117956/Application1-1607937419.zip

Please let us know if you have any queries.

Regards,

Balaji Marimuthu

[Nurkmez]

Thanks for quick replay. It is very helpful.

[Nurkmez]

It is possible add checkbox to header for  checking and unchecking all item? 

There is a bug when I click any cell or row out of checkbox then all selected checkboxes are unchecked. 

Thanks

[Balaji Marimuthu]

Hi Nurkmez,

We have analyzed and achieved our requirement by using “headerTemplateID” property in the Grid columns and the records are selected in the checkbox change event.Please find the below code snippet.

    var templateform1 = $('<script type="text/x-jsrender" id="head"></script>').html('<input type="checkbox" id="headchk" />');

itemTemplate.ejGrid(

            {

                dataSource: window.gridData,

                allowPaging: true,

                allowSelection: true,

                selectionType: "multiple",

                columns: [

                     { headerTemplateID: "#head", template: true, templateID: "#checkboxTemplate", textAlign: ej.TextAlign.Center },

                   

                   . . . . .

           

            });

$("#headchk").change(function () {

               

                $("#Grid .rowCheckbox").on("change", checkChange);

                gridObj = $("#Grid").data("ejGrid");

                if ($("#headchk").is(':checked')) {

                    $(".rowCheckbox").prop('checked', true)

                    gridObj._multiSelectCtrlRequest = true;

                    gridObj.selectRows(0, gridObj.model.pageSettings.pageSize);

                    for (var i = 0; i < gridObj.model.pageSettings.pageSize; i++)

                        $($("#Grid .rowCheckbox")[i]).ejCheckBox({ "checked": true });// TO Select all rows in Grid Content

                }

                else {

                    $(".rowCheckbox").prop('checked', false)

                    for (var i = 0; i < gridObj.model.pageSettings.pageSize; i++)

                        $($("#Grid .rowCheckbox")[i]).ejCheckBox({ "checked": false })

                    gridObj.clearSelection();// To remove selection for all rows

                }

            });

Query:

There is a bug when I click any cell or row out of checkbox then all selected checkboxes are unchecked. 

We have achieved your requirement in recordclick event and press control key to select multiple records in row or cell. so we suggest you to use control key for select the row or cell out of checkbox.

Please find the sample for your reference.

http://www.syncfusion.com/downloads/support/directtrac/117956/Application1-1680004789.zip

Please let us know if you have any queries.

Regards,

Balaji Marimuthu

[Nurkmez]

Thanks for sample. How can can I get list of checked item as json format? 

[Balaji Marimuthu]

Hi Nurkmez,

Thank you for your update.

Based on your requirement, we have created the sample and the list of item appended in the textarea. Please find the below code snippet.

 var obj = $("#Grid").ejGrid("instance");

                var records = [];

                records = obj.getSelectedRecords();

                for (var i = 0; i < records.length; i++) {

                        $('#area').append("OrderID" + ":" + records[i].OrderID + "");

                }

               

By using “getSelectedRecords” method in the Grid we can get the checked items in the grid. We have attached the sample for you reference.

Please let us know if you have any queries.

http://www.syncfusion.com/downloads/support/directtrac/117956/checkbox561284509.zip

Regards,

Balaji Marimuthu