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.
Related
I have a asp.net (C#) project Where I am using gridview to show details. But My all of the cells are not of same size. Please Help me to make them of equal size.
aspx design code of Gridview :
<asp:GridView ID="GridView1" runat="server" AllowPaging="True"
DataSourceID="SqlDataSource1" ForeColor="#333300"
onpageindexchanging="GridView1_PageIndexChanging"
AutoGenerateColumns="False" EnableSortingAndPagingCallbacks="True"
HorizontalAlign="Center" PageSize="5">
<RowStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="True" />
<Columns>
<asp:BoundField DataField="Enrollment" HeaderText="Enrollment"
SortExpression="Enrollment" />
<asp:BoundField DataField="Subject" HeaderText="Subject"
SortExpression="Subject" />
<asp:BoundField DataField="Message" HeaderText="Message"
SortExpression="Message" />
</Columns>
<FooterStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<PagerStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<HeaderStyle BorderColor="Black" BorderStyle="Inset" HorizontalAlign="Center"
VerticalAlign="Middle" />
<EditRowStyle BorderStyle="Solid" />
</asp:GridView>
Try to add RowStyle
<RowStyle Width="300px"/>
(Or)
1.Add the CSS in the header.
<style type="text/css">
.maxWidthGrid
{
max-width: 300px;
overflow: hidden;
}
</style>
2.Then use the CSS in necessary columns like this ItemStyle-CssClass="maxWidthGrid"
<asp:BoundField ItemStyle-CssClass="maxWidthGrid" DataField="ClientName" HeaderText="Client Name"
ReadOnly="True" SortExpression="ClientName" />
(Or)
To fix the column’s width, we should break the text in cells. The following code is for your reference.
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
foreach (TableCell myCell in e.Row.Cells)
{
myCell.Style.Add("word-break", "break-all");
myCell.Width = 300;
}
}
You can give a 100% width for your grid view.Because you have provide an image with a grid view which has the width of whole page.
<asp:GridView ID="dtgGrid" runat="server" Width="100%" >
Then you can give same widths for your columns as percentages As below.
Code may be changed according to your design. But the method as follows.
<HeaderStyle Width="33%" />
Your Code
<asp:GridView ID="GridView1" runat="server" AllowPaging="True"
DataSourceID="SqlDataSource1" ForeColor="#333300"
onpageindexchanging="GridView1_PageIndexChanging"
AutoGenerateColumns="False" EnableSortingAndPagingCallbacks="True"
HorizontalAlign="Center" PageSize="5" Width="100%">
<RowStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="True" />
<Columns>
<asp:BoundField DataField="Enrollment" HeaderText="Enrollment"
SortExpression="Enrollment" />
<asp:BoundField DataField="Subject" HeaderText="Subject"
SortExpression="Subject" />
<asp:BoundField DataField="Message" HeaderText="Message"
SortExpression="Message" />
</Columns>
<FooterStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<PagerStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<HeaderStyle BorderColor="Black" BorderStyle="Inset" HorizontalAlign="Center"
VerticalAlign="Middle" Width="33%" />
<EditRowStyle BorderStyle="Solid" />
</asp:GridView>
Fix the column width or you can use css for this or you have one more option using SQL just write query like this:
SELECT Enrollment, Subject, SUBSTRING(Message, 0, 35) AS Message
FROM tblInfo
I have a GridView in asp that keeps re-sizing itself. Can i in some way fix the size of the GridView so it doesn't do that ? The GridView keeps shrinking itself although the data in it has the same length or is smaller
my asp code:
<asp:GridView ID="Grid" runat="server" AllowPaging="True" PageSize="18" OnPageIndexChanging="Grid_PageIndexChanging"
ForeColor="Black" GridLines="Both" Width="991px" Height="600px" RowStyle-HorizontalAlign="Center"
BackColor="White" BorderColor="#999999" BorderWidth="1px"
AutoGenerateColumns="False" style="margin-left: 9px">
<Columns>
<asp:TemplateField HeaderText="RequestID">
<ItemTemplate>
<a target = "_blank" href="www.danx/default?request=<%# Eval("request")%>"><%# Eval("request")%></a>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Barcode">
<ItemTemplate>
<a target = "_blank" href="www.danx/default?barcode=<%# Eval("barcode")%>"><%# Eval("barcode")%></a>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="adrid" HeaderText="AdrID" SortExpression="AdrID" />
<asp:BoundField DataField="name" HeaderText="Navn" SortExpression="Name" />
<asp:BoundField DataField="street" HeaderText="Vej" SortExpression="Street" />
<asp:BoundField DataField="houseno" HeaderText="Husnr"
SortExpression="HouseNo" />
<asp:BoundField DataField="postal" HeaderText="Postnr"
SortExpression="Postal" />
<asp:BoundField DataField="city" HeaderText="By" SortExpression="City" />
<asp:BoundField DataField="country" HeaderText="Land"
SortExpression="Country" />
<asp:TemplateField HeaderText="Lokation">
<ItemTemplate>
<a target = "_blank" href="https://maps.google.dk/maps?q=<%# Eval("latitude")%>,<%# Eval("longitude")%>"><%# Eval("latitudetxt")%></a>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="date" HeaderText="ReceivedDate"
SortExpression="ReceivedDate" />
</Columns>
<FooterStyle BackColor="#CCCCCC" />
<RowStyle HorizontalAlign="Center"></RowStyle>
<SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Blue" HorizontalAlign="Center" />
<HeaderStyle BackColor="DarkGray" Font-Bold="True" ForeColor="Black" />
<AlternatingRowStyle BackColor="LightGray" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#808080" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#383838" />
</asp:GridView>
Can you help me please?
Since you are using a fixed width (991px) for the gridview, the columns would shrink/adjust as their content grow larger. One thing you could do is give fixed width to those columns you don't want resized (in % or fixed). e.g.
<ItemTemplate>
<a target = "_blank" href="www.danx/default?request=<%# Eval("request")%>"><%# Eval("request")%></a>
</ItemTemplate>
You can also increase the size of the GridView to easily accomodate the columns e.g. Setting it to 100% if the container is greater 991px
is this maybe to do with the data in the cells being too long without spaces.. you can always use
td{word-wrap:break-word;}
or make sure you have spaces.
or even use styles for the columns, which set the widths explicitly
<asp:TemplateField HeaderText="RequestID" HeaderStyle-CssClass="setWidthClass">
<ItemTemplate>...
or even
<asp:TemplateField HeaderText="RequestID" ItemStyle-Width="100">
of course it may be nothing to do with this.
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)
<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.
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
}