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>
Related
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
I am trying to have a gridview which has fixed columns width. Right now the columns that have no value are too narrow. This grid is being populated with a datatable on a button click
Could you please suggest the solution.
for BoundField use the property ItemStyle-Width:
<asp:BoundField DataField="UserName" HeaderText="User Name" ItemStyle-Width="50px" />
I am using Gridview and I want to have the cells scrollable. I already have a div that scrolls the whole table, but I need to individual cells to be kept to a certain max width and a scrollbar be created for cells that have data that would exceed that.
I have tried adding <rowstyle Wrap="false"/> this made the data stop wrapping, which I wanted, but now the rows are very very wide. Which I don't want.
I found several suggestions that say to add a div around the Gridview which I did and added a css rule like overflow-x:auto;width:200px; this did not help the cells are still very very wide.
I have the Gridview setup like this:
<asp:GridView ID="PMDataGrid"
datasourceid="PMDataSource"
ondatabound="PMDataGrid_DataBound"
autogeneratecolumns="false"
emptydatatext="No Data Available"
allowpaging="true"
pagesize="25"
runat="server"
showheader="true"
showfooter="true"
DataKeyNames="PROJECT"
allowsorting="true"
style="overflow-x:auto"
headerstyle-cssclass="FixedHeader">
<HeaderStyle BackColor="Black" ForeColor="White" />
<FooterStyle BackColor="Black" ForeColor="White" />
<RowStyle BackColor="White" ForeColor="Black" height="50px" Wrap="false" Width="250px" />
<AlternatingRowStyle BackColor="#e5e5e5" ForeColor="Black" height="50px" />
<SelectedRowStyle BackColor="#999999" ForeColor="#fff" />
I would like to be able to have a max-width of 250px and have a scrollbar when the data is too long, but I am unable to find a solution. I am fairly new to web apps in asp.net.
I have added this:
<asp:TemplateField HeaderText="COE_%_RCVD_BY_LINE" SortExpression="COE_%_RCVD_BY_LINE">
<ItemTemplate>
<asp:Label ID="Lable70" runat="server" Text='<%# Bind("COE_%_RCVD_BY_LINE") %>'></asp:Label>
</ItemTemplate
</asp:TemplateField>
Which produced this error:
Parser Error Message: A call to Bind was not well formatted. Please refer to documentation for the correct parameters to Bind.
I think it's the % that is causing the error. Is there a way to keep the % and have it work?
I forgot to add the surrounding <div></div>. It now looks like this:
'>
How and I have CSS setup like this:
.Gridview {
overflow-x:auto;
width:250px;
}
I'm pretty sure I have this setup correctly, but still the columns are very very wide:
and the rules in the CSS don't seem to be applying:
I have it figured out.
I had the CSS file with the style, this did not work. When I added the style to the div inline then it works, like this:
<asp:TemplateField HeaderText="DESCRIPTION" SortExpression="DESCRIPTION">
<ItemTemplate>
<div class="Gridview" style="overflow-x:auto; max-width:250px;">
<asp:Label ID="Lable1" runat="server" Text='<%# Bind("DESCRIPTION") %>'></asp:Label>
</div>
</ItemTemplate>
</asp:TemplateField>
This now works to add the scrollbar to any field that goes over the 250px max that I have set.
This can mostly be found in the similar question: Is it possible to scroll in a cell of a gridview?
But I did learn that the style has to be inline for it to work. Having the style in the CSS file did not work.
I have a GridView with a number of columns and it is all populating how I want it however one of the columns can have quite a bit of text in it. To try and present it nicely I'd prefer to be able to show that column in the row under it, so spanned across all columns:
As a simplified example currently I have:
Name DOB Sex Comments Title
Ian 15/04/2015 M This is MR
the text
that keeps
wrapping
I'd prefer it to be something like
Name DOB Sex Comments Title
Ian 15/04/2015 M This is MR
Comments: This is the text that keeps wrapping
Obviously this is a very simplified example but hopefully it explains what I'm trying to do. The current GridView code I have is below, I'm wanting to move intScore to the next row.
<asp:GridView ID="gvwClinical" runat="server" DataKeyNames="intClinicalAssessID" OnRowDataBound="gvwGrids_RowBound" OnRowDeleting="gvwGrids_Delete" OnSelectedIndexChanging="gvwClinical_SelectedIndexChanged" OnSorting="gvwSort" OnPageIndexChanging="gvwPage">
<Columns>
<asp:BoundField Visible="False" DataField="intClinicalAssessID"></asp:BoundField>
<asp:ButtonField Text="View" CommandName="Select" ButtonType="image"></asp:ButtonField>
<asp:ButtonField Text="Delete" CommandName="Delete" ButtonType="image"></asp:ButtonField>
<asp:BoundField DataField="dteAssessmentDate" HeaderText="Assess. Date" SortExpression="dteAssessmentDate"></asp:BoundField>
<asp:BoundField DataField="intScores" HeaderText="Scores" SortExpression="intScores" HtmlEncode="false"></asp:BoundField>
<asp:BoundField DataField="intHeight" HeaderText="Height" SortExpression="intHeight"></asp:BoundField>
<asp:BoundField DataField="intWeight" HeaderText="Weight" SortExpression="intWeight"></asp:BoundField>
<asp:BoundField DataField="strWellBeing" HeaderText="Gen Well Being" SortExpression="strWellBeing"></asp:BoundField>
<asp:BoundField DataField="strAbdominalPain" HeaderText="Abdo Pain" SortExpression="strAbdominalPain"></asp:BoundField>
<asp:BoundField DataField="strAbdominalMass" HeaderText="Abdo Mass" SortExpression="strAbdominalMass"></asp:BoundField>
<asp:BoundField DataField="strBowelFreqDay" HeaderText="Bowel Freq (day)" SortExpression="strBowelFreqDay"></asp:BoundField>
<asp:BoundField DataField="strBowelFreqNight" HeaderText="Bowel Freq (night)" SortExpression="strBowelFreqNight"></asp:BoundField>
<asp:BoundField DataField="strStoolUrgency" HeaderText="Defecation Urgency" SortExpression="strStoolUrgency"></asp:BoundField>
<asp:BoundField DataField="intLiquidStoolCount" HeaderText="Lq Stools 24 Hrs" SortExpression="intLiquidStoolCount"></asp:BoundField>
<asp:BoundField DataField="strRectalBleeding" HeaderText="Rectal Bleeding" SortExpression="strRectalBleeding"></asp:BoundField>
<asp:BoundField DataField="strEndoscopyFindings" HeaderText="Endo Findings" SortExpression="strEndoscopyFindings"></asp:BoundField>
<asp:BoundField DataField="strGlobalAssess" HeaderText="Gbl Assessment" SortExpression="strGlobalAssess"></asp:BoundField>
<asp:BoundField DataField="intActiveFistula" HeaderText="Active Fistula" SortExpression="intActiveFistula"></asp:BoundField>
<asp:BoundField DataField="intTemperature" HeaderText="Temp." SortExpression="intTemperature"></asp:BoundField>
<asp:BoundField DataField="intPulse" HeaderText="Pulse" SortExpression="intPulse"></asp:BoundField>
<asp:BoundField DataField="intHB" HeaderText="Hb" SortExpression="intHB"></asp:BoundField>
<asp:BoundField DataField="intHCT" HeaderText="Hct" SortExpression="intHCT"></asp:BoundField>
<asp:BoundField DataField="intCRP" HeaderText="CRP" SortExpression="intCRP"></asp:BoundField>
<asp:BoundField DataField="strComplications" HeaderText="Complications" SortExpression="strComplications"></asp:BoundField>
</Columns>
</asp:GridView>
You could use a TemplateField for this. This will enable you to put the longer text underneath the rest of the fields since you can design the layout per column, or row if you use only one TemplateField. you can Bind and Eval as many DataFields and html in one TemplateField as you desire if your DataSource provides them:
<Columns>
<asp:TemplateField HeaderText="Header1" SortExpression="fieldname1">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("fieldname1") %>'></asp:Label>
<hr>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("fieldname2") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
Please note tough that this will come with side effects. You can only add a Column Header for each TemplateField you add, so ordering your data for each DataField can become tricky or pretty much impossible with the default setup from a GridView when using these fields. Since TemplateFields behave like normal BoundFields it is possible to combine BoundFields and TemplateFields in a row, but you cannot let a TemplateField show up underneath the other Columns.
As far as i know it's impossible to use BoundFields in a TemplateField, and if that's really what you are searching for maybe looking for a Pivot grid would be a better idea. But if the highly configurability and footprint of a Pivot grid suits your solution is another question.
Hope this helps in finding an awnser to your challenge. Good Luck!
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="">
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>