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

Selecting single/multiple rows on RadGrid

4 Answers 965 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Rohan
Top achievements
Rank 1
Rohan asked on 08 Jun 2011, 01:55 PM
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

 

 

 

 

 

4 Answers, 1 is accepted

Sort by
0
Gimmik
Top achievements
Rank 1
answered on 10 Jun 2011, 08:39 PM
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
0
Rohan
Top achievements
Rank 1
answered on 13 Jun 2011, 09:50 AM
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
0
Accepted
Gimmik
Top achievements
Rank 1
answered on 14 Jun 2011, 03:55 PM
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>
0
Rohan
Top achievements
Rank 1
answered on 16 Jun 2011, 02:42 PM
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
Tags
Grid
Asked by
Rohan
Top achievements
Rank 1
Answers by
Gimmik
Top achievements
Rank 1
Rohan
Top achievements
Rank 1
Share this question
or