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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to select multiple rows

Thread ID:

Created:

Updated:

Platform:

Replies:

119685 Jul 21,2015 07:20 PM UTC Jul 22,2015 12:17 PM UTC JavaScript 1
loading
Tags: ejGrid
Edgar Ricardez Peralta
Asked On July 21, 2015 07:20 PM UTC

Hi

It is possible add checkbox to header column ejGrid HTML5/Javascript for checking and unchecking all rows?

How to setup column for select multiple rows with checkbox?

How to keep the selected rows when changing page?

How to identify all rows selected for multiple pages?

Thanks

Sellappandi Ramu [Syncfusion]
Replied On July 22, 2015 12:17 PM UTC

Hi Edgar Ricardez,

Thanks for using Syncfusion products.

Please find the response in below table.

Query
Response
1. It is possible add checkbox to header column ejGrid HTML5/Javascript for checking and unchecking all rows?
We have already logged the requirement “Multiple selection using checkbox” as feature in our database.  


As of now, your requirement can be achieved by using the following workaround solution, where we have used headerTemplate to render the check box in the header column and template column to render the check box in grid content.
Please refer the following example code.

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

        <input type="checkbox" class="rowCheckbox" />

    </script>

    <div id="checkboxheader">

        <input type="checkbox" class="rowCheckbox" />

    </div>

    <div id="Grid"></div>

    <script type="text/javascript">

        $(function () {// Document is ready.

            $("#Grid").ejGrid({

                dataSource: window.gridData,

                allowSelection: true,

                selectionType: "multiple",

                allowPaging: true,

                columns: [

                          { headerTemplateID: "#checkboxheader", template: true, templateID: "#checkboxTemplate", textAlign: ej.TextAlign.Center, width: 50 },//The checkbox column is bound to the grid using template property

                          ….


                ],

               

            });
        });

2. How to setup column for select multiple rows with checkbox?
This requirement can be achieved by using check box change event. In this event we are selecting the row dynamically.
Please refer the following example code.

function create(args) {

            window.selectedItems = [];

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

            $("#Grid .e-headertemplate .rowCheckbox").ejCheckBox({ "change": checkHeaderChange });

        }

function checkChange(e) {

            var trueCheckBox = $("#Grid .e-templatecell .rowCheckbox").parent("span[aria-checked='true']").parent("td");

            var falseCheckBox = $("#Grid .e-templatecell .rowCheckbox").parent("span[aria-checked='false']").parent("td");

            trueCheckBox.addClass("e-selectionbackground e-active");

            trueCheckBox.siblings().addClass("e-selectionbackground e-active");

            falseCheckBox.removeClass("e-selectionbackground e-active");

            falseCheckBox.siblings().removeClass("e-selectionbackground e-active");

            if ($("#Grid .e-templatecell .rowCheckbox").parent("span[aria-checked='false']").length == 0)

                $("#Grid .e-headertemplate .rowCheckbox").ejCheckBox({ "checked": true });

            else

                $("#Grid .e-headertemplate .rowCheckbox").ejCheckBox({ "checked": false });
        }

function checkHeaderChange(e) {

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

            if (e.isChecked) {

                $("#Grid .e-templatecell .rowCheckbox").ejCheckBox({ "checked": true });

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

            }

            else {

                $("#Grid .e-templatecell .rowCheckbox").ejCheckBox({ "checked": false });

                gridObj.clearSelection();

            }
        }

3. How to keep the selected rows when changing page?
By default, the grid selected rows will be removed while performing the paging operation. So, we used actionBegin and actionComplete events to store the selected row index in local storage (window.selectedItems) to maintain that selection.
Please refer the following example code.

function begin(args) {

            if (args.requestType == "paging") {

                var proxy = this;

                var selectedRows = $("#Grid .e-templatecell .rowCheckbox").parent("span[aria-checked='true']").parents("tr");

                var selectedRowIndex = [];

                $.grep(selectedRows, function (value) {

                    if ($.inArray(value, proxy.getRows()) != -1)

                        selectedRowIndex.push($.inArray(value, proxy.getRows()));

                });

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

                    if (window.selectedItems[i].page == args.previousPage) {

                        window.selectedItems.splice(i, 1)

                        break;

                    }

                }

                window.selectedItems.push({ page: args.previousPage, selectedIndex: selectedRowIndex });

            }
        }

function complete(args) {

            if (args.requestType == "paging") {

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

                obj = $("#Grid .e-headertemplate .rowCheckbox").ejCheckBox("instance");

                if (obj.isChecked()) {

                    $("#Grid .e-templatecell .rowCheckbox").ejCheckBox({ "checked": true });

                    this.selectRows(0, gridObj.model.pageSettings.pageSize - 1);

                    window.selectedItems = [];

                }

                else if (window.selectedItems.length != 0)

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

                        if (window.selectedItems[i].page == args.currentPage) {

                            for (var j = 0; j < window.selectedItems[i].selectedIndex.length; j++)

                                $($("#Grid .e-templatecell .rowCheckbox")[window.selectedItems[i].selectedIndex[j]]).ejCheckBox({ "checked": true });

                        }

                    }

                else {

                    $("#Grid .e-templatecell .rowCheckbox").ejCheckBox({ "checked": false });

                    window.selectedItems = [];

                    this.clearSelection();

                }

                checkChange();

            }
        }

4. How to identify all rows selected for multiple pages?
We can identify the data by using the local storage (window.selectedItems). All the selected row index are stored in window.selectedItems.

Please refer the following online playground sample.

Sample Link: http://jsplayground.syncfusion.com/iis3lqsc

We have attached the online KB link in below for your reference.

KB Link: http://www.syncfusion.com/kb/3180/how-to-perform-multiple-row-selection-using-checkbox-in-a-grid

Note: The above KB link we have rendered check box in content alone to select the rows.

Please try the above sample and get back to us if you have any concerns.

Regards,
Sellappandi R

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

;