[Solved] RadGrid Client Side Multi Row Select (One click at a time)

[Eric]

Hello!

I need to know how to allow users to select one row of a RadGrid at a time (client-side), without having everything de-selected with a click. I've done this server-side, so now I'm trying to do this client side. Here is what I have figured out so far:

I first create an Array() object to hold the unique IDs of the rows that are to stay selected:

var uniqueIdArray = new Array();

Next, I have subscribed to the ClientEvents OnRowSelected and OnRowDeselected events with these functions:

// Add the ID to the array of selected rows.
function ThemeSelected(sender, args) { 
     uniqueIdArray.push(args.getDataKeyValue("IdNo"));
}

// Remove the ID to the array of selected rows.
function ThemeDeselected(sender, args) {
      uniqueIdArray.splice(selThemes.indexOf(args.getDataKeyValue("IdNo")), 1);
 }

Now what I need is a function that would force the rows that are selected to stay selected. The variable "uniqueIdArray" has the items that are selected. But, if I click on another row (to select it), the first thing that is fired is the "deselection" prior to the selection of the new row.

So, how do I cancel deselects when I don't want them?

Thanks!

-Eric

[Jayesh Goyani]

Hello,

1. Allow multi row selection.

AllowMultiRowSelection="true"

2.  how to avoid RowDeselected events.

<ClientEvents OnRowDeselecting="RowDeselecting" />

function RowDeselecting(sender, eventArgs) {
               eventArgs.set_cancel(true) //cancel event
           }

3. Please check below to preserve selected row in all pages.
http://www.telerik.com/community/forums/aspnet-ajax/grid/finding-all-selected-radgrid-rows-on-all-pages.aspx

Thanks,
Jayesh Goyani

[Eric]

I believe I found the "secret sauce" for having more than one item selected in a RadGrid while using JavaScript (client side) programming.

Here it goes:

First of all, you are going to want to subscribe to these client events:

<ClientEvents
    OnRowClick="RowClick"
    OnRowDeselecting="ThemeDeselecting"
    OnRowSelecting="ThemeSelecting"
    />

Next, you'll need a couple javascript variables to track what is going on:

var initialClick;
var action;

Here are the JavaScript functions used to maintain state:

// Most of the time, RowClick fires first. If it does,
// track which row was initially clicked on.

// You will need this later.

function RowClick(sender, args) {

 action = "rowClick";

 initialClick = args.get_itemIndexHierarchical();

}

 

// This function handles selections.

function ThemeSelecting(sender, args) {

 

  // Get the row for which this event is firing.

 //  Note: This may or may not of fired as a direct result

 // of a mouse click. We need to be careful of that.

  var thisClick = args.get_itemIndexHierarchical();

 

// If this is the row we clicked on, allow it to be selected.

// If action is "rowDesel" it means the the deselecting event

// fired first, and the point of this event is to de-select something,

// not select it. So long as this is NOT a de-selection, AND this

// is the row we originally clicked on, select it.

  if ((initialClick == thisClick) && (action != "rowDesel")) {

    action = "rowSel"; // This is tracking what the last event was.

    // You do have to do anything to select a row, just allow it to happen on it's own.

  }

  else {

    // Don't do anything, this is not our target row, or, the intention is to

    // do something other than select a row.

    args.set_cancel(true); // Cancels event.

  }

 }

 

// This function handles de-selections.

function ThemeDeselecting(sender, args) {

  // Get the row number for which this event is being fired upon.

  var thisClick = args.get_itemIndexHierarchical();

 

  // If this event is acting upon the row that was selected, then allow it to continue

  // (de-select).

  if (initialClick == thisClick) {

    action = "rowDesel";  // This is tracking what the last event was.

  }

  else {

    // Don't do anything, this is not our target row.

    args.set_cancel(true);

  }

 }

That's it! No guarantee it is going to work perfectly for you, but it seems to be working OK for me.

Happy coding!