Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Can't get selected items from RadGrid inside tabs

1 Answer 176 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Darek
Top achievements
Rank 1
Darek asked on 16 Feb 2012, 01:36 PM
Hi,

I'm trying to use RadGrid inside RadMultiPage and noticed the problem with selecting grid rows on the client side.

Sometimes the get_selectedItems() method returns the array with valid number of items, but the items are undefined.

Please see the attached code.

Test scenario:

1. Start application, Data1 tab is activated.

2. Click checkbox inside GridClientSelectColumn header to select all rows.

3. Click [Test selected rows] button.

---> Problem: returned items are empty. Close the message box.

4. Click the row with ID=5 to select only this row.

5. Click [Test selected rows] button. 

---> Works fine. Close the message box. 

6: Click checkbox inside GridClientSelectColumn header to select all rows.

7. Click [Test selected rows] button.

---> Works fine. Close the message box. 

8. Click the row with ID=5 to select only this row.

6. Click tab [Data2] to change tab.

7. Click tab [Data1] to return to first tab. Row with ID=5 is selected.

8. Click [Test selected rows] button. 

 ---> Problem: returned item is empty. Close the message box. 

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication4.Default" %>
  
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptBlock ID ="radScriptBlock" runat="server">
        <script type="text/javascript">
  
            function radTabStrip_TabSelecting(sender, args)
            {
                var tab = args.get_tab();
                var multiPage = $find(sender.get_multiPageID());
                var pageView = multiPage.findPageViewByID(tab.get_pageViewID());
  
                if(pageView.get_element())
                    tab.set_postBack(false);
            }
  
            function btnTestSelectedItems1_Clicked(sender, args)
            {
                TestSelectedItems('<%= grdData1.ClientID %>');
            }
  
            function btnTestSelectedItems2_Clicked(sender, args)
            {
                TestSelectedItems('<%= grdData2.ClientID %>');
            }
  
            function btnTestSelectedItems3_Clicked(sender, args)
            {
                TestSelectedItems('<%= grdData3.ClientID %>');
            }
  
            function TestSelectedItems(grd)
            {
                var items = $find(grd).get_selectedItems();
  
                var msg = "Number of selected items: " + items.length + "\n\n";
                for(var i = 0; i < items.length; i++)
                {
                    msg += "Item" + i + ": ";
                    var item = items[i];
                    if(item)
                        msg += "ID = " + item.getDataKeyValue("ID");
                    else
                        msg += "null";
                    msg += "\n"
                }
      
                alert(msg);
  
            }
  
        </script>
    </telerik:RadScriptBlock>
    <telerik:RadScriptManager ID="radScriptManager" runat="server" />
    <telerik:RadAjaxLoadingPanel ID="radLoadingPanel" runat="server" />
    <telerik:RadTabStrip ID="radTabStrip" runat="server" MultiPageID="radMultiPage" SelectedIndex="0" OnClientTabSelecting="radTabStrip_TabSelecting" OnTabClick="radTabStrip_TabClick">
        <Tabs>
            <telerik:RadTab Text="Data1" PageViewID="pagData1">
            </telerik:RadTab>
            <telerik:RadTab Text="Data2" PageViewID="pagData2">
            </telerik:RadTab>
            <telerik:RadTab Text="Data3" PageViewID="pagData3">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage ID="radMultiPage" runat="server" SelectedIndex="0">
        <telerik:RadPageView ID="pagData1" runat="server" Visible="false">
            <telerik:RadGrid runat="server" ID="grdData1" AllowPaging="True" AllowSorting="True" AllowMultiRowSelection="True" ClientSettings-EnableRowHoverStyle="true" OnNeedDataSource="grdData_NeedDataSource">
                <MasterTableView ClientDataKeyNames="ID">
                    <Columns>
                        <telerik:GridClientSelectColumn />
                    </Columns>
                </MasterTableView>
                <ClientSettings EnableRowHoverStyle="true" Selecting-AllowRowSelect="true" />
            </telerik:RadGrid>
            <telerik:RadButton ID="btnTestSelectedItems1" runat="server" Text="Test selected rows" AutoPostBack="false" OnClientClicked="btnTestSelectedItems1_Clicked" />
        </telerik:RadPageView>
        <telerik:RadPageView ID="pagData2" runat="server" Visible="false">
            <telerik:RadGrid runat="server" ID="grdData2" AllowPaging="True" AllowSorting="True" AllowMultiRowSelection="True" ClientSettings-EnableRowHoverStyle="true" OnNeedDataSource="grdData_NeedDataSource">
                <MasterTableView ClientDataKeyNames="ID">
                    <Columns>
                        <telerik:GridClientSelectColumn />
                    </Columns>
                </MasterTableView>
                <ClientSettings EnableRowHoverStyle="true" Selecting-AllowRowSelect="true" />
            </telerik:RadGrid>
            <telerik:RadButton ID="btnTestSelectedItems2" runat="server" Text="Test selected rows" AutoPostBack="false" OnClientClicked="btnTestSelectedItems2_Clicked" />
        </telerik:RadPageView>
        <telerik:RadPageView ID="pagData3" runat="server" Visible="false">
            <telerik:RadGrid runat="server" ID="grdData3" AllowPaging="True" AllowSorting="True" AllowMultiRowSelection="True" ClientSettings-EnableRowHoverStyle="true" OnNeedDataSource="grdData_NeedDataSource">
                <MasterTableView ClientDataKeyNames="ID">
                    <Columns>
                        <telerik:GridClientSelectColumn />
                    </Columns>
                </MasterTableView>
                <ClientSettings EnableRowHoverStyle="true" Selecting-AllowRowSelect="true" />
            </telerik:RadGrid>
            <telerik:RadButton ID="btnTestSelectedItems3" runat="server" Text="Test selected rows" AutoPostBack="false" OnClientClicked="btnTestSelectedItems3_Clicked" />
        </telerik:RadPageView>
    </telerik:RadMultiPage>
    <telerik:RadAjaxManager runat="server" ID="radAjaxManager">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="radTabStrip">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="radTabStrip" />
                    <telerik:AjaxUpdatedControl ControlID="radMultiPage" LoadingPanelID="radLoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    </form>
</body>
</html>

using System;
using System.Data;
using System.Web.UI;
using Telerik.Web.UI;
  
namespace WebApplication4
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if(!this.IsPostBack)
                this.pagData1.Visible = true;
        }
          
        protected void radTabStrip_TabClick(object sender, Telerik.Web.UI.RadTabStripEventArgs e)
        {
            e.Tab.PageView.Visible = true;          
            e.Tab.PageView.Selected = true;
  
            foreach(Control control in e.Tab.PageView.Controls)
                if(control is RadGrid)
                    ((RadGrid)control).Rebind();
        }       
  
        protected void grdData_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
        {
            ((RadGrid)sender).DataSource = this.GetDataTable();
        }
  
        protected DataTable GetDataTable()
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("ID", typeof(int));
            dt.Columns.Add("Day", typeof(string));
            dt.Columns.Add("Date", typeof(DateTime));
  
            Random r = new Random();
            for(int i = 0; i < 100; i++)
            {
                DateTime dateTime = DateTime.Now.AddSeconds(-r.Next((int)TimeSpan.FromDays(365).TotalSeconds));
                dt.Rows.Add(i + 1, dateTime.DayOfWeek.ToString(), dateTime);
            }
  
            return dt;
        }
  
    }
}

1 Answer, 1 is accepted

Sort by
0
Accepted
Tsvetina
Telerik team
answered on 21 Feb 2012, 02:52 PM
Hello Darek,

In order to ensure that all grid item objects will be created when you try to access them, you should wire the client OnRowSelected event, as it forces the client GridDataItem objects to be created. Otherwise, they are not initially created for optimization purposes:
<ClientSettings EnableRowHoverStyle="true" Selecting-AllowRowSelect="true" ClientEvents-OnRowCreated="rowCreated" />

function rowCreated() { }


Greetings,
Tsvetina
the Telerik team
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Tags
Grid
Asked by
Darek
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Share this question
or