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>
Related
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
I have a GridView which contains a TemplateItem column which contains a textbox. The grid itself works fine, the rows are create, I can edit the text box, etc. But the width is static. I can manually set the width but ideally I'd like it to just automatically stretch to whatever size the column is.
I've tried Googling an answer to this, and everything I've seen has been around using CSS or having a Width property assign a specific width.
This is my GridView code:
<asp:GridView runat="server" ID="grdSelectedProducts" BorderWidth="1px" CellPadding="3" CellSpacing="2" AutoGenerateColumns="False" OnRowDataBound="grdSelectedProducts_OnRowDataBound" ShowHeaderWhenEmpty="True">
<Columns>
<asp:BoundField DataField="Product" HeaderText="Product" ReadOnly="False" />
<asp:TemplateField HeaderText="Description">
<ItemTemplate>
<asp:TextBox runat="server" ID="txtDescription" Text=""></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Try setting width:auto, Though you may not see a style property for a <asp:TextBox> still it will render it
<asp:TextBox runat="server" ID="txtDescription" style="width:auto !important"
Text="">
this is my grid view code given below>
<asp:GridView ID="gvReport" runat="server" AutoGenerateColumns="False" GridLines="None"
ShowHeader="true" HorizontalAlign="Left" OnRowCommand="gvReport_RowCommand">
<Columns>
<asp:TemplateField HeaderText="User" ItemStyle-HorizontalAlign="Left">
<ItemTemplate>
<asp:Image id="img" text=<%#Eval("Coupon_Image")%>/>
</ItemTemplate>
<HeaderStyle Font-Bold="false" HorizontalAlign="Left" />
</asp:TemplateField>
<asp:TemplateField HeaderText="">
<ItemTemplate>
<asp:Button ID="getCoupon" runat="server" CssClass="btn" Width="145" Height="34"
CommandName="getCoupon" CommandArgument='<%#Eval("Coupon_Id")%>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
In this it showing like this
Image 1 Button
Image 2 Button
actually i want like this type in grid view
Image1 Image2 Image3
Button Button Button
Please help me ....
advance thanks
A gridview won't work for this. Use the Table control for that, and programmably build the rows and columns. The challenge is the gridview isn't meant to render horizontally. You may be able to make it work with a repeater or ListView too, as you can have the ListView or repeater render the columns, and the layout template be the table and header row.
In my GridView the Headertext is aligned to left and itemstyle is aligned to left but the header is not exactly aligned to left. It leaves some space before.
Saml code: <asp:BoundField DataField="COMPANY_TYPE" SortExpression="Company_Type" HeaderText="Company Type" ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="10%"/>
It's possible that your padding on the <th> elements in the header is larger than the <td> elements in the item rows. Use Firebug (or equivalent) to check if something in your css is affecting it. I would also look into the source of the page to verify that there is not any extra whitespace or anything before your column headers.
In the column section where you set the fields add this
ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left"
for example:
<asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left"/>
Try
.HeaderStyle {
text-align: Left
}
<asp:GridView runat="server" ID="TestAlign" ShowFooter="True"
DataSourceID="testDataSource" Width="600"
HeaderStyle-CssClass="HeaderStyle">
<Columns>
<asp:BoundField DataField="left" HeaderText="-left-"
HeaderStyle-CssClass="HeaderStyle" />
</Columns>
</asp:GridView>
I have a gridview that I populate based on a query to a db. I'm trying to add sorting on my gridview but I cannot make my column headers clickable. I have allow sorting set to true, and I have my OnSorting event set. My columns are of a few different types. I know the code I need to have in my code behind, but I cannot click on the headers for some reason. Any help on what I'm missing would be appreciated.
<asp:GridView ID="Grid1" runat="server"
AutoGenerateColumns="False"
OnSelectedIndexChanging="Selected_Row_Changing"
DataKeyNames="ApplicationId"
AllowPaging="True"
OnPageIndexChanging="Grid1_PageIndexChanging"
AllowSorting="True"
OnSorting="Grid1_Sorting"
OnRowCreated="OnRowCreated"
OnRowCommand="Grid1_RowCommand"
OnRowDataBound="Grid1_RowDataBound">
<Columns>
<asp:templatefield ...>
<itemtemplate>
<asp:linkbutton .../>
</itemtemplate>
</asp:templatefield>
<asp:BoundField ... />
<asp:HyperLinkField ... />
<asp:ButtonField ... />
</Columns>
</asp:GridView>
You don't have set the SortExpression, have you?
For example:
<asp:boundfield datafield="CompanyName"
headertext="CompanyName"
headerstyle-wrap="false"
sortexpression="CompanyName"/>
Make sure you're not setting the Header Template but rather set the HeaderText attribute for the TemplateField