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

Grid with checkbox and multi-selection (highlight)

Dear,

I'd like to know whether there is some example of grid with checkbox in the first column? However I'd also like to continue using the multi-selection with ctrl key. The behaviour would be:

  1. When I click on checkbox then the line will would be selected (highlight).
  2. When I click on another checkbox then would have 2 lines selected (highlight)
  3. When I use crtl key and I select with the mouse an another line then the checkbox of this line would be checked and the same line would be selected (highlight). So we have 3 lines selected with checkbox checked and highlighted.

Thanks
Bruno.

1 Reply

RU Ragavee U S Syncfusion Team October 7, 2014 10:41 AM UTC

Hi Bruno

 

Thanks for your interest in Syncfusion Products.

 

Based on your requirement, we have created a sample to select multiple records using checkbox and by using the ctrl key. The sample can be downloaded from the below location.

 

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/MVC_Sample_-_12.2.0.36684870174.zip

 

In the above sample, we have bound a checkbox column to the grid using the Template property of the grid. Please refer the below code snippet.

 

@(Html.EJ().Grid<object>("Grid")   

         .SelectionType(SelectionType.Multiple)

        .Columns(col =>

                {

                    col.HeaderText("Checkbox Column").Template(true).TemplateID("#checkboxTemplate").TextAlign(TextAlign.Center).Add();

              . . .     

        })      

        .ClientSideEvents(eve=>eve.RecordClick("RecordClick").RowSelecting("RowSelecting"))       

    ) 

 

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

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

script>

 

In the rowSelecting event of the grid, we have set the _multiSelectCtrlRequest property as true on clicking the checkbox. Please refer the below code snippet

 

<script type="text/javascript">

    var selection;

 

    function RowSelecting(e) {

        selection = this._multiSelectCtrlRequest;

        if ($(window.document.activeElement).hasClass("rowCheckbox") == true)

            this._multiSelectCtrlRequest = true;

    }

 

    function RecordClick(e) {

 

        if (selection == false) {

            this.clearSelection();

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

        }

        else {

            $($(e.row).find("td:first > input")).prop("checked", true)

        }

    }

   

 

script>

 

Note: In the above sample, we have used the private property _multiSelectCtrlRequest in order enable multiple selection. We have changed it to public property multiSelectCtrlRequest in our Volume 2, Service Pack 1 release. So we suggest you to upgrade to v12.2.0.39 for better follow up.

 

Please try the above sample and get back to us if you need any further assistance.

 

Regards

Ragavee U S


Loader.
Up arrow icon