Select / Deselect Row with only one click client side

[JUAN]

Hello everybody!

I have the following requeriments, using your RadGrid, is necesary select / deselect row with only one click including MultiSelectRow, I was trying with this code to select and deselect:

function RowClick(sender, eventArgs) {
           var grid = sender;
           var MasterTable = grid.get_masterTableView();
           var row = MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()];
           if (row._selected) {
              // row.set_selected(false);
               //MasterTable.deselectItem(MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()].get_element());
               MasterTable.deselectItem(eventArgs.get_itemIndexHierarchical());
          }

       }

But I doesn't work, I don't know if I need do something else, because MasterTable.deselectItem doesn't work , I'm passing the Row Index, but in the radgridview not changed anything

This my radgrid:

<telerik:RadGrid ID="rgv_options" runat="server" AllowMultiRowSelection="True" AutoGenerateColumns="False"
                        CellSpacing="0" GridLines="None" >
                        <MasterTableView AllowFilteringByColumn="False" >
                            <CommandItemSettings ExportToPdfText="Export to PDF" />
                            <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column" Visible="True">
                                <HeaderStyle Width="20px" />
                            </RowIndicatorColumn>
                            <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column" Visible="True">
                                <HeaderStyle Width="20px" />
                            </ExpandCollapseColumn>
                            <Columns>
                                <%-- <telerik:GridTemplateColumn AllowFiltering="false" ShowFilterIcon="false">
                                        <ItemTemplate>
                                            <asp:CheckBox ID="chk_selected" runat="server" />
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>--%>
                                <telerik:GridBoundColumn AllowFiltering="false" DataField="Value" FilterControlAltText="Filter column column"
                                    HeaderText="Value" UniqueName="column">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn AllowFiltering="false" DataField="Item" FilterControlAltText="Filter column1 column"
                                    HeaderText="Item" UniqueName="ItemColumn">
                                </telerik:GridBoundColumn>
                            </Columns>
                            <EditFormSettings>
                                <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                                </EditColumn>
                            </EditFormSettings>
                            <PagerStyle PageSizeControlType="RadComboBox" />
                        </MasterTableView>
                        <PagerStyle PageSizeControlType="RadComboBox" />
                        <FilterMenu EnableImageSprites="False">
                        </FilterMenu>
                        <ClientSettings>
                            <Selecting AllowRowSelect="true" />
                            <ClientEvents OnRowClick="RowClick" OnRowDeselecting="RowDeselecting" />

                        </ClientSettings>
                    </telerik:RadGrid>

Regards!

[Princy]

Hi Juan,

Please try the following code.

ASPX:

<ClientSettings>
    <Selecting AllowRowSelect="true" />
    <ClientEvents  OnRowSelected="RowClick" OnRowDeselected="Deselect" />
</ClientSettings>

JS:

function RowClick() {
    var grid = $find("<%=rgv_options.ClientID %>");
    var MasterTable = grid.get_masterTableView();
    var selectedItem = grid.get_masterTableView().get_selectedItems()[0];
    var index = selectedItem._itemIndexHierarchical;
    alert("Selected row " + index);
}

function Deselect() {
   alert("Deselected row ");
}

Thanks
Princy

[JUAN]

Thank you for your answered, the code works to select multiples rows , but I need when I click in a row selected, check if is selected and if it is, deselect the row clicked.

I checked if the row clicked is selected with this JS code and works

var row = MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()];
           if (row._selected) {

}

But after check if is selected  equals true, I need deselect the current row, I'm attempted use this function MasterTable.deselectItem(row) as you can see in this page
http://www.telerik.com/help/aspnet-ajax/grid-gridtableview-deselectitem.html

But this function doesnt work for me, I don't know if I'm doing some wrong.

Regards!

[Princy]

Hi Juan,

I guess you want to deselect the rows you select using deselectItem.
Please try this code.

ASPX:

<ClientSettings>
    <Selecting AllowRowSelect="true" />
       <ClientEvents  OnRowSelected="RowClick"  />
</ClientSettings>

JS:

function RowClick(sender, eventArgs)
   {
       var grid = sender;
       var MasterTable = grid.get_masterTableView();
       var length = MasterTable.get_selectedItems().length;
        var row = MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()];
        if (row._selected)
            alert("Selected");
         {
             for (var i = 0; i < length; i++)
              {
                  MasterTable.deselectItem(MasterTable.get_selectedItems()[i].get_element());
                  alert("Deselected");
             }
        }
   }

Thanks
Princy

[JUAN]

Hello, thank you for your time, exactly I need  deselect the rows I selected using some method to deselect, and only I found deselectItem method to do it, but it doesn't work, it supposed to do this, but the RadGrid  preserve the rows selected. If you have some other method inside RadGrid please let me know.

Regards!

[Princy]

Hi Juan,

Please try if this works.Using clearSelectedItems.Make sure you have set AllowRowSelect="true".

JS:

function RowClick(sender, eventArgs)
{
 var grid = sender;
 var MasterTable = grid.get_masterTableView();
 var row = MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()];
    if (row._selected)
      alert("Selected");
       {
          grid.clearSelectedItems();
       }
}

Thanks,
Princy

[Stacy]

Tried that code, does not do anything.  I have a grid, you can only select one row, not multiples.  I want the user to be able to deselect the row by clicking on it again.  I've tried lots of stuff form the forums but haven't found a working solution

[Konstantin Dikov]

Hi Stacy,

Following is a simple example demonstrating how to achieve the functionality that you have requested:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        var selectedState = false;
        function rowClick(sender, args) {
            selectedState = args.get_item().get_selected();
            sender.clearSelectedItems();
        }

        function rowSelecting(sender, args) {
            if (selectedState) {
                selectedState = false;
                args.set_cancel(true);
            }
        }
    </script>
</telerik:RadCodeBlock>

<telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource" ClientSettings-Selecting-AllowRowSelect="true">
    <ClientSettings>
        <ClientEvents OnRowClick="rowClick" OnRowSelecting="rowSelecting"/>
    </ClientSettings>
</telerik:RadGrid>

As you can notice, we are storing the current state of the row in a global variable and if the row was previously selected, we are preventing the selecting event.

Hope this helps.


Regards,
Konstantin Dikov
Telerik

[Stacy]

Thank you Konstantin, works fine!