Select / Deselect Row with only one click client side

9 posts, 0 answers
  1. JUAN
    JUAN  avatar
    3 posts
    Member since:
    Mar 2013

    Posted 10 Jun 2013 Link to this post

    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!

  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 10 Jun 2013 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. JUAN
    JUAN  avatar
    3 posts
    Member since:
    Mar 2013

    Posted 11 Jun 2013 Link to this post

    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!
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 11 Jun 2013 Link to this post

    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
  6. JUAN
    JUAN  avatar
    3 posts
    Member since:
    Mar 2013

    Posted 13 Jun 2013 Link to this post

    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!


  7. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 13 Jun 2013 Link to this post

    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
  8. Stacy
    Stacy avatar
    98 posts
    Member since:
    Dec 2010

    Posted 02 Jul 2015 in reply to Princy Link to this post

    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
  9. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 06 Jul 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  10. Stacy
    Stacy avatar
    98 posts
    Member since:
    Dec 2010

    Posted 07 Jul 2015 in reply to Konstantin Dikov Link to this post

    Thank you Konstantin, works fine!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017