Selecting single/multiple rows on RadGrid

5 posts, 1 answers
  1. Rohan
    Rohan avatar
    7 posts
    Member since:
    May 2011

    Posted 08 Jun 2011 Link to this post

    Hi,

    I was wondering if anyone would know how to perform the following:

    I have a RadGrid (emails) and I would like the following:

    Click on a row - select a single row, any other selected rows are de-selected (single selection - regardless of CTRL or SHIFT keys pressed)
    Click on a row selector checkbox - allow multiple row selections (CTRL/SHIFT keys)

    But the problem I have, if the user clicks on row 5 for example, it gets highlighted and then if they hold SHIFT key down and click on say row 8 below, all these rows are selected (5 to 8) but I want it to deselect the originally selected row (5) and then select the clicked row (8). I only want multiple selections to be made via the row selector checkbox click.

    If I turn on UseClientSelectColumnOnly="true" then it doesn't select the row when I click on it, only when I click on the row selector checkbox as per it's name suggests.

    This is ALL done client side, there are NO Postbacks. Data is fetched via web services.

    To visualise this: EmailClient - the grid holds a list of email headers, the user clicks on a row and the full email is displayed in the details area of the page below the grid. If they click another row, this email is then shown in detail. If they select multiple rows, no email is show in the details area but instead I want to show a count of which emails are selected e.g. "5 Email Selected"

    Hope someone can guide me ...

    Many thanks,

    Ro

     

     

     

     

     

  2. Gimmik
    Gimmik avatar
    170 posts
    Member since:
    May 2011

    Posted 10 Jun 2011 Link to this post

    Hi Ro,

    I think I have an idea that might work for your project. Firstly, you will need to have a RadGrid with AllowMultiRowSelection set to true. This is needed to support multiple selection at any level. I would then set the EnableDragToSelectRows property to false. You're also going to need a column with a RadButton to handle enable your custom multiple selection logic, however this column CAN NOT be a GridClientSelectColumn since that would wire-up selection logic. I would use a GridTemplateColumn and insert a RadButton into the template and set it's type to CustomToggle.

    Now, here is where it gets a little tricky:

    You have to maintain a state variable in JavaScript to let you know which "mode" your RadGrid in running in, either single selection or multiple selection. I called it multiSelectMode and it is set to false by default. You'll also maintain a counter for the number of RadButtons toggled ON. I called mine checkedCnt and initialize it to 0.

    Now, there are two client-side events that you will need to wire-up. RadButton.OnClientToggleStateChanging, RadGrid.OnRowSelected.

    Here's how it should work.

    When you click a row, OnRowSelected is fired after the row is selected, and get's passed the index of the clicked row. Depending on the state of multiSelectMode this function will behave one of two ways.

    If multiSelectMode = false
    • Clear all selected rows.
    • Reselect the clicked row.

    This will cause the RadGrid to act as if it were in single selection mode.

    If multiSelectMode = true

    This is your special case. If you don't want the row to select at all while in this mode then you can check the state of the ToggleButton in the same row, if it's toggled ON you can allow the selection, if it's toggled OFF you can deselect the row. You can select the row and also set the RadButton toggle state to ON.

    You'll also need to iterate through the rows and check the state of the RadButton, deselecting each row where the RadButton isn't toggled on. This it to handle the case where multiple rows are selected by holding SHIFT.

    The other client-side event you need to handle is RadButton.OnClientToggleStateChanging. It will be fired when a RadButton is toggled.
    When a RadButton is toggled ON, do the following:
    • Increment checkedCnt
    • Set multiSelectMode = true
    • Select the row

    When a RadButton is toggled OFF, do the following.
    • Decrement checkedCnt
    • If checkedCnt == 0, Set multiSelectMode = false
    • Deselect the row


    That should give you a RadGrid that acts both like a single selection RadGrid and a MultipleSelection RadGrid.

    I hope this is clear. Read it through a few times, it should make sense.
    Don't be afraid to ask if you have questions!

    -Gimmik
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rohan
    Rohan avatar
    7 posts
    Member since:
    May 2011

    Posted 13 Jun 2011 Link to this post

    Hi Gimmik,

    Thanks for you reply, very kind of you.

    Do you happen to have your test code to hand that you could supply? so I could work through it?

    No problem if not.

    Regards,

    Ro
  5. Answer
    Gimmik
    Gimmik avatar
    170 posts
    Member since:
    May 2011

    Posted 14 Jun 2011 Link to this post

    Hi Ro,

    I had bits and pieces - but not a full working prototype. It seemed like a cool idea so I worked up a sample project last night. I actually had to make a few changes to my document. I commented the code well - so let me know if you have any question. This should be a good base to get you started.

    Enjoy,
    -Gimmik

    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
     
        }
     
        // This method inserts a custom argument into the button control, which is
        // the index of the row that contains the button. This saves us a lot of
        // work later since we don't have to search the DOM client-side to get the
        // row index for selecting/deselecting.
        protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
        {
            if (e.Item is GridDataItem)
            {
                GridDataItem item = (GridDataItem)e.Item;
                RadButton btn = (RadButton)item.FindControl("RadButton1");
                 
                btn.CommandArgument = item.ItemIndex.ToString();
            }
        }
     
    }

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <%--Needed for JavaScript IntelliSense in VS2010--%>
                <%--For VS2008 replace RadScriptManager with ScriptManager--%>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <script type="text/javascript">
     
            // This is used to track which selection mode the RadGrid is using. While the RadGird is technically
            // always in MultiRowSelection mode, this global allows us to use pseudo-singular selection by
            // controling the selection logic.
            var multiSelectMode = false;
             
            // This tracks the number of checked boxes.
            var checkedCnt = 0;
             
            // This is used to indicate whether a selection event was fired via a row click or toggling the checkbox.
            var checkBoxClicked = false;
     
            // This function handles the selection event of the RadGrid.
            function RadGrid1_OnRowSelecting(sender, eventArgs) {
     
                var grid = $find("<%= RadGrid1.ClientID %>");
                var masterTable = grid.get_masterTableView();
     
                // The RadGrid is in Multi-Selection mode, e.g. using checkboxes
                if (multiSelectMode) {
     
                    // If the selection event was fired via a row click
                    if (!checkBoxClicked)
                        eventArgs.set_cancel(true); //Cancel the Selection
     
                    // Reset the checkbox indicator.
                    checkBoxClicked = false;
                }
     
                // The RadGrid is in Single Selection mode, e.g. using row clicks
                else {
     
                    // Clear all other selected rows - this mimics the built-in Single-selection.
                    masterTable.clearSelectedItems();
                }
     
                // If the selection wasn't canceled - the row will be selected.
            }
     
     
            // This function handles the deselection event of the RadGrid.
            function RadGrid1_OnRowDeselecting(sender, eventArgs) {
     
                // The RadGrid is in Multi-Selection mode, e.g. using checkboxes
                if (multiSelectMode) {
     
                    // If the deselection event was fired via a row click
                    if (!checkBoxClicked)
                        eventArgs.set_cancel(true); //Cancel the Selection
     
                    // Reset the checkbox indicator.
                    checkBoxClicked = false;
     
                }
     
                // If the RasGrid was in single selection mode - the deselection will happen normally.
     
                // Deselction will happen here.
     
            }
     
     
     
            // This function handles the changing of a checkbox state.
            function RadButton1_OnClientCheckedChanged(sender, eventArgs) {
     
                var grid = $find("<%= RadGrid1.ClientID %>");
                var masterTable = grid.get_masterTableView();
     
                // Set the checkbox indicator.
                checkBoxClicked = true;
     
                // Extract our custom arguement fron the RadButton. This saves us A LOT
                // of work later.
                var index = sender.get_commandArgument();
     
                // If the button was toggled ON
                if (eventArgs.get_checked()) {
     
                    // If this is the first checkbox checked
                    if (!checkedCnt)
                        masterTable.clearSelectedItems(); // Clear all selected items to reset the RadGrid
     
                    checkedCnt++;                       // Increment checkedCnt
                    multiSelectMode = true;             // Turn on Multi Selection mode.
                    masterTable.selectItem(index);      // Select the row using our handy index.
     
                }
     
                //If the button was toggled OFF
                else {
     
                    checkedCnt--;                       // Decrement checkedCnt
                     
                    //If this is the last remaining checked box
                    if (!checkedCnt)
                        multiSelectMode = false;        // Turn off Multi Selection mode.
     
                    masterTable.deselectItem(index);    // Deselect the unchecked row.
     
                }
            }
     
     
        </script>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        <div>
            <%-- Sample DataSource --%>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NORTHWNDConnectionString %>"
                SelectCommand="SELECT * FROM [Employees]"></asp:SqlDataSource>
             
            <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" AllowMultiRowSelection="true"
                OnItemCreated="RadGrid1_ItemCreated">
                 
                <MasterTableView>
                    <Columns>
                        <telerik:GridTemplateColumn>
                            <ItemTemplate>
                                <telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" ButtonType="ToggleButton"
                                    ToggleType="CheckBox" OnClientCheckedChanged="RadButton1_OnClientCheckedChanged">
                                </telerik:RadButton>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                    </Columns>
                </MasterTableView>
                 
                <ClientSettings>
                    <Selecting AllowRowSelect="true" EnableDragToSelectRows="false" />
                    <ClientEvents OnRowSelecting="RadGrid1_OnRowSelecting"
                        OnRowDeselecting="RadGrid1_OnRowDeselecting" />
                </ClientSettings>
             
            </telerik:RadGrid>
        </div>
        </form>
    </body>
    </html>
  6. Rohan
    Rohan avatar
    7 posts
    Member since:
    May 2011

    Posted 16 Jun 2011 Link to this post

    Thanks again Gimmik for the reply and the code sample, very kind of you to create a test project.

    I will work through this and try it out. Looks like it might do what I need it to.

    Thanks again

    Ro
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017