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

New tab doesnt display the grid

5 Answers 114 Views

TabStrip

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

5 Answers, 1 is accepted

answered on 28 Nov 2011, 05:31 PM

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

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

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

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

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

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

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

<table width="100%">

<tr>

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

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitbar2" runat="server" CollapseMode="Both">

</telerik:RadSplitBar>

<telerik:RadPane ID="BottomPane" runat="server">

<table style="width: 100%">

<tr>

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

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

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

answered on 01 Dec 2011, 02:05 PM

DynamicTabStrip.zip

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

answered on 06 Dec 2011, 08:29 PM

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

New tab doesnt display the grid

5 Answers, 1 is accepted