How to unselect a row in client side

[Muhamed Shafi]

Hi there,
     I have a rad grid in which client row selection is enabled but AllowMultiRowSelection="False". Here it's working great as intended except that once I selected a row, then its not possible to unselect the same row as I need to unselect the row (ie., No rows should be selected) in a particular case. I am using version 2009.3.1314.20. Any help would be appreciated

Thank you in advance
By Shafi

 

[Robert]

WHy dont you add the client side OnRowSelecting event? check to see if current row is selected and change that state. 

[Muhamed Shafi]

Hi Robert,
    Many thanks for the reply. I tried with onRowSelecting event.  Now the problem is the function argument values : sender and eventArgs are null and I am getting no reference to these variables. Is there anything to enable inorder to get these values in the client side funtion ?
Regards
Shafi

[Princy]

Hello Muhamed,

Give a try with the following code snippet and see if it helps.

ASPX:

<telerik:RadGrid ID="RadGrid2" runat="server" AllowMultiRowSelection="false">
    <MasterTableView>
        <Columns>

        </Columns>
    </MasterTableView>
    <ClientSettings Selecting-AllowRowSelect="true">
        <ClientEvents OnRowClick="RowClick" OnRowDeselecting="RowDeselecting" OnRowSelecting="RowSelecting" />
    </ClientSettings>
</telerik:RadGrid>

Java Script:

<script type="text/javascript">
    var flag = false;
    var index2 = -1;
    function RowClick(sender, args) {
        if (flag && index2 == args.get_itemIndexHierarchical()) {
            args.get_gridDataItem().set_selected(false);
            flag = false;
        }
    }
    function RowDeselecting(sender, args) {
        index2 = args.get_itemIndexHierarchical();
        flag = true;
    }
</script>

Thanks,
Princy.

[Muhamed Shafi]

Hi Princy,
    I have tried with the sample code. It simply unchecks the check box only,  but not removing the selection of the row and its selected row style. It also not persisting the state in the post back. 
Thanks & Regards
Shafi

[Mak]

Hi,

We too have also experienced this issue in the past without much luck of any resolve, we ended up going with an extra button on the page which resets the selected item, which as you might agree is not very usable.

We've found that when AllowMultiRowSelection="False", we can only select one item (which is intended) but if the user wishes to remove their selection then the grid will not accomodate for this.

If anyone can provide some help, would really be appreciated

 

Many thanks

 

Ahmed

[Matthew]

Agreed. We need support for this.

I attempted to emulate this functionality client-side to no avail. Other pages on our site do this, but they all do this in the ItemCommand event server-side. I'll work around it, but Telerik seems to make distinctions between single-select and multiple-select that are not intuitive to their users.

[Mak]

Hi Matthew,

We ended up getting around this scenario by Implementing the following:

- We removed the built-in Client Select column
- We created our own 'replica' Client-Select column using <ItemTemplate>
- Within the ItemTemplate, we added an input element (type=radio but checkbox should also work)
- We then need to call two JavaScript functions (can probably be handled in one), for the above element's onclick event:
- The first to clear the existing selected radio and then select the new radio
- The second to apply the SelectedRow style on the 'selected' radio item

function singleSelection(radiobutton) {
    /* Getting an array of all the "input" controls on the form.*/
    var allInput = radiobutton.form;
    var rb = allInput.getElementsByTagName("input");

    for (i = 0; i < rb.length; i++) {
        /*Checking if it is a radio button*/
        if (rb[i].type == "radio") {
            rb[i].checked = false;

        }
    }
    /*  make the clicked radio button checked */
    radiobutton.checked = true;
}

function SelectItem(radio) {
        var masterTable = $find("<%= RadGridAnswerOptions.ClientID %>").get_masterTableView();
        masterTable.selectItem(masterTable.get_dataItems()[radio.value - 1].get_element());
    }

- Finally, we use the RadGrids OnRowSelected ClientEvent to call another JavaScript function to replicate the Client-Select scenario where the radio/checkbox is selected when a user clicks anywhere in the row.

function SelectRadioButton(sender, eventArgs) {
      var index = eventArgs.get_itemIndexHierarchical();
      var MasterTable = sender.get_masterTableView();
      var row = MasterTable.get_dataItems()[index];
      var radio = row.findElement("RadioAnswerOption");
      var rb = document.getElementsByTagName("input");

      for (i = 0; i < rb.length; i++) {
          /*Checking if it is a radio button*/
          if (rb[i].type == "radio") {
              rb[i].checked = false;

          }
      }
      radio.checked = true;
  }

Hope that helps!

[Matthew]

Thanks Mak.

In the interest of time I simply did what we had done elsewhere on our site: Ajaxify the RadGrid, set the EnablePostBackOnRowClick property to true, and then handle selection or deselection in the ItemCommand event.

[Robert]

Telerik, can you please advise on how to perform this operation? We too are in need of it.

Thank You

[Princy]

Hi Robert,

Please try the following code snippet to deselect a selected row.

ASPX:

<ClientSettings Selecting-AllowRowSelect="true">
  <ClientEvents OnRowClick="OnRowClick" />
</ClientSettings>

JS:

<script type="text/javascript">
    function OnRowClick(sender, args) {
        var grid = $find("<%=RadGrid1.UniqueID%>");
        var MasterTable = grid.get_masterTableView();
        if (grid) {
            var item = MasterTable.get_dataItems()[args.get_itemIndexHierarchical()];
            if (item.get_selected()) {
                item.set_selected(false);
                MasterTable.rebind();
            }
        }
    }
</script>

Thanks,
Princy

[Robert]

Princy, worked like a charm !! Many thanks.