Whenever I collapse or open node in the tree view, it jumps up and down to be in the middle of the page. Is there any way to keep it still in its position and prevent that?
Here's some CSS to fix this (I'm assuming this is happening in Firefox?):
<div id="idTreeView">
<asp:TreeView ID="TreeView1" runat="server"
DataSourceID="SiteMapDataSource1"
HoverNodeStyle-Height="0" Font-Bold="true" ImageSet="BulletedList">
<RootNodeStyle Font-Bold="True" />
<ParentNodeStyle VerticalPadding="0px" Font-Bold="True" Font-Underline="false" />
<HoverNodeStyle Font-Underline="false" ForeColor="#5555DD" />
<NodeStyle Font-Bold="False" Font-Size="8pt" CssClass="sitelink"
ForeColor="Black" HorizontalPadding="5px" NodeSpacing="0px" VerticalPadding="0px" />
</asp:TreeView>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</div>
div#idTreeView img
{
display: block;
float: left;
}
div#idTreeView div
{
display: inline-block;
}
div#idTreeView .sitelink a
{
text-decoration:none;
}
Related
I have a asp.net aspx with the code as below:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="globalWrapper">
<div class="Header">
<asp:DropDownList ID="dropDownState" runat="server" class="Controls">
</asp:DropDownList>
<asp:TextBox ID="txtFromDate" runat="server" Text="Choose From Date..." class="Controls"></asp:TextBox>
<asp:Button ID="btnFromDate" runat="server" Text="..." class="btnDate" OnClick="btnFromDate_Click" />
<asp:TextBox ID="txtToDate" runat="server" Text="Choose To Date..." class="Controls"></asp:TextBox>
<asp:Button ID="btnToDate" runat="server" Text="..." class="btnDate" OnClick="btnToDate_Click" />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" class="btnControls" OnClick="btnSubmit_Click" />
<asp:Button ID="btnLogout" runat="server" Text="Log Out" class="btnControls" OnClick="btnLogout_Click" />
</div>
<div class="calendarFromDate">
<asp:Calendar ID="calendarFromDate" runat="server" BackColor="White"
BorderColor="#3366CC" BorderWidth="1px" CellPadding="1"
DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt"
ForeColor="#003399" Height="200px" Visible="False" Width="220px"
onselectionchanged="calendarFromDate_SelectionChanged">
<DayHeaderStyle BackColor="#99CCCC" ForeColor="#336666" Height="1px" />
<NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF" />
<OtherMonthDayStyle ForeColor="#999999" />
<SelectedDayStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
<SelectorStyle BackColor="#99CCCC" ForeColor="#336666" />
<TitleStyle BackColor="#003399" BorderColor="#3366CC" BorderWidth="1px"
Font-Bold="True" Font-Size="10pt" ForeColor="#CCCCFF" Height="25px" />
<TodayDayStyle BackColor="#99CCCC" ForeColor="White" />
<WeekendDayStyle BackColor="#CCCCFF" />
</asp:Calendar>
</div>
<div class="calendarToDate">
<asp:Calendar ID="calendarToDate" runat="server" BackColor="White"
BorderColor="#3366CC" BorderWidth="1px" CellPadding="1"
DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt"
ForeColor="#003399" Height="200px" Visible="False" Width="220px"
onselectionchanged="calendarToDate_SelectionChanged">
<DayHeaderStyle BackColor="#99CCCC" ForeColor="#336666" Height="1px" />
<NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF" />
<OtherMonthDayStyle ForeColor="#999999" />
<SelectedDayStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
<SelectorStyle BackColor="#99CCCC" ForeColor="#336666" />
<TitleStyle BackColor="#003399" BorderColor="#3366CC" BorderWidth="1px"
Font-Bold="True" Font-Size="10pt" ForeColor="#CCCCFF" Height="25px" />
<TodayDayStyle BackColor="#99CCCC" ForeColor="White" />
<WeekendDayStyle BackColor="#CCCCFF" />
</asp:Calendar>
</div>
<div class="Contents">
<div class="gridView">
<asp:GridView ID="gridStateErrorData" runat="server" BackColor="White" BorderColor="#336666"
BorderStyle="Double" BorderWidth="3px" CellPadding="4" HorizontalAlign="Center">
<FooterStyle BackColor="White" ForeColor="#333333" />
<HeaderStyle BackColor="#336666" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#336666" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="White" ForeColor="#333333" />
<SelectedRowStyle BackColor="#339966" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F7F7F7" />
<SortedAscendingHeaderStyle BackColor="#487575" />
<SortedDescendingCellStyle BackColor="#E5E5E5" />
<SortedDescendingHeaderStyle BackColor="#275353" />
</asp:GridView>
</div>
</div>
<div id="chart_container" class="chartContainer" runat="server">
</div>
<asp:Literal ID="literalMapIndia" runat="server"></asp:Literal>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnFromDate" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="btnToDate" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="dropDownState" EventName="SelectedIndexChanged" />
<asp:PostBackTrigger ControlID="btnSubmit" />
<asp:PostBackTrigger ControlID="btnLogout" />
</Triggers>
</asp:UpdatePanel>
</form>
On Submit button click based on logic it is fetching the data from SQL Server 2008 and should display it in GridView. But on execution I'm unable to see the GridView on web page. However if I switch to design mode in visual studio I can pretty much see the GridView there.
I tried removing the division's calendarFromDate and calendarToDate the GridView works fine. I think these div's are actually hiding the underlying GridView. I tried using "z-index = -1" as style attribute to them but no change. What am I missing here? Thanks in advance
My CSS is as below:
body
{
background: #B4C8E1;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
}
.globalWrapper
{
width: 100%;
height:auto;
background-color : #6E83B6;
}
.Header
{
width : 99%;
margin-left:0.5%;
border:2px solid black;
height: 45px;
background-color:Blue;
vertical-align:middle;
}
.Controls
{
margin-top:10px;
margin-left:6%;
font-weight:bold;
text-align:center;
}
.btnControls
{
margin-top:10px;
margin-left:6%;
width: 8%;
font-weight:bold;
}
.btnDate
{
width:3%;
text-align:center;
font-weight:bold;
}
.calendarFromDate
{
position:relative;
margin-left:29%;
float:left;
width:17%;
}
.calendarToDate
{
position:relative;
margin-right:32%;
float:right;
width:17%;
}
.Contents
{
width: 99%;
height: auto;
margin-left:0.5%;
border:2px solid black;
}
.gridView
{
width:50%;
height:auto;
margin-left:25%;
text-align:center;
}
.chartContainer
{
width:90%;
height:600px;
margin-left:5%;
z-index:-1;
}
Edit : Code Behind
protected void btnSubmit_Click(object sender, EventArgs e)
{
chart_container.Visible = false;
List<StateData> stateData = new List<StateData>();
DataAccessLayer data = new DataAccessLayer();
stateData = data.getStateData(dropDownState.SelectedItem.Text.ToString(), txtFromDate.Text.ToString(), txtToDate.Text.ToString());
gridStateErrorData.DataSource = stateData;
gridStateErrorData.DataBind();
}
I think two divisions calendarFromDate and calendarToDate are hiding the regarding division as you said.
Try adding specific height and float property to Contents and gridView classes in your css code.
.Contents
{
width: 99%;
height: 500px;
margin-left:0.5%;
border:2px solid black;
float:left;
}
.gridView
{
width:50%;
height:600px;
margin-left:25%;
text-align:center;
float:left;
}
i have some long data in my gridview and need a scrollbar (to the gridview).
try few ways - non of them works.
i guess because the postback or the databind..
the asp.net code:
<asp:GridView ID="gvGuess" runat="server" AllowSorting="True" OnSorting="gridView_Sorting" OnRowCreated="GridView1_RowCreated" OnRowDataBound="gvGuess_RowDataBound" Style="top: 301px; left: 212px; direction: rtl; overflow:scroll; position: absolute; height: 176px; width: 359px" BackColor="White" BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" CellPadding="3" GridLines="None">
<AlternatingRowStyle BackColor="#F7F7F7" />
<FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
<HeaderStyle BackColor="#4A3C8C" HorizontalAlign="Center" Font-Bold="True" ForeColor="#F7F7F7" />
<PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" HorizontalAlign="Right" />
<RowStyle BackColor="#E7E7FF" HorizontalAlign="Center" ForeColor="#4A3C8C" />
<SelectedRowStyle BackColor="White" Font-Bold="True" ForeColor="#F7F7F7" />
<SortedAscendingCellStyle BackColor="#F4F4FD" />
<SortedAscendingHeaderStyle BackColor="#5A4C9D" />
<SortedDescendingCellStyle BackColor="#D8D8F0" />
<SortedDescendingHeaderStyle BackColor="#3E3277" />
</asp:GridView>
and the c# code:
protected void loadGuess()
{
noInfo.Visible = false;
ds = dataFunk.getGuestsgrid(Convert.ToString(Session["orderNum"]), Convert.ToString(Session["choice"]));
gvGuess.AutoGenerateColumns = true;
gvGuess.DataSource = ds;
gvGuess.DataMember = dataFunk.getGuestsgrid(Convert.ToString(Session["orderNum"]), Convert.ToString(Session["choice"])).Tables[0].ToString();
gvGuess.DataBind();}
thanks :)
some time ago i stuck at same. I tried a work around and it work for me.
Wrap your gridview in a div and give dive a definite height with overflow-y:scroll
something like this
<div id="popup" style="max-height:600px;overflow-y:scroll;">
// Your GridView
</div>
this will work like sliding Gridview. you can give max-height as you like.
For vertical and horizontal scroll bar with height
<div style="width: 100%; height: 400px; overflow: scroll">your GridView</div>
I have a gridview.
I have to implement both Paging as well as make the page scrollable both horizontally and vertically. The page navigation bar comes at the bottom.
While scrolling the page vertically, I want two things -
The gridview headers should also be frozen.
gridview pagers should also be frozen.
I mean they should not scroll along with the data.
Only the rows should scroll.
I have implemented -
1. Fixed header using CSS
2. Horizontally scrollable using CSS
3. Vertically scrollable using CSS
I am not able to
1. Fix the Pager.
My code:
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<style type="text/css">
div#gvResultStyle
{
width: 500px;
height: 350px;
overflow: scroll;
position: relative;
}
div#gvResultStyle th
{
background-color: Navy;
color: White;
top: expression(document.getElementById("gvResultStyle").scrollTop-2);
left: expression(parentNode.scrollLeft);
position: relative;
z-index: 20;
}
.gvPager
{
left: 0px;
width: 400px;
border-right-style: solid;
position: absolute;
height: 10px;
text-align: left;
border-right-color: Navy;
}
</style>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Welcome to ASP.NET!
</h2>
<p>
To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">
www.asp.net</a>.
</p>
<p>
You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409"
title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
</p>
<div id="gvResultStyle">
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="False" DataKeyNames="ProductID"
DataSourceID="SqlDataSource1" AllowPaging="true" PageSize="20" CssClass="gvResultStyle">
<PagerSettings Position="Bottom" />
<PagerStyle CssClass="gvPager" />
<Columns>
<asp:BoundField DataField="ProductID" HeaderText="ProductID" InsertVisible="False"
ReadOnly="True" SortExpression="ProductID" />
<asp:BoundField DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" />
<asp:BoundField DataField="SupplierID" HeaderText="SupplierID" SortExpression="SupplierID" />
<asp:BoundField DataField="CategoryID" HeaderText="CategoryID" SortExpression="CategoryID" />
<asp:BoundField DataField="QuantityPerUnit" HeaderText="QuantityPerUnit" SortExpression="QuantityPerUnit" />
<asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" SortExpression="UnitPrice" />
<asp:BoundField DataField="UnitsInStock" HeaderText="UnitsInStock" SortExpression="UnitsInStock" />
<asp:BoundField DataField="UnitsOnOrder" HeaderText="UnitsOnOrder" SortExpression="UnitsOnOrder" />
<asp:BoundField DataField="ReorderLevel" HeaderText="ReorderLevel" SortExpression="ReorderLevel" />
<asp:CheckBoxField DataField="Discontinued" HeaderText="Discontinued" SortExpression="Discontinued" />
<asp:BoundField DataField="CategoryName" HeaderText="CategoryName" SortExpression="CategoryName" />
</Columns>
</asp:GridView>
</div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT * FROM [Alphabetical list of products]"></asp:SqlDataSource>
<br />
i wrote jQuery plug-in can fixed header and freeze column, it can be apply to GridView.
see the image:
It also support pager:
Demo: Pager Support
i have an asp.net treeView. on node expanded i'm binding child nodes for the expanded node. But if i check the node and than expand it, the node and all it's child change there position and become like childs to the main node. when clicking again on the + it takes the right place. Any idea on how to solve it!!!
<asp:Panel ID="pnl_tree_testplan" CssClass="pnl_treeview" runat="server" ScrollBars="Auto">
<asp:UpdatePanel ID="treeview_testplan" runat="server">
<ContentTemplate>
<asp:TreeView ID="testPlanTreeView" runat="server" OnLoad="Tree_TestPlan_Load" OnTreeNodeExpanded="Tree_TestPlan_Node_Expanded"
OnTreeNodeCheckChanged="TestPlan_Treeview_TreeNodeCheckChanged">
</asp:TreeView>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
.pnl_treeview
{
Height:410px;
border-width:1px;
border-color:Blue;
min-width:260px;
width:100%;
font-family:Calibri;
font-size:small;
color:Black;
}
If it's "jumping up and down" in Firefox (esp.) when you hover over the nodes, try this CSS fix:
<div id="idTreeView">
<asp:TreeView ID="TreeView1" runat="server"
DataSourceID="SiteMapDataSource1"
HoverNodeStyle-Height="0" Font-Bold="true" ImageSet="BulletedList">
<RootNodeStyle Font-Bold="True" />
<ParentNodeStyle VerticalPadding="0px" Font-Bold="True"
Font-Underline="false" />
<HoverNodeStyle Font-Underline="false" ForeColor="#5555DD" />
<NodeStyle Font-Bold="False" Font-Size="8pt" CssClass="sitelink"
ForeColor="Black" HorizontalPadding="5px" NodeSpacing="0px"
VerticalPadding="0px" />
</asp:TreeView>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</div>
div#idTreeView img
{
display: block;
float: left;
}
div#idTreeView div
{
display: inline-block;
}
div#idTreeView .sitelink a
{
text-decoration:none;
}
I have a tree view control that I would like to supply the background image for. My code currently looks like this:
<asp:Image ImageUrl="~/images/mypic.gif" runat="server" Width="150px" />
<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1"
ImageSet="Arrows">
<ParentNodeStyle Font-Bold="False" />
<HoverNodeStyle Font-Underline="True" ForeColor="#5555DD" />
<SelectedNodeStyle Font-Underline="True"
HorizontalPadding="0px" VerticalPadding="0px" ForeColor="#5555DD" />
<NodeStyle Font-Names="Verdana" Font-Size="8pt" ForeColor="Black"
HorizontalPadding="5px" NodeSpacing="0px" VerticalPadding="0px" />
</asp:TreeView>
there is a property of the treeview CssClass that you can give it an image via css
<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1"
CssClass="classname" ImageSet="Arrows">
<ParentNodeStyle Font-Bold="False" />
<HoverNodeStyle Font-Underline="True" ForeColor="#5555DD" />
<SelectedNodeStyle Font-Underline="True"
HorizontalPadding="0px" VerticalPadding="0px" ForeColor="#5555DD" />
<NodeStyle Font-Names="Verdana" Font-Size="8pt" ForeColor="Black"
HorizontalPadding="5px" NodeSpacing="0px" VerticalPadding="0px" />
</asp:TreeView>
then in css
.classname
{
background-image: url('image path');
}
I would think the best way to achieve this would be to use CSS. I do not know off the top of my head what sort of html the TreeView control spits out but if it is a block element you should be able to set the background property to display your image.
An easy way to do this would be to surround your Treeview in a <div> block and set the css styling on this.
<div id="treeNav">
<asp:TreeView .........
</asp:TreeView>
</div>
#treeNav
{
background-image: url(my-image.png);
}