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

MultiSlection with CheckBox in Grid Cell

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

6 Replies

BM Balaji Marimuthu Syncfusion Team January 20, 2015 10:37 AM UTC

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




NU Nurkmez January 20, 2015 11:33 AM UTC

Thanks for quick replay. It is very helpful.


NU Nurkmez January 20, 2015 11:52 AM UTC

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


BM Balaji Marimuthu Syncfusion Team January 21, 2015 04:55 PM UTC

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


NU Nurkmez January 22, 2015 11:41 AM UTC

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


BM Balaji Marimuthu Syncfusion Team January 23, 2015 01:49 PM UTC

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 + "\n");

                }

               

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



Loader.
Live Chat Icon For mobile
Up arrow icon