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

Grid with checkbox and multi-selection (highlight)

Thread ID:





117364 Oct 3,2014 08:37 PM UTC Oct 7,2014 10:41 AM UTC ASP.NET MVC 1
Tags: Grid
Asked On October 3, 2014 08:37 PM UTC


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.


Ragavee U S [Syncfusion]
Replied On 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.




        .Columns(col =>


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

              . . .     





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

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



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) {


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


        else {

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







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.



Ragavee U S


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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