I am using two different TabContainer's on a single aspx page and I'd like to set the different widths, positions etc. using CSS. So far, this is what I have written:
[Code]....
The first TabContainer's CSSClass = Main, however this still affects the other TabContainer present.
I used ajax tabcontainer and 7 tabs in it.It works fine on my locahost but when i deployed it on server it doesn't show tabs background..it shows only labels as tab names.
View 1 RepliesI use a border for the TabContainer body which works fine.
[Code]....
also I use three hidden divs and one visible div inside a main div which works as body of Tabcontainer
I am using the code below to recreate a modalPopup window. At each UpdatePanel refresh I "lose" the window but I recreate it again after my Panel is updated. This gives me the impression that the windows is always open. The only problem is after I drag and drop it to a different location, the window is recreated back in its original location:
if ($find(MPIDList[clientID]) == null) {
$create(Sys.Extended.UI.ModalPopupBehavior,
{ "BackgroundCssClass": "modalBackground",
"CancelControlID": CancelControlIDList[instanceId],
"DropShadow": true,
"X": 50, "Y": 250,
"PopupControlID": PopupControlIDList[instanceId],
"PopupDragHandleControlID": PopupDragHandleControlIDList[instanceId],
"id": MPIDList[instanceId]
}, null, null, sender);
So I was trying to do the following:
1 - Initialize a global var for X and Y with the static values of 50 and 250;
2 - Show the window and drag it to a different location;
3 - UpdatePanel is refreshed and my Gridview is data bound with new data
On step 3 above I need to find a way to save the current window position BEFORE UpdatePanel is called and apply the saved position AFTER the UpdatePanel call is finished.
I am a newbie in web development I came from win form environment. how to set tabcontainer (ASP.Net Ajax Tool) width size according to users desktop screen resolution?
(setup and tools)
visual studio 3.5 sp1
AspNetAjaxLibraryBeta0911
At present we are using <ajax:TabContainer> to load tabs. I have 5 user controls inside <ajax:TabPanel>.
The problem is that all the data on these 5 pages gets loaded at once and increases the loading time as well as it is very hard to debug. Can we do lazy loading uisng TabContainer control? so that only the data of the current tab is loaded and when we click on the other tab then that's control data gets loaded.
Without using a Table (html or asp version), I'd like to align the Labels with the ListBoxes under them. There are 3 Labels and under them 3 Listboxes. I tried this:
[Code]....
When I look in the Immediate Window in VS, they all say "Nothing" (ex: ListBox6.Style.Item("left"))
Is there a good way to do this or am I going to have to deal with Tables?
m kinda new in asp.net ,i'm try to do a web form with 3 tabs but i want that the tabs will start from the right end of the screen and not from the left?is there a way to do it?i searched the properties list for such a thing , and i didn't fine it.
View 1 RepliesI have an asp.net page with couple of div elements on my page. Some of them are floating left and some are separated with <br /> elements.When I put a button which just post-backs and click that, I see that some divs (which were floated to left before) are repositioned to a new line
View 1 RepliesI created dynamic the tabpanel of tabcontainer, and the tabpanels change depended on the item which chooses from dropdownlist but the problem is tabcontainer keeping the last tabpanel and create another tabpanel and I couldn't remove them how I can rebulid the tabconatiner each postback
View 2 Replieshow to get vertical tab using tabcontainer in ajax controls.
View 2 RepliesHaving a strange issue with the TabContainer in the AJAX Toolkit. We have several views into a customer record system that we have built as ASP.net controls. These controls use UpdatePanels to load data asynchronously. We use jQuery and jquery.ui to place these controls in separate tabs on a single page. Which all works swimmingly. Lately, I've gotten a little tired of the jQuery tab hackish approach and decided to port everything to use the TabContainer. I want to be able to control the tabs as objects.
At first glance, everything works perfectly. I just slapped the controls into tabs in a TabContainer and everything looked great. However, for some reason, databound controls are losing their data. For instance, grid views vanish when I switch pages. A drop down control with an OnTextChanged event, loses its databound list of values upon post back. Something about the TabContainer -> Custom Control -> UpdatePanel -> Control that uses data binding heirarchy is throwing it out of whack and the debugger isn't shedding any light. It seems like control state isn't being stored. I don't really know enough about control state to know what to look for. Here is the markup for the TabContainer:
<asp:TabContainer ID="tcBanner" runat="server" ActiveTabIndex="0" Width="100%"
EnableViewState="False" ScrollBars="Vertical">
<asp:TabPanel runat="server" HeaderText="Comments" ID="tbComments">
<ContentTemplate>
<luBannerControl:Comments ID="commentsTabContent" runat="server" />
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel runat="server" HeaderText="General" ID="tbContact">
<ContentTemplate>
<luBannerControl:Contact ID="contactTabContent" runat="server" />
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
Here is the markup for one of the controls:
<asp:UpdatePanel ID="pnlComments" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:GridView ID="CommentsGridView" AllowPaging="true" PageSize="20" DataSourceID="BannerSqlDataSource" runat="server" AutoGenerateColumns="False" GridLines="None" CssClass="CommentGrid" HeaderStyle-CssClass="CommentGridHeader" RowStyle-CssClass="CommentRowsEven" AlternatingRowStyle-CssClass="CommentRowsOdd">
<Columns>
<asp:BoundField DataField="SPRCMNT_TEXT" HeaderText="Comment" SortExpression="SPRCMNT_TEXT" />
<asp:BoundField DataField="SPRCMNT_DATE" HeaderText="Created" SortExpression="SPRCMNT_DATE" DataFormatString="{0:M/dd/yyyy}" />
<asp:BoundField DataField="SPRCMNT_CMTT_CODE" HeaderText="Type" SortExpression="SPRCMNT_CMTT_CODE" />
<asp:BoundField DataField="SPRCMNT_CTYP_CODE" HeaderText="Source" SortExpression="SPRCMNT_CTYP_CODE" />
<asp:BoundField DataField="sprcmnt_user_id" HeaderText="User" SortExpression="sprcmnt_user_id" />
</Columns>
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="txtSearch" EventName="TextChanged" />
<asp:AsyncPostBackTrigger ControlID="btnClearFilter" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
I want to add a close button on each tab,just like the firefox.
It seams that Ajax Control Toolkit doesn't provide any method to close the tab.
I have try to use the .Remove() function,but it doesn't delete the tab...it just make it invisible and work correctly only once....
Could any give the code in C#..
[Code]....
</cc1:TabContainer>
I am making a TabContainer with several TabPanel. In one the TabPanel I have a video player. When I start the video and switch to an another TabPanel, the video stops.
How can I do to make the video continue to play when I switch to an another TabPanel ?
How to implement Table and Forms inside AJAX TabContainer in ASP.Net ...
View 1 RepliesI have some controls within panel control.
In the deisgn time they all appear 0th position on panel.
if the textbox's top is defined as 250px, in the design time also it should appear exactly at 250Px position instead it is appering at the 0px of panel.
all controls are appearing at the top of panel frame.
this problem i didn't see in vs 2003 1.1 framework, usign vs 2008 it started.
But at runtime they do appear perfect what ever the position they were suppose to.
I know for sure i may have to do some settings on the VS ide.
I have a .Net Web page that refreshes every few minutes, and all of this works fine. However, a user has made a request for some enhancements. There are two requests, which I am little unsure how to do
1) On my page are scrollable panels, what the user would like is for the position of the scrollbars to maintain their scrollable position during postbacks, because the scrollbars return to the top of panel during each post back. How do I keep the scrollable position of the panels - I have only 3 panels to content with
2) Inside each panel, are dynamically added controls, and these controls have an image button with some javascript which hides or shows a div tag. What the user wants is to maintain the show or hide of a div tag on each of these dynamically added controls during post back. How do I do this?
I want my webpage to be centered in the browser, but at the same time also have a minimum and maximum width.
I know I can center the page (well, the div element really) by setting the margin-left and margin-right CSS properties to auto. This works just fine and the page is centered, with room to spare on both the left and right side.
But, if your monitor is wide, this space is wasted, and I want the page to expand in that case. So instead of using 'auto' for the margin-left and margin-right properties, I used a fixed margin of 50px on both sides. Now, the site expands and shrinks with the browser nicely, and it is still centered.
However, I don't want the site to become too small, otherwise elements start overlapping. So, I set the min-width property in the CSS to 800px. This still works fine. I can resize the browser and the page shrinks, until it hits 800px then it simply stays in place.
The relevant CSS at this time is:
Code:
.page
{
margin: 10px 50px 10px 50px;
min-width: 800px;
}
A new problem now occurs when the browser window is too large. In that case the contents of the site are all on the left side, and the right side of the page (the page mainly consists of a grid) is empty. So what I want now is to also set a maximum width. I tried doing that by simply setting the max-width property in the CSS (to 1650px):
Code:
.page
{
margin: 10px 50px 10px 50px;
min-width: 800px;
max-width: 1650px;
}
This doesn't work the way I want though. While it doesn't expand the site further than 1650px, the site is no longer centered when the browser window is larger than that. The margin is kept fixed at 50px on the left, but it grows on the right side (because the page cannot grow any further).
So, I thought I could set the margins back to auto:
Code:
.page
{
margin: 10px auto 10px auto;
min-width: 800px;
max-width: 1650px;
}
While the page is large enough, this works just fine, the page is centered. However, if I now shrink the window again, so that the width of the page is below the max-width, there is no longer a margin on the left and right sides! The page just sits right against the browser edge...
What I basically need is a way to set the margin to auto, but with a minimum margin of 50px. Is that possible?
My current code to attempt to set widths for the rows on a gridview is:
protected void RowDataBound(Object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Header)
{
foreach (DataControlFieldHeaderCell dcfhc in e.Row.Cells)
{
dcfhc.Width = 100;
}
}
else
{
foreach (DataControlFieldCell dcfc in e.Row.Cells)
{
dcfc.Width = 100;
}
}
}
But that just keep all of the widths default! What am I doing wrong?
EDIT: I have already tried thise code as well!
PoolToDBHeaders.DataSource = new DataView(headerTable);
PoolToDBHeaders.DataBind();
foreach (DataControlField dcf in PoolToDBHeaders.Columns)
{
dcf.ItemStyle.Width = 100;
}
PoolToDBHeaders.DataBind();
I am having a problem floating div's inside the AJAX TabContainer. The content I place inside the TabPanel is jumping outside the border. Here is the code:
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="EquipmentDetails.aspx.cs" Inherits="DocumentSandbox.Web.WebForm4" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0">
<asp:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1">
<ContentTemplate>
<div>
<div>
<div><div>ID:</div><div>
<asp:TextBox ID="txtID" runat="server" CssClass="criteriatextbox"></asp:TextBox></div></div>
<div><div>Phone Number:</div><div>
<asp:TextBox ID="txtPhoneNumber" runat="server" CssClass="criteriatextbox"></asp:TextBox></div></div>
<div><div>Address:</div><div>
<asp:TextBox ID="txtAddress" runat="server" CssClass="criteriatextbox"></asp:TextBox></div></div>
</div>
<div>
<div><div>Last Name:</div><div>
<asp:TextBox ID="txtLastName" runat="server" CssClass="criteriatextbox"></asp:TextBox></div></div>
<div><div>First Name:</div><div>
<asp:TextBox ID="txtFirstName" runat="server" CssClass="criteriatextbox"></asp:TextBox></div></div>
<div><div>Middle Name:</div><div>
<asp:TextBox ID="txtMiddleName" runat="server" CssClass="criteriatextbox"></asp:TextBox></div></div>
</div>
</div>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
</asp:TabPanel>
</asp:TabContainer>
</asp:Content>
Here is the css for this code segment:
.searchcriteria
{
}
.searchresults
{
clear: both;
}
.criteriacolumn
{
float:left;
width:500px;
}
.criteriarow
{
width:498px;
height:24px;
padding-bottom:2px;
}
.criteriatextbox
{
padding-top: 3px;
float:left;
width:285px;
}
.criterialabel
{
width:200px;
padding-right: 6px;
text-align:right;
float:left;
}
I found a possible solution here: [URL], but I'm hoping for another option before I give up on having a border.
I have seen posts discussing this error however, no post has identified a solution to address the issue I am having, so here it goes.
I am using Micosoft Visual Studio 2008
.NET Framework 3.5 SP1
AjaxControlTookkit 3.5.40412.0
Step 1: I create a new, ASP.NET Web Application.
Step 2: Add a 'New Item' from the templates called 'AJAX Web Form'.
Step 3: In Source view go to the Toolbox and drug a 'TabContainer' directly below the ScriptManager tag.
Step 4: Switch to Design view and click 'Add New Tab' on the TabContainer control.
Step 5: Switch back to Source view and add a ContentTemplate open and close tag within the TabPanel tags.
Step 6: Between the open and close ContenTemplate tages add something. I added the following 2 letters, Hi.
Step 7: Set the page we have been working on to your startup page and run it.
Step 8: You will get the following exception every time. Sys.ArgumentUndefinedException: Value cannot be undefined. Parameter name: type
I have tried about 15 different ways to create the most simple use of this control and it fails every time in IE7 and FireFox.
The code.
[Code]....
I have a Collapsiblepanelextender and a TabContainer with two tabs. the code works fine in FF and Chrome but fails in IE8. I am using VS2008 .Net 3.5 and the latest AjaxToolkit.
I am trying to control the collapsible behavior through tab clicking using javascript. here is the code to replicate my problem.
The aspx.cs code:
[Code]....
How to activate a specific TabPanel in TabContainer from code behind? I tried the following but it doesn't change activate the tab.
[Code]....
I have a asp.net page that contains a Ajax TabContainer control with three tabs, this is all dynamically created and added using the code-behind file. Inside each tab I have one or more gridview controls that can cause a postback for various reasons.
When a gridview control causes a postback, the entire tabcontainer gets hidden on the page and therefore nothing is displayed. In the HTML source code I can see that the controls have been added to the page, but the tabcontainer has a style added to it (style="visibility: hidden"]. If I remove this style using the developer tools, the tabcontainer displays and all tabs, but some of the styling gets lost. Is there a specific reason why this occurs and how I can resolve this?
