MultiRowSelection and GridClientSelectColumn

[Giovanni]

Hello,
In my grid I need to select multiple rows. I set AllowMultipleRowSelection to True and I added a GridClientSelectColumn.
All works fine but I would like a little different behaviour on the column with checkboxs. Now I have this:

1) If I click with mouse on the checkboxes I can select multiple rows
2) If I click with mouse on the background of the first cell (the one with the checkbox), I deselect all the rows except the current row
3) If I click with moouse on the others cell,  I deselect all the rows except the current one

I would like to modify the step 2 in this way:

2) If i click with the mouse on the background of the first cell I select the current row without deselecting the other rows. The click on the cell background must be equal to the click on the checkbox control.

Now the users have a different behaviour on the first cell and if they don't click exactly on the checkbox control they deselect all the previous selected rows.

Is it possible?
Thanks.

[Eyup]

Hello Giovanni,

Thank you for contacting us.

Please note that this is the default and expected behavior and you are supposed to hold Ctrl key down when selecting multiple items without the use of the ClientSelectColumn.

I have created a sample RadGrid web site where I implemented the requested behavior. Please check out the attached application and let me know if it helps you.

All the best,
Eyup
the Telerik team

[Giovanni]

Hello,
the sample is not what I need.
In your sample every time that I click on a row, the row is selected or deselected.
I want a complex scenario:

- If I click on the checkbox or on the background of the first cell only, the beaviour must be exacly the same of your sample
- If I click on the others cell, only the clicked row must be selected

At the moment I set UseClientSelectColumnOnly = False and the problem is only the click on the background of the first cell that I need to modify.

Thanks.

[Eyup]

[Eyup]

Hi Giovanni,

In such a case, you could modify the function from the provided web site as follows:

function toggleSelection(sender, args) {
    var enableDeselection = false;
    var firstEl = args.get_domEvent().target.firstElementChild;
    if (firstEl == null) {
        enableDeselection = true;
    }
    else {
        if (firstEl.id.indexOf("columnSelectCheckBox") < 0) {
            enableDeselection = true;
        }
    }
    if (enableDeselection) {
        sender.clearSelectedItems();
    }
    args.get_gridDataItem().set_selected(!args.get_gridDataItem().get_selected());
}

This should do the trick. Please give it a try and let me know about the result.

Regards,
Eyup
The Telerik Team

[Giovanni]

Hello,
the example works but I need to modified the function because the firstElementChild return always "undefined". Now I use the cellIndex and the final function is this:

function toggleSelection(sender, args)
{
  var enableDeselection = false;
  //var firstIndex = args.get_domEvent().target.firstElementChild;
  var firstIndex = args.get_domEvent().target.cellIndex;
  if (firstIndex == null) {
    enableDeselection = false;
  }
  else {
    if (firstIndex > 0) {
      enableDeselection = true;
    }
  }
  if (enableDeselection) {
    sender.clearSelectedItems();
  }
  args.get_gridDataItem().set_selected(!args.get_gridDataItem().get_selected());
}

However now I have another problem. If I use a RadFormDecorator to skin the checkboxes in the grid, the click on the check boxes doesn't works anymore. I simply added this to the provided example:

<telerik:RadFormDecorator ID="RadFormDecorator1" Skin="Simple" DecoratedControls="CheckBoxes" runat="server" />

Is there a way to restore the standard behaviour with skinned checkboxes?

Thanks.

[Eyup]

Hi Giovanni,

When decorated with RadFormDecorator, the select checkbox fires RowClicked event which interrupts your script function logic. Could you please try adding the following condition to your function?

function toggleSelection(sender, args) {
    if (args.get_domEvent().target.className.indexOf("rfdCheckbox") < 0) {
        var enableDeselection = false;
         ...
    }
}

I hope this will prove helpful.

All the Best,
Eyup
The Telerik Team