<asp:Panel ID="Panel2" style="width:720px; border-style: outset; border-width: 4px; " runat="server" ScrollBars="Horizontal">
<script src="Scripts/jquery-1.2.6.js" type="text/javascript"></script>
<script src="Scripts/webtoolkit.jscrollable.js" type="text/javascript"></script>
<script src="Scripts/webtoolkit.scrollabletable.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
jQuery('#<%=GridView2.ClientID%>').Scrollable(400, 2000);
});
</script>
<asp:GridView ID="GridView2" runat="server"
DataSourceID="SqlDataSource1" OnPreRender="GridView2_PreRender"
onrowcreated="GridView1_RowCreated" Width="100%"
ondatabound="GridView2_DataBound" CellPadding="4" ForeColor="#333333"
GridLines="both">
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#999999" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:GridView>
When column count is about 20 it looks like perfect (except: I can't see vertical scroll bar before scroll horizontal scrollbar to the right scope)
But when column count is 4 I've got same 2000 width and 500pt for each column and horizontal scroll :-S that's fail.
Is there some way I can control this width ???
thank you.
I believe that the width property is optional. If you don't set it, the jquery script should take the current table width as a default.
Related
In my ASP.net program, I'm trying to make my gridview have a scrollbar whenever the data doesn't fit in the div. I've looked around and found answers but none of them work, what am I doing wrong? Here's my code, and I've tried changing overflow: scroll to overflow: auto and that hasn't worked either - thanks.
<div style="width: 100%; height: 200px; overflow:scroll;">
<asp:GridView ID="usersGridView" runat="server" style="z-index: 1; left: 10px; top: 231px; position: absolute; height: 133px; width: 352px" BackColor="White" BorderColor="#336666" BorderStyle="Double" BorderWidth="3px" CellPadding="4" GridLines="Horizontal">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:CommandField ButtonType="Button" HeaderText="Edit" ShowEditButton="True" >
<ControlStyle BackColor="#336666" ForeColor="White" />
</asp:CommandField>
</Columns>
<FooterStyle BackColor="White" ForeColor="#333333" />
<HeaderStyle BackColor="#336666" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#336666" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#d6ded9" 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 style="width: 100%; height: 200px; overflow-y:scroll;">
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 want my label "The Top Row" to be positioned near the top row of my gridview as I indicated with yellow below,
I tried absolute positioning the lable but when displayed, there are problems with it. What is the best way to do this ? (float right is working like allign left which is not useful and I have tried display block but couldn't find a way with it too)
This is such a basic issue but can not find a solution
You simply need to add float: left to both the <asp:GridView /> and the <asp:Label />:
HTML Markup:
<asp:GridView ID="GridView1" runat="server" CellPadding="10"
ForeColor="#333333" style="float: left;" AutoGenerateColumns="False">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Columns>
<asp:ButtonField ButtonType="Button" Text="Info File" />
<asp:ButtonField ButtonType="Button" Text="Get Contact" />
<asp:BoundField DataField="Column0" HeaderText="Column0" />
<asp:BoundField DataField="Column1" HeaderText="Column1" />
<asp:BoundField DataField="Column2" HeaderText="Column2" />
</Columns>
<EditRowStyle BackColor="#999999" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#E9E7E2" />
<SortedAscendingHeaderStyle BackColor="#506C8C" />
<SortedDescendingCellStyle BackColor="#FFFDF8" />
<SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>
<asp:Label ID="TopRowLabel" runat="server" style="float: left;" />
Output:
Perhaps you could try to add the style float: left or something similar to the grid?
Also try to experiment with display: block and the other values for display.
Try using Jquery to find the Header Row and the probably use .Append (to append the element).
If the value of the label/element comes from server then you can set the hidden variable (runat="server") in the code behind and then use Jquery again to set the value of the label (rendered probably as span)
I am trying to set up a web application with a datagrid and a chart on one tabpanel of a tabcontainer. It started of ok but I need to have the chart positioned right next to the datagrid. I read about using css but cannot get it to work.
I have added a separate css file
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<link type="text/css" rel="stylesheet" href="defaultStyle.css"/>
....
<asp:GridView ID="GridView1" runat="server" AllowSorting="True"
AutoGenerateColumns="False" BackColor="White" BorderColor="#336666"
BorderStyle="Double" BorderWidth="3px" CellPadding="4"
DataSourceID="SqlDataSource1" GridLines="Horizontal" Height="92px"
Width="327px" HorizontalAlign="Right">
<RowStyle BackColor="White" ForeColor="#333333" HorizontalAlign="Right" />
<PagerStyle HorizontalAlign="Center" BackColor="#336666" ForeColor="White" />
<Columns>
<asp:BoundField DataField="RecordsCount" HeaderText="RecordsCount"
ReadOnly="True" SortExpression="RecordsCount"/>
<asp:BoundField DataField="collectionDate" HeaderText="collectionDate"
ReadOnly="True" SortExpression="collectionDate" />
</Columns>
<FooterStyle BackColor="White" ForeColor="#333333" />
<SelectedRowStyle BackColor="#339966" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#336666" Font-Bold="True" ForeColor="White" />
</asp:GridView>
Wrap your controls in divs and float them to the left. Make sure to clear the float when finished.
<div style="float:left;">
<!-- Insert GridView -->
</div>
<div style="float:left;">
<!-- Insert Chart Control -->
</div>
<div style="clear:both;" />
Wrap each (Grid and Chart) in its own DIV element.
Style DIVs with top/left, or float css attributes as needed. You might also need to get margin involved to get the look you want.
I believe the GridView is rendered as a table, so how could I translate the inline style of the following GridView to an external stylsheet using classes?
<asp:GridView ID="gvQuotes"
runat="server"
BackColor="#DEBA84" BorderColor="#DEBA84"
BorderStyle="None" BorderWidth="1px"
CellPadding="3" CellSpacing="2"
GridLines="Both"
Width="100%"
ShowFooter="True">
<RowStyle BackColor="#FFF7E7" ForeColor="#8C4510"
HorizontalAlign="Center" />
<FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
<PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#738A9C" Font-Bold="True"
ForeColor="White" />
<HeaderStyle BackColor="#A55129" Font-Bold="True"
ForeColor="White" Font-Underline="true"
HorizontalAlign="Center" />
</asp:GridView>
For example, for the overall grid, would I do something like the following and set the CssClass="grid"
.grid
{
background-color: #DEBA84;
border-color:#DEBA84;
width:100%;
}
I am not sure how to handle the bordestyle, cellpadding, cellspacing, and gridlines
Check this out. I think it will be helpful to you.
The key here is how to target certain ways to display table cells.
table.gridView td
{
padding:10px; // same as CellPadding on table HTML tag
}