This is a migrated thread and some comments may be shown as answers.

MultiRowSelection and GridClientSelectColumn

6 Answers 104 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Giovanni
Top achievements
Rank 1
Iron
Iron
Iron
Giovanni asked on 04 Sep 2012, 02:56 PM
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.

6 Answers, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 06 Sep 2012, 12:15 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Giovanni
Top achievements
Rank 1
Iron
Iron
Iron
answered on 06 Sep 2012, 02:41 PM
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.
0
Eyup
Telerik team
answered on 11 Sep 2012, 04:06 PM
0
Eyup
Telerik team
answered on 11 Sep 2012, 04:09 PM
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
0
Giovanni
Top achievements
Rank 1
Iron
Iron
Iron
answered on 12 Sep 2012, 07:18 AM
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.
0
Eyup
Telerik team
answered on 16 Sep 2012, 11:28 AM
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
Tags
Grid
Asked by
Giovanni
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Eyup
Telerik team
Giovanni
Top achievements
Rank 1
Iron
Iron
Iron
Share this question
or