New tab doesnt display the grid

6 posts, 0 answers
  1. Sachidanand
    Sachidanand avatar
    12 posts
    Member since:
    Jun 2011

    Posted 21 Nov 2011 Link to this post

    Hi,
     
    I am trying to open a new radtab on every Search button click. So basically the home page,
    opens in a tab which shows a textbox & search button. Then Everytime a user clicks on Search button I need to grab the search result & display in a  grid in a new tab. (so if search is clicked 3 times.. there will be 3 additional tabs). How can I achive this functionality?

    I was able to create a new tab for each click on button ("search"). The tab opens fine but the grid doesnt display. Not sure where I am going wrong. Can somebody please throw some light if there is any example scenario will be highly appreciated.

    During the debug I can see the result set is passsed to the new tab without any issue.

    Thank you
  2. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 24 Nov 2011 Link to this post

    Hi Sachidanand,

    Could you please share the implementation that you are using for adding tabs dynamically? Here you could find a demo showing how to dynamically add content.

    Regards,
    Dimitar Terziev
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sachidanand
    Sachidanand avatar
    12 posts
    Member since:
    Jun 2011

    Posted 28 Nov 2011 Link to this post

    Hi Dimitar,

    Thanks for the response. Below is the code I am using.

    search_22.aspx
    <%@ Page Language="c#" CodeFile="Search_22.aspx.cs" Inherits="Project3.Search_22" %>
      
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/DTD/xhtml11.dtd">
      
    <head id="Head1" runat="server">
        <title>Basic Search</title>
        <link id="Link1" href="~/styles/custom.css" rel="stylesheet" type="text/css" runat="server" />
        <link href="OxyPortal.css" rel="stylesheet" type="text/css" />  
        <style type="text/css">
            .MyImageButton
            {
               cursor: hand;
            }
            .itemHighlight
            {
                color: #fff;
                font-weight: bold;
                background-color: #888;
            }
              
            .altItemHighlight
            {
                color: #ccc;
                font-weight: bold;
                background-color: #777;
            }
            .MyEditButton
            {
                background-image:url(http://joomlalms.co.nz/images/lms_help/icons/edit_icon.png);
            }
        </style>
        <style type="text/css">
            fieldset
            {
                _background: none !important;
            }
            .style8
            {
                height: 40px;
                width: 555px;
            }
            .style9
            {
                height: 40px;
                width: 387px;
            }
            .style10
            {
                height: 38px;
                width: 892px;
            }
            .style11
            {
                height: 178px;
            }
            .style12
            {
                height: 287px;
            }
        </style>
    </head>
    <body class="BODY">
        <form id="mainForm" method="post" runat="server">
        <!-- content start -->
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" />
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableAjax="false">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="btnPostback">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="lblMessage" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadDataPager1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="lblMessage" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="resultListView" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="btn_Adv">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="lblMessage" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="btn_Bas" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="btn_Bas">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="lblMessage" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="btn_Adv" />
                        <telerik:AjaxUpdatedControl ControlID="btn_Bas" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadScriptBlock runat="server" ID="scriptBlock">
            <script type="text/javascript">
                    <!--
                var currentLoadingPanel = null;
                var currentUpdatedControl = null;
      
                serverDate = new Date('<%= DateTime.Now.ToString() %>');
                clientDate = new Date();
                diffMin = (serverDate.getTime() - clientDate.getTime()) / (1000 * 60);
      
                // document.forms.UserTimeZone.value = diffMin;
                // alert("serverDate: " + serverDate + "\r\n" + "clientDate: " + clientDate + "\r\n" + "diffMin: " + diffMin);
      
                function RequestStart(sender, args) {
                    currentLoadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID%>");
                    confirm("Are you sure you want to delete this property?");
                }
      
                function ResponseEnd() {
                    //hide the loading panel and clean up the global variables 
                    if (currentLoadingPanel != null) {
                        currentLoadingPanel.hide(currentUpdatedControl);
                    }
                    currentUpdatedControl = null;
                    currentLoadingPanel = null;
                }
      
                function isChildOf(parentId, element) {
                    while (element) {
                        if (element.id && element.id.indexOf(parentId) > -1) {
                            return true;
                        }
                        element = element.parentNode;
                    }
                    return false;
                }
      
                function CollapsePane(paneID) {
                    var splitter = $find("RadSplitter2");
                    var pane = splitter.getPaneById(paneID);
      
                    if (!pane) return;
      
                    if (!pane.get_collapsed()) {
                        pane.collapse();
                    }
                }
      
                function ExpandPane(paneID) {
                    var splitter = $find("RadSplitter2");
                    var pane = splitter.getPaneById(paneID);
      
                    if (!pane) return;
                    if (pane.get_collapsed()) {
                        pane.expand();
                    }
                }
      
                        -->
            </script>
      
        </telerik:RadScriptBlock>
        <!-- Add tab control -->
        <telerik:RadTabStrip ID="RadTabStrip1" Skin="Default" runat="server" MultiPageID="RadMultiPage1"
            SelectedIndex="0" Width="100%">
            <Tabs>
                <telerik:RadTab ID="Tab0" Text="Search" PageViewID="tabSearch" runat="server" Selected="true" />
            </Tabs>
        </telerik:RadTabStrip>
                <!-- -->
                <fieldset>
                    <legend></legend>
                    <dl>
                        <dt></dt>
                        <dd>
                            <!-- Start top Panel for RadToolbarButtons -->
                <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
                        <telerik:RadMultiPage ID="RadMultiPage1" runat="server" Width="100%" >
                            <telerik:RadPageView ID="tabSearch" runat="server">
                            <asp:Panel ID="Panel2" runat="server" Height="50px" Width="100%">
                                <span style="font-size: 10pt"></span>
                                <table width="100%" border="0" style="font-family: verdana; font-size: 11px; font-weight: bold;
                                    vertical-align: bottom;" cellspacing="2">
                                </table>
                            </asp:Panel>
                            <!-- End top Panel for RadToolbarButtons -->
                            <telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Horizontal" Width="100%"
                                Height="800px">
                                <telerik:RadPane ID="TopPane" runat="server" Height="75">
                                    <asp:Panel ID="Panel1" runat="server" HorizontalAlign="Center" Style="margin-left: 13px"
                                        Width="990px">
                                        <table>
                                            <tr>
                                                <td colspan="2">
                                                       
                                                </td>
                                                <tr>
                                                    <td>
                                                        <telerik:RadTextBox ID="tbSearch" TabIndex="1" runat="server" Width="400px" />
                                                    </td>
                                                    <td>
                                                        <asp:Button ID="btnPostback" runat="server" Visible="True" Text="Search" OnClick="btnPostback_Click" />
                                                    </td>
                                                    <td>
                                                        <asp:LinkButton ID="btn_Adv" AutoPostBack="True" Text="Advanced Search" runat="server"
                                                            OnClick="btn_Adv_Click" OnClientClick="ExpandPane('MiddlePane')" />
                                                        <asp:LinkButton ID="btn_Bas" AutoPostBack="True" Text="Basic Search" runat="server"
                                                            OnClick="btn_Bas_Click" OnClientClick="CollapsePane('MiddlePane')" Visible="false" />
                                                    </td>
                                                </tr>
                                        </table>
                                        <br />
                                    </asp:Panel>
                                </telerik:RadPane>
                                <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward">
                                </telerik:RadSplitBar>
                                <telerik:RadPane ID="MiddlePane" runat="server" Collapsed="true">
                                    <!-- RadGrids Starts -->
                                    <table width="100%">
                                        <tr>
                                            <!-- Grid : Where Clause -->
                                            <td style="vertical-align: top;" class="style8">
                                                <div style="float: left; padding: 0 6px 0 10px">
                                                    <asp:TextBox ID="TextBox1" runat="Server" Text="Drag rows up & down to set column order in Display grid" BorderColor="White" BorderWidth="0" width="100%" Height="11px" Font-Color="lightblue" Font-Italic="true" Font-Size="smaller"/>
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                    <!-- RadGrids Ends -->
                                </telerik:RadPane>
                                <telerik:RadSplitBar ID="RadSplitbar2" runat="server" CollapseMode="Both">
                                </telerik:RadSplitBar>
                                <telerik:RadPane ID="BottomPane" runat="server">
                                    <table style="width: 100%">
                                        <tr>
                                            <!-- Grid : Result -->
                                            <td style="vertical-align: top;" align="center">
                                                <asp:TextBox ID="TxtBx_resultListView" runat="Server" Text="Search Result" BorderColor="White"
                                                    BorderWidth="0" Font-Size="Large" />
                                            </td>
                                        </tr>
                                    </table>
                                    <table cellspacing="2" summary="">
                                        <tr>
                                            <!-- Label : message -->
                                            <td style="vertical-align: top;" class="style10">
                                                <asp:Label ID="lblMessage" runat="server" />
                                                <asp:Label ID="lblMessage2" runat="server" />
                                                <asp:Label ID="UserTimeZone" runat="server" Visible="True" />
                                                <div style="clear: both;">
                                                    <!-- -->
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                </telerik:RadPane>
                            </telerik:RadSplitter>
                <!-- content end -->
            </telerik:RadPageView>
            </telerik:RadMultiPage>
                        </dd>
                    </dl>
                </fieldset>
        </form>
    </body>
    </html>


    & search_22.aspx.cs
    using System;
    using System.Collections;
    using System.ComponentModel;
    using System.Data;
    using System.Drawing;
    using System.Net;
    using System.Web;
    using System.Web.SessionState;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.HtmlControls;
    using Telerik.Web.UI;
    using System.Collections.Generic;
    using System.Data.Common;
    using System.Configuration;
    using System.Data.SqlClient;
    using Microsoft.Web.Services3;
    using Microsoft.Web.Services3.Security;
    using Microsoft.Web.Services3.Security.Tokens;
    using System.Diagnostics;
    using System.Threading;
    using System.Security.Permissions;
    using System.Security.Principal;
    using System.ServiceModel;
    using System.Globalization;
    using System.Xml;
      
    namespace Project3
    {
      
        public partial class Search_22 : System.Web.UI.Page
        {
            LogHelper lh = new LogHelper();
            protected void btnPostback_Click(object sender, System.EventArgs e)
            {
                UpdateLabelFromFormControls((sender as Button).ID);
            }
      
            protected void btn_Adv_Click(object sender, System.EventArgs e)
            {
                UpdateLabelFromFormControls((sender as LinkButton).ID);
            }
      
            protected void btn_Bas_Click(object sender, System.EventArgs e)
            {
                UpdateLabelFromFormControls((sender as LinkButton).ID);
            }
      
            private void UpdateLabelFromRadControls(string id)
            {
                switch (id)
                {
                    default:
                        lblMessage.Text = string.Empty;
                        break;
                }
            }
      
            private void UpdateLabelFromFormControls(string id)
            {
                string xmlFilePath = MapPath("App_Data/Operator.xml");
                XmlDocument oDoc = new XmlDocument();
                oDoc.Load(xmlFilePath);
                XmlNodeList oNodeList;
      
                String mydtOffset = Session["userDT"].ToString();
      
                String strID = id;
      
                RadSplitbar2.Height = Unit.Pixel(10);
      
                switch (strID)
                {
                    case "btnPostback":
                        // Panel2.Visible = true;
                        try
                        {
      
                            String myName = Thread.CurrentPrincipal.Identity.Name.ToString();
                            lblMessage.Text = "Search submitted by:" + myName.ToString();
      
                            DataTable myTable = new DataTable();
                            string sql = "SELECT [SupplierID], [CompanyName], [ContactName], [City] FROM [Suppliers] ";
                            SqlDataAdapter adapter = new SqlDataAdapter(sql, ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString);
      
                            adapter.Fill(myTable);
                            Session["ResultFields"] = myTable;
      
                            // Rad Grid & Tab
                            Session["tabSelectedIndex"] = (int)Session["tabSelectedIndex"] + 1;
                            int mytabIndex = (int)Session["tabSelectedIndex"];
      
                            RadGrid RadGrid1 = new RadGrid();
                            RadGrid1.ID = "RadGrid" + mytabIndex.ToString();
      
                            // RadGrid1.DataSourceID = "SqlDataSource" + mytabIndex.ToString();
      
                            RadGrid1.Width = Unit.Percentage(100);
                            RadGrid1.PageSize = 5;
                            RadGrid1.AllowPaging = true;
                            RadGrid1.PagerStyle.Mode = GridPagerMode.NextPrevAndNumeric;
                            RadGrid1.AutoGenerateColumns = false;
                            RadGrid1.GroupingEnabled = true;
                            RadGrid1.ShowGroupPanel = true;
                            RadGrid1.ShowStatusBar = true;
                            RadGrid1.ClientSettings.AllowDragToGroup = true;
                            RadGrid1.MasterTableView.PageSize = 15;
      
                            RadGrid1.DataSource = myTable;
                            RadGrid1.DataBind();
                            RadGrid1.Visible = true;
      
                            // Create two RadPageView objects.   
                            RadPageView pageOne = new RadPageView();
                            pageOne.ID = "page" + mytabIndex.ToString();
                            RadMultiPage1.PageViews.Add(pageOne);
      
                            // Create the RadTab objects.   
                            RadTab tabOne = new RadTab("RadTab" + mytabIndex.ToString());
                            tabOne.PageViewID = pageOne.UniqueID;
      
                            // Create the tabstrip.   
                            RadTabStrip1.MultiPageID = RadMultiPage1.UniqueID;
                            RadTabStrip1.Tabs.Add(tabOne);
      
                            // Add the controls to the page.   
                            this.Controls.Add(RadTabStrip1);
                            this.Controls.Add(RadMultiPage1);
      
                            // Add the grid to the PageView.   
                            RadGrid1.MasterTableView.ID = RadGrid1.ID + "_MasterTableView";
                            pageOne.Controls.Add(RadGrid1);
                            // RadMultiPage1.PageViews[1].Controls.Add(RadGrid1);
                            RadTabStrip1.Tabs[mytabIndex].Selected = true;
                            RadTabStrip1.Tabs[mytabIndex].PageView.Selected = true;
      
                        }
                        catch (Exception ex)
                        {
                            lblMessage.Text = lblMessage.Text + "Error connecting the WebService: " + ex.Message.ToString();
                        }
      
                        break;
                    default:
                        lblMessage.Text = string.Empty;
                        break;
      
                }
            }
      
            public override void VerifyRenderingInServerForm(Control control)
            {
                // Confirms that an HtmlForm control is rendered for the
                // specified ASP.NET server control at run time.
                // No code required here.
            }
              
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!Page.IsPostBack)
                {
                    // Get server DateTime
                    EnableAjaxRendering();
                    Session["DataFields"] = null;
                    Session["tabSelectedIndex"] = 0;
      
                    // Get Client DateTime
                    var context = base.Context;
                    Session["userDT"] = context.Timestamp; // This will be set in the initial pages
                    RadMultiPage multiPage = (RadMultiPage)Page.FindControl("RadMultiPage1");
                    multiPage.SelectedIndex = 0;
      
                }
            }
      
            protected void EnableAjaxRendering()
            {
            }
      
            private void SetMessage(string message)
            {
                gridMessage = message;
            }
            private string gridMessage = null;
      
            private void LoadData()
            {
           }
            // End routines for RadGrid1
      
        }
    }

    Thank you
  5. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 01 Dec 2011 Link to this post

    Hi Sachidanand,

    The scenario you want to achieve is a bit tricky, it is not possible out of the box due to a ASP.NET ViewState limitations. For that matter, I've prepared a sample project from zero showing how to add grids dynamically upon clicking on button and preserve them over postbacks. You can find the sample attached to this replay.

    You can use precisely the same approach in your project as well. I hope this will help you to resolve the issue.

    Regards,
    Genady Sergeev
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  6. Sachidanand
    Sachidanand avatar
    12 posts
    Member since:
    Jun 2011

    Posted 06 Dec 2011 Link to this post

    Hi Genady,

    Thank you for the reply & the sample implementation. I have simillar implementation in another section. But for this one I went with the route where I no longer have to create the tabs dynmically. Instead I have now 2 "fixed" tabs (Tab1 which holds inital screen & Tab2 which holds result screen). Tab2 is hidden & is enabled & populates with the grid data when hit submit from Tab1.

    The problem I have now is when I hit submit the focus goes to the result tab (Tab2) but it doesnt show the grid inside. I have to click Tab1 & then again Tab2 to see the grid in result tab, Tab2. I have ajax control

    Can you throw some light here.
    Thank you
  7. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 09 Dec 2011 Link to this post

    Hi Sachidanand,

    As far as I understand when you click submit you manually select the second tab, but the content of the pageview is not shown. In such case please try to manually set the corresponding pageview as selected as well as the tab.

    Best wishes,
    Dimitar Terziev
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017