Grid with checkbox and multi-selection (highlight)

[Bruno]

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.

[Ragavee U S]

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