ASP.NET gridview - Allow multiselect from control key press down and left mouse button click together

Question

Single Row Selections requirement:

My current gridview selects the row just on click on the row. Thus, if the user click 2nd row and then 3rd row, its just not the recent (3rd) row but also the 2nd row is shown as selected. Now the requirement is, when the user selects the 2nd row, and then click on 3rd row, only the 3rd row should be selected and not the 2nd row.

Multi Row Selection requirement:

Also, the user should be allowed to select multiple rows by clicking on "CTRL" key together with the left mouse click on the rows.

How to achieve this using JAVASCRIPT? I am new to Javascript and or Gridview stuffs. Could someone please help me with this code please?

Please remember, our application is based on 2.0

Have a look on this tutorial - http://www.codeproject.com/Articles/202938/How-to-select-multiple-records-from-the-GridView-a — Arindam Nayak, Oct 21 '14 at 05:35
@ArindamNayak: Sorry, I looked at this 2 days back itself and for one day full. However, our client do not want this select checkbox. Could you do it with javascript? I know its just a simple small function 2 or 3 lines of code, but I do not know JS and how to post it back in UI where I handle logic — Jasmine, Oct 21 '14 at 05:38
if there will not be any checkbox, then how , one can multiselect, i mean what will be the handler for selection? — Arindam Nayak, Oct 21 '14 at 05:40
@ArindamNayak: Simple mate, just use a javascript function to capture the "CTRL+LEFT MOUSE BUTTON" key combination on GRIDVIEW ROW. If so, select. At the same time, if the selected row is clicked again, then deselect it. This logic I do not know how to implemented in code/syntax both in C# and Javascript. I know the concept but sad I do not know how to use code to achieve what I think. I am new — Jasmine, Oct 21 '14 at 05:42
I can post you a rough Idea, how to do it if you agree, but i have never tried that, this is just idea only. — Arindam Nayak, Oct 21 '14 at 05:54
@ArindamNayak: Ideally I am open to any ideas, nothing wrong in me listening to an idea and check if it works or not. But I would appreciate any code, but that's fine if you do not have time to write, I will try it. Please goahead — Jasmine, Oct 21 '14 at 05:57

score 0 · Answer 1 · edited May 23 '17 at 10:26

create global JS variable says , var rows_clicked = [].
Use following link to check how to detect CTRL + CLICK. We will use that in later step. - How to detect control+click in Javascript from an onclick div attribute?
Use this code to bind gridview row click event.

$('#<%=gvw.ClientID%> tr[id]').click(function() {
     // row click handler     , gridview id = gvw -- assumption
     // check if it is clicked earlier using IsClicked() 
     // if clicked 1st time, then call OnRowClick, else OnRowDeselect
      $(this).css("color","red");// set some css to look like selected.
});

function OnRowClick()
    {

      // detect if ctrl+clicked, then save that row's datakey to global 

      // if it is that, then 
      rows_clicked.push(datakey);
      // and set clicked = true.
      $(this).attr("clicked",true);
    }

4.

function OnRowDeselect()
{
// remove that datakey from `rows_clicked`
}

5.

 function IsClicked(element)
{
if($(element).attr("clicked")) // clicked is an attr to check if row clicked 1st time or deselected
return true;
else
return false;
}

Use this rows_clicked and set in hiddenfiled, and postback that to get selected rows in server side code.

ASP.NET gridview - Allow multiselect from control key press down and left mouse button click together

1 Answers1