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.
Unfortunately, activation email could not send to your email. Please try again.

Grid with checkbox and multi-selection (highlight)

Thread ID:

Created:

Updated:

Platform:

Replies:

117364 Oct 3,2014 04:37 PM Oct 7,2014 06:41 AM ASP.NET MVC 1
loading
Tags: Grid
Bruno
Asked On October 3, 2014 04:37 PM

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 [Syncfusion]
Replied On October 7, 2014 06:41 AM

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


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.

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.

;