I'm looking to set the width of several columns to 0px initially and then controlling the width with jQuery when the table is rendered based on some user interaction on the front-end.
So far, I have
<asp:BoundField DataField="Col1" HeaderText="col1" >
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="0px" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="0px />
</asp:BoundField>
but for some reason, the column is still showing. Why? Its width is set at 0px??
Thanks.
I would use CSS to control width.
Inline:
<div style="width:0px;"></div>
Or defining a CSS class:
<div class="zero-width"></div>
But for what you're doing, I would go with the Visible property.
<Columns>
<asp:BoundField DataField="Col1" HeaderText="col1" Visible="false">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
</asp:BoundField>
<Columns>
But to assign a CSS class to your <asp:BoundField>:
<Columns>
<asp:BoundField DataField="Col1" HeaderText="col1">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" CssClass="zero-width" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" CssClass="zero-width" />
</asp:BoundField>
<Columns>
Related
I have a gridview that has a EmptyDataTemplate, but it does not show when there is no data.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BackColor="White"
BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" CellPadding="3" DataKeyNames="TransID"
Font-Size="Small" GridLines="Vertical" HorizontalAlign="Center" PageSize="50"
AutoGenerateDeleteButton="True" AllowSorting="True" >
<PagerSettings FirstPageText="First" LastPageText="Last" Mode="NextPreviousFirstLast"
NextPageText="Next" />
<RowStyle BackColor="#EEEEEE" ForeColor="Black" />
<Columns>
<asp:CommandField ShowSelectButton="True" />
<asp:BoundField DataField="TransID" HeaderText="Transaction ID" InsertVisible="False"
ReadOnly="True" SortExpression="TransID">
<HeaderStyle Font-Underline="False" />
</asp:BoundField>
<asp:BoundField DataField="LicNumFrom" HeaderText="License Number From" SortExpression="LicNumFrom" />
<asp:BoundField DataField="LicNameFrom" HeaderText="Name From" SortExpression="LicNameFrom" />
<asp:BoundField DataField="LicNumTo" HeaderText="License Number To" SortExpression="LicNumTo" />
<asp:BoundField DataField="LicNameTo" HeaderText="Name To" SortExpression="LicNameTo" />
<asp:BoundField DataField="DateOfDelivery" HeaderText="Date Of Delivery" SortExpression="DateOfDelivery"
DataFormatString="{0:MM/dd/yyyy}" />
<asp:BoundField DataField="Status" HeaderText="Status" SortExpression="Status" />
</Columns>
<FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#2D5278" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="#DCDCDC" />
<EmptyDataTemplate>
<div>
No Data Available
</div>
</EmptyDataTemplate>
</asp:GridView>
All it shows is a little square. I've tried putting a Label in the EmptyDataTemplate, but it doesn't work either.
You should check the CSS style of EmptyDataTemplate. It looks like you are getting it in a square box but texts are same as your background color and so they are lost in the background. You are getting that square box because you are applying 1px black border to your GridView which also gets applied to EmptyDataTemplate by default.
Try to apply EmptyDataRowStyle-ForeColor="#000" attribute to your GridView with any color which is not same as GridView background color and check the result.
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
Again, New issue. Please be guided to the image below.
Here's the output (see the image below):
Here's the code of my Gridview in results.aspx
<asp:GridView runat="server" id="GridView1" AutoGenerateColumns="False" DataSourceID="AccessDataSource1" DataKeyNames="ID" BorderStyle="Ridge" BackColor="White" BorderColor="Black" BorderWidth="3px" CellPadding="3" Width="1000px" AllowPaging="True" PageSize="2">
<RowStyle BackColor="White" ForeColor="#003399" HorizontalAlign="Center" VerticalAlign="Middle" />
<Columns>
<asp:boundfield DataField="Time In" HeaderText="Time In" SortExpression="Time In">
<ItemStyle Width="100px" />
</asp:boundfield>
<asp:boundfield DataField="Username" HeaderText="Bar Code No." SortExpression="Username">
</asp:boundfield>
<asp:boundfield DataField="FirstName" HeaderText="First Name" SortExpression="FirstName">
</asp:boundfield>
<asp:boundfield DataField="LastName" HeaderText="Last Name" SortExpression="LastName">
</asp:boundfield>
<asp:boundfield DataField="MiddleName" HeaderText="Middle Name" SortExpression="MiddleName">
</asp:boundfield>
<asp:boundfield DataField="ContactNumber" HeaderText="Contact No." SortExpression="ContactNumber">
</asp:boundfield>
<asp:boundfield DataField="PlateNumber" HeaderText="Plate No." SortExpression="PlateNumber">
</asp:boundfield>
<asp:boundfield DataField="Color" HeaderText="Color" SortExpression="Color">
</asp:boundfield>
<asp:boundfield DataField="Brand" HeaderText="Brand" SortExpression="Brand">
</asp:boundfield>
<asp:boundfield DataField="LiscensedNumber" HeaderText="Liscensed No." SortExpression="LiscensedNumber">
</asp:boundfield>
<asp:templatefield>
<HeaderTemplate>
Image
</HeaderTemplate>
<ItemTemplate>
<img src="data:image/jpg;base64,<%# Eval("Image") != System.DBNull.Value ? Convert.ToBase64String((byte[])Eval("Image")) : string.Empty %>" alt="image" height="85" width="85" />
</ItemTemplate>
</asp:templatefield>
</Columns>
<FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
<PagerStyle HorizontalAlign="Center" BackColor="#999999" ForeColor="#003399" />
<EmptyDataTemplate>
No data found!
</EmptyDataTemplate>
<SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#A0A0A0" Font-Bold="True" ForeColor="#003399" HorizontalAlign="Center" />
<AlternatingRowStyle BackColor="#DCDCDC" />
</asp:GridView>
Please help. I don't know the code regarding "Date and Time" thing.
Try removing space in your datafield, as by Rahul R.
It does not matter in the Header Text but in datafield it does.
<asp:boundfield datafield="Your_Date_Column" dataformatstring="{0:MMMM d, yyyy}" htmlencode="false" />
also make sure there are no spaces in datafield name
Sorry for asking here, I solved it.
I convert the column in templatefield then I added this code
Text='<%# DateTime.Now.ToString("dddd<br /> MMMM dd, yyyy<br /> hh:mm tt") %>
:) thanks to all of you.
The group headers in my RadGrid align properly when I don't use static headers, but when I do, they get out of alignment. Can't seem to find anything that fixes this. Relevant code, unimportant details omitted:
<telerik:RadGrid runat="server" ID="RadGrid1" GridLines="None" AllowSorting="True" AutoGenerateColumns="False" AllowMultiRowSelection="True" OnNeedDataSource="RadGrid1_NeedDataSource">
<MasterTableView DataKeyNames="PageID">
<GroupHeaderTemplate>
<asp:CheckBox runat="server" ID="cbGroupHeader"/>
<asp:Label runat="server" ID="lblGroupHeader" Text='<%# (((GridGroupHeaderItem)Container).AggregatesValues["Group"]) %>'/>
</GroupHeaderTemplate>
<Columns>
<telerik:GridClientSelectColumn HeaderStyle-Width="2.5%"/>
<telerik:GridBoundColumn DataField="PageName" HeaderText="Page Name" UniqueName="PageName"/>
<telerik:GridBoundColumn DataField="PageID" Display="False" ReadOnly="True" UniqueName="PageID"
...
</Columns>
<GroupByExpressions>
<telerik:GridGroupByExpression>
<GroupByFields>
<telerik:GridGroupByField FieldName="Order"/>
</GroupByFields>
<SelectFields>
<telerik:GridGroupByField FieldName="Group"/>
</SelectFields>
</telerik:GridGroupByExpression>
</GroupByExpressions>
</MasterTableView>
<ClientSettings AllowKeyboardNavigation="True" AllowColumnsReorder="True" ReorderColumnsOnClient="False">
<Selecting AllowRowSelect="True"/>
<Resizing AllowColumnResize="True" ResizeGridOnColumnResize="False" ClipCellContentOnResize="True" EnableRealTimeResize="True" AllowResizeToFit="True"/>
<Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True"/>
</ClientSettings>
</telerik:radGrid>
Pictures (imgur):
UseStaticHeaders="False"
UseStaticHeaders="True"
I just ran into a similar issue.
The site I'm working has has radGrids, which are re-sized when the browser window is re-sized. The radGrid header looked normal when the browser window size was small, but became misaligned as the browser size increased.
I have UseStaticHeaders set to "true" and TableLayout set to "fixed". I'm also using specific Header Widths instead of percentages.
When re-sizing radGrids, its best to leave off the width of one column. I noticed this wasn't the case on the grid I was working on. When I removed one column's width, the headers immediately aligned correctly.
I'm not sure if this solution will work for you, but it worked for me.
UPDATE
Here's the markup for one of the grid's I've been working on:
<telerik:RadGrid ID="grdItems" runat="server" OnNeedDataSource="grdItems_NeedDataSource" AutoGenerateColumns="False" Width="100%" Height="100%"
GridLines="None" EnableOutsideScripts="True" PagerStyle-AlwaysVisible="true" PagerStyle-Mode="NextPrevAndNumeric" AllowPaging="true" PageSize="250"
AllowSorting="true" OnItemCreated="grdItems_ItemCreated" OnItemCommand="grdItems_ItemCommand" OnPreRender="grdItems_PreRender" TabIndex="17"
OnItemDataBound="grdItems_ItemDataBound" >
<ClientSettings AllowColumnsReorder="true" ReorderColumnsOnClient="true" ColumnsReorderMethod="reorder">
<Selecting AllowRowSelect="False" />
<Scrolling AllowScroll="True" UseStaticHeaders="True" />
<Resizing AllowColumnResize="True" ClipCellContentOnResize="true" EnableRealTimeResize="true" ResizeGridOnColumnResize="true" />
</ClientSettings>
<MasterTableView CommandItemDisplay="Top" ClientDataKeyNames="ei_pk" DataKeyNames="ei_pk,ei_eco_fk" AllowAutomaticInserts="True" GridLines="None" TableLayout="fixed" HeaderStyle-Wrap="false" ItemStyle-Wrap="false">
<CommandItemTemplate>
<asp:Image ID="AddItem" runat="server" ImageUrl="~/RadControls/Grid/Skins/Office2007/AddRecord.gif" AlternateText="Add Item" /><asp:Label ID="lblAddItem" runat="server" Text="Add Item" />
</CommandItemTemplate>
<Columns>
<telerik:GridTemplateColumn UniqueName="Edit" Visible="False" Resizable="false" Reorderable="false">
<ItemTemplate>
<asp:HyperLink ID="EditLink" runat="server" Text="Edit" ImageUrl="../RadControls/Grid/Skins/Office2007/Edit.gif" />
</ItemTemplate>
<HeaderStyle Width="20" />
<ItemStyle HorizontalAlign="Center" />
</telerik:GridTemplateColumn>
<telerik:GridButtonColumn Resizable="false" Reorderable="false" ConfirmText="Are you sure you want to delete this item?" UniqueName="Delete" CommandName="Delete" Visible="False" ButtonType="ImageButton" ImageUrl="../RadControls/Grid/Skins/Office2007/Delete.gif">
<HeaderStyle Width="20"/>
<ItemStyle HorizontalAlign="Center" />
</telerik:GridButtonColumn>
<telerik:GridBoundColumn HeaderText="Trade" DataField="ftr_description" UniqueName="ftr_description" />
<telerik:GridBoundColumn HeaderText="Cost Type" DataField="combined_itemType" UniqueName="combined_itemType" />
<telerik:GridBoundColumn HeaderText="Est. Type" DataField="etp_code" UniqueName="etp_code" />
<telerik:GridBoundColumn HeaderText="Item Code" DataField="combined_code" UniqueName="combined_code" />
<telerik:GridBoundColumn HeaderText="Quantity" DataField="ei_quantity" UniqueName="ei_quantity">
<HeaderStyle Width="50" HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Right" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Unit Cost" DataField="ei_unitCostworking" UniqueName="ei_unitCostworking" >
<HeaderStyle Width="75" HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Right" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Total Cost" DataField="ei_extendedCostWorking" UniqueName="ei_extendedCostWorking" DataFormatString="{0:#0.00}">
<HeaderStyle Width="80" HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Right" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Budget" DataField="ei_budgetworking" UniqueName="ei_budgetworking">
<HeaderStyle Width="80" HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Right" />
</telerik:GridBoundColumn>
<telerik:GridHyperLinkColumn HeaderText="Change Order" DataTextField="eco_number" UniqueName="eco_number" DataNavigateUrlFields="eco_number" SortExpression="eco_number">
<HeaderStyle Width="104" />
</telerik:GridHyperLinkColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
If you click on the 'search' button in the following link
link text
A gridview shows up. I am trying to do something similar within a table whose width is set to auto. My current way is to create the gridview in design view, but however, my gridview does not resize to the table width. I understand that I posed 2 different questions in one.
My current gridview is as such. Defined in 'source' view
<asp:GridView ID="gridView" runat="server"
AutoGenerateColumns="False"
EnableSortingAndPagingCallbacks="True"
AllowPaging="True" DataSourceID="FilesByJobObjectDataSource"
PageSize="5" OnRowCommand="gridView_RowCommand" DataKeyNames="FileID"
HorizontalAlign="Left" >
<Columns>
<asp:BoundField DataField="RID" HeaderText="RID"
ReadOnly="True" ItemStyle-Width="50px" >
<ItemStyle Width="50px" />
</asp:BoundField>
<asp:BoundField DataField="Category" HeaderText="Category"
ReadOnly="True" ItemStyle-Width="100 px" >
<ItemStyle Width="100px" />
</asp:BoundField>
<asp:BoundField DataField="FileName" HeaderText="Type"
ReadOnly="True" ItemStyle-Width="575 px" >
<ItemStyle Width="575px" />
</asp:BoundField>
<asp:BoundField DataField="FileID" Visible="false" />
<asp:ButtonField Text="X" ButtonType="Button" ItemStyle-Width="20px" >
<ItemStyle Width="20px" />
</asp:ButtonField>
</Columns>
<RowStyle CssClass="RowStyle" />
<EmptyDataRowStyle CssClass="EmptyRowStyle" />
<PagerStyle CssClass="PagerStyle" />
<SelectedRowStyle CssClass="SelectedRowStyle" />
<HeaderStyle CssClass="HeaderStyle" />
<EditRowStyle CssClass="EditRowStyle" />
<AlternatingRowStyle CssClass="AltRowStyle" />
</asp:GridView>
</ContentTemplate>
Don't set the column widths....