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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

MultiSlection with CheckBox in Grid Cell

Thread ID:

Created:

Updated:

Platform:

Replies:

117956 Jan 13,2015 01:20 PM UTC Jan 23,2015 01:49 PM UTC LightSwitch HTML 6
loading
Tags: Grid
Nurkmez
Asked On January 13, 2015 01:20 PM UTC

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 [Syncfusion]
Replied On 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



Nurkmez
Replied On January 20, 2015 11:33 AM UTC

Thanks for quick replay. It is very helpful.

Nurkmez
Replied On 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

Balaji Marimuthu [Syncfusion]
Replied On 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

Nurkmez
Replied On January 22, 2015 11:41 AM UTC

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

Balaji Marimuthu [Syncfusion]
Replied On 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



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;