I try to create a table where column 1, 3 and 4 are as big as the content needs to be displayed in a single row. Column 2 gets bigger and smaller when browser window rezises. Content in column 2 should also stay single row and overflow.
But I fail to get content overflowing correctly. It appears in the next columns.
A screenshot when I size my browser very small:
Very small table where all texts in column 2 overflows into next column
A screenshot how it should overflow:
Edited picture how it should look
I use Visual Studio 2013, ASP.net Web Forms and Bootstrap v3.3.6. I have no custom CSS file which overwrites bootstrap.css.
This is my code:
<asp:GridView ID="GridView_OpenTickets" CssClass="table table-hover table-condensed table-striped" HeaderStyle-ForeColor="White" HeaderStyle-BackColor="#00136F" runat="server" AutoGenerateColumns="False" ShowHeaderWhenEmpty="True" DataSourceID="SqlDataSource_OpenTickets">
<Columns>
<asp:BoundField DataField="Number" HeaderText="Number" SortExpression="Number" ItemStyle-Wrap="False" HeaderStyle-Wrap="false" HeaderStyle-Width="10px"/>
<asp:TemplateField HeaderText="Title" SortExpression="Title" ItemStyle-Wrap="false" HeaderStyle-Wrap="false">
<ItemTemplate>
<div style="overflow-x:auto hidden;text-overflow:ellipsis;width:10px">
<asp:Label ID="Label_Title" runat="server" Text='<%# Bind("Title") %>' ToolTip='<%# Bind("Title") %>'></asp:Label>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Assignment" HeaderText="Assignment" SortExpression="Assignment" ItemStyle-Wrap="False" HeaderStyle-Wrap="false" HeaderStyle-Width="10px"/>
<asp:BoundField DataField="Affected Item" HeaderText="Affected Item" SortExpression="Affected Item" ItemStyle-Wrap="False" HeaderStyle-Wrap="false" HeaderStyle-Width="10px"/>
</Columns>
<EmptyDataTemplate>
<div>Yay, no unassigned tickets.</div>
</EmptyDataTemplate>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource_OpenTickets" runat="server" ConnectionString="<%$ ConnectionStrings:ServiceManager_prodConnectionString %>" SelectCommand="Select Dummy"> <%--Select Statement from CodeBehind--%>
</asp:SqlDataSource>
Thanks for your help!
Lukas
Related
I created a table using a Sqldatasource in .net webforms. I added a "commandField" that allows you to edit and update the content of this table, but by default the input type is "text". I would like to have different input types for some columns. For example the description column should be a "textarea" and the category column should be a "select dropdown".
I tried editing the input type= text in CSS, but this was a failure. Apparently only the textarea input type allows multiple lines to be displayed for the user.
This is how I'm calling the edit column in the table:
<asp:CommandField ButtonType="Button" ControlStyle-BackColor="DarkOrange" ControlStyle-CssClass="trCBPad" ItemStyle-CssClass="flex-container2" HeaderText="Edit" ShowEditButton="True">
<ControlStyle BackColor="DarkOrange" CssClass="trCBPad"></ControlStyle>
This is the dataField I would like to edit, so that the input is a textarea:
<asp:BoundField DataField="ProofPointId" HeaderText="ProofPointId" InsertVisible="False" ReadOnly="True" SortExpression="ProofPointId" />
If yor are using a gridview
<asp:GridView ID="GridView1" DataSourceId="MyDataSource" DataKeyNames="Code"
AutoGenerateColumns="false" AutoGenerateEditButton="true"
AutoGenerateDeleteButton="true" runat="server">
<Columns>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<%#Eval("Name")%>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtName" Text='<%# Bind("Name")%>' runat="server" />
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Description">
<ItemTemplate>
<%#Eval("Description")%>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox TextMode="Multiline" ID="txtDesctiption"Text='<%# Bind("Description")%>'
runat="server" />
</EditItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
When I hide a field in one of my DataGrid columns, the column's width appears to be omitted from the grid altogether, causing the sizing of all my other columns to be readjusted. Now the sizing of the column is already being auto-adjusted [responsively] by the bootstrap styling (CssClass="table table-hover"; see below). That's fine. What's not fine is the column width being adjusted a second time when I dynamically (from code-behind) hide one of the fields (Visible = false)--reason being, I have a second DataGrid identical to this first one below whose untouched column widths must match (I'm not hiding any fields there).
<asp:datagrid id="dgS" AutoGenerateColumns="False" CssClass="table table-hover" ShowHeader="False" ShowFooter="False" runat="server" DataKeyField="SID" CellPadding="0" GridLines="None" AllowSorting="True" OnItemDataBound="dgS_ItemDataBound">
<HeaderStyle CssClass="" BackColor="steelblue" ForeColor="white" />
<Columns>
<asp:TemplateColumn HeaderText="SID" SortExpression="SID" HeaderStyle-CssClass=" " ItemStyle-CssClass=" ">
<ItemTemplate>
<asp:Label ID="lblSID" Runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "SID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Grade" SortExpression="GradeChangeDescription" HeaderStyle-CssClass=" " ItemStyle-CssClass=" ">
<ItemTemplate>
<asp:dropdownlist id="ddlG" Runat="server"></asp:dropdownlist>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="C" Visible="False" HeaderStyle-CssClass="" ItemStyle-CssClass="">
<ItemTemplate>
<asp:Label id="lblC" Runat="server" text='<%# String.Format("{0:MM/dd/yyyy}", DataBinder.Eval(Container.DataItem, "C"))%>'></asp:Label>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:datagrid>
Instead of hiding/removing the column all together and cause resize you could hide its content with opacity. eg:
.fakeHidden { opacity: 0;}
I'm trying to display records within my GridView and a few of the cells contain text with carriage returns. However when this text is displayed the carriage returns are gone. Is there an easy way to display carriage returns in a GridView Cell?
I've tried using a TextBox within the cell which works but I then have the scollbars of the TextBox. I'm not too keen on this way either as the textbox may render differently in different browser.
My code is displayed below, I've left my testing in there so you can see all the ways I've tried:
<asp:GridView ID="gridResults" runat="server" AutoGenerateColumns="false" CellSpacing="-1"
CssClass ="stretch separate" GridLines="None" EnableViewState="true">
<HeaderStyle CssClass="header pad" />
<RowStyle CssClass="row pad"/>
<EmptyDataRowStyle CssClass="empty pad" />
<Columns>
<asp:BoundField DataField="Notes" HeaderText="Notes" HtmlEncode="true">
<ItemStyle Width="100" />
</asp:BoundField>
<asp:TemplateField HeaderText="Notes" >
<ItemTemplate>
<asp:Label ID="test" runat="server" Text='<%# Bind("Notes") %>' />
<asp:TextBox ID="textNotes" runat="server" CssClass="right" TextMode="MultiLine" Text='<%# Bind("Notes") %>' BorderStyle="None" />
</ItemTemplate>
<ItemStyle Width="50" CssClass="right" />
</asp:TemplateField>
</Columns>
</asp:GridView>
I'm using ASP.Net 4.0 and c#
Thanks
Try setting the Text attribute of the <asp:Label> to Text='<%# Eval("Notes").ToString().Replace("\n", "<br />") %>'.
In Asp.Net, how to apply text align [left,center,right] in a column, when autogenerate column is true. In every row of gridview the text is displayed in center of the column, i want to display in left side of the column. Thank you.
Try using below syntax if all the columns needs to left aligned
<RowStyle HorizontalAlign="Left"></RowStyle>
Also check these MSDN resource which has various examples for GridView formatting and Code Project article which shows examples for AutoGenerated Columns scenerio.
Sorry, this case will work only when autogeneratedcolumns = "false". See the edit for the autogeneratecolumns="true" If you want to align the header of the column add this to the BoundFiled:
HeaderStyle-HorizontalAlign="Right"
And if you want to align the item of the column add this to the BoundField:
ItemStyle-HorizontalAlign="Right"
EDIT:
Also try this too
Click on the gridView->properties->RowStyle:horizontal-align
<asp:gridview id="CustomersGridView"
datasourceid="CustomersSqlDataSource"
autogeneratecolumns="true"
allowpaging="true"
ondatabound="CustomersGridView_DataBound"
runat="server">
<pagerstyle forecolor="Blue"
backcolor="LightBlue"/>
<pagertemplate>
<table width="100%">
<tr>
<td style="width:70%">
<asp:label id="MessageLabel"
forecolor="Blue"
text="Select a page:"
runat="server"/>
<asp:dropdownlist id="PageDropDownList"
autopostback="true"
onselectedindexchanged="PageDropDownList_SelectedIndexChanged"
runat="server"/>
</td>
<td style="width:70%; text-align:right">
<asp:label id="CurrentPageLabel"
forecolor="Blue"
runat="server"/>
</td>
</tr>
</table>
</pagertemplate>
</asp:gridview>
more info on this link
You can define <RowStyle> and <HeaderStyle> elements in your markup.
Example:
<asp:GridView ID="productGridView" Runat="server"
DataSourceID="productsDataSource"
DataKeyNames="ProductID" AutoGenerateColumns="False"
BorderWidth="1px" BackColor="#DEBA84"
CellPadding="3" CellSpacing="2" BorderStyle="None"
BorderColor="#DEBA84">
<FooterStyle ForeColor="#8C4510"
BackColor="#F7DFB5"></FooterStyle>
<PagerStyle ForeColor="#8C4510"
HorizontalAlign="Center"></PagerStyle>
<HeaderStyle ForeColor="White" Font-Bold="True"
BackColor="#A55129"></HeaderStyle>
</asp:GridView>
Put your columns as template fields as per below and give ItemStyle-HorizontalAlign="Left"
<Columns>
<asp:TemplateField ItemStyle-Width="5%" HeaderText="No." ItemStyle-
HorizontalAlign="Left">
<ItemTemplate>
<%# Container.DataItemIndex + 1 %>
</ItemTemplate>
</asp:TemplateField>
</Columns>
So it will work in all browser.
Is possible set fixed header and scrollbar in a datagrid?
How can i do?
thanks
I worked on this for awhile and gave up on making the CSS work on all browsers. A simple albeit not elegant way to accomplish this is to just have two distinct tables whose column widths match up. The first table holds the headers and the second holds the content and is scrollable.
I used jQuery to make all the column widths match up.
For a complete description, see this post: Scrollable DataGrid table with Fixed Header with jQuery
have at this codeproject entry: Fixed Header in ASP.NET DataGrid
To solve this, I placed a second datagrid above the original, I sized all the columns in both datagrids equally. In the datagrid that shows the data, I set the header to not show. In the code behind I bound the top datagrid to an empty data table and set the bound fields to show the header when empty.
<div style="padding-bottom:2px">
<asp:GridView id="RoleListHeader" runat="server" AutoGenerateColumns="false" showheaderwhenempty="True" showheader="true" height="20px" width="350px" selectedrowstyle-height="20px" rowstyle-height="20px" headerstyle-height="10px" forecolor="#ff333333" backcolor="White">
<columns>
<asp:TemplateField ItemStyle-Width="23">
<ItemTemplate>
<asp:CheckBox></asp:CheckBox>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="SystemDesc" HeaderText="Role Description" ReadOnly="true" ItemStyle-Width="174"></asp:BoundField>
<asp:BoundField DataField="EndDate" HeaderText="EndDate" ReadOnly="true" ItemStyle-Width="153"></asp:BoundField>
</columns>
</asp:GridView>
</div>
<div style="max-height:300px;overflow:auto">
<asp:GridView id="RoleList" runat="server" AutoGenerateColumns="false" showheaderwhenempty="True" showheader="false" height="0px" width="350px" selectedrowstyle-height="20px" rowstyle-height="20px" headerstyle-height="10px" forecolor="#ff333333" backcolor="White" rowstyle-horizontalalign="Center" rowstyle-borderstyle="Solid" rowstyle-bordercolor="#ff404040">
<columns>
<asp:TemplateField ItemStyle-Width="23">
<ItemTemplate>
<asp:CheckBox runat="server" OnCheckedChanged="GVChkBox_CheckChanged" AutoPostBack="true"></asp:CheckBox>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="SystemDesc" HeaderText="Role Description" ReadOnly="true" ItemStyle-Width="174"></asp:BoundField>
<asp:BoundField DataField="EndDate" HeaderText="EndDate" ReadOnly="true" ItemStyle-Width="153"></asp:BoundField>
<asp:BoundField DataField="ADHSystemId" ShowHeader="false"></asp:BoundField>
</columns>
</asp:GridView>
</div>