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

Can't get selected items from RadGrid inside tabs

1 Answer 171 Views

Grid

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

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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

Accepted