One of BoundField in my GridView has a very long string without space. I want to dispaly it correctly. According to the similar question.
I used the code
<asp:TemplateField HeaderText="ICD9" ItemStyle-Width="75px" SortExpression="ICD9" >
<ItemTemplate>
<div style="width: 75px; overflow: hidden; white-space: nowrap; word-wrap: break-word;">
<%# Eval("ICD9")%>
</div>
</ItemTemplate>
</asp:TemplateField>
Although it works, but when I switch it the Edit mode. The column can not be editted.The textbox doesn't show up.
Thanks.
Please look at the second column, it may has a long string.(Right now it is "None").
It can not be editted.
Inside your <TemplateField>, you also need an <EditItemTemplate>:
<asp:TemplateField HeaderText="ICD9" ItemStyle-Width="75px" SortExpression="ICD9" >
<ItemTemplate>
<div style="width: 75px; overflow: hidden; white-space: nowrap; word-wrap: break-word;">
<%# Eval("ICD9")%>
</div>
</ItemTemplate>
<EditItemTemplate>
<div style="width: 75px; overflow: hidden; white-space: nowrap; word-wrap: break-word;">
<asp:TextBox ID="TextBox1" runat="server"
Text='<%# Bind("ICD9") %>'></asp:TextBox>
</div>
</EditItemTemplate>
</asp:TemplateField>
This way, when your GridView goes into edit mode, it knows what to render for that field.
Without being able to see your other fields, it's possible they are working because they are simply <BoundField>s, which would have this behavior by default (when in the TemplateField, you have to explicitly define the edit and non-edit modes).
You can take a look at this (sort of old) tutorial for more information on TemplateFields: Using TemplateFields in the GridView control
Related
I have two adjacent columns that are running together with no space between them. One is a dollar amount and the other a text field containing a name.
The gridview is defined with CellPadding and CellSpacing so don't expect this.
The column widths are defined as 6% and 12% respectively. The total of the width definitions of the columns is 70%.
Any suggestions?
Running Together
Grid Definition
First, it would be easier for the GridView header to be posted as plain text instead of an image. If I wanted to test your GridView I would have to type the code instead of copy/paste.
But the issue is probably css, or the lack thereof. It seems that the value is aligned to the right, but the padding is not applied. Which can happen is a BootStrap is used.
So create your own style for the GridView
<asp:GridView ID="GridView1" runat="server" CssClass="MyGrid" AutoGenerateColumns="false" Width="100%">
<Columns>
<asp:TemplateField ItemStyle-CssClass="FloatRight">
<ItemTemplate>
<%# Eval("Amount") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<%# Eval("Description") %>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<style>
.MyGrid td {
padding: 3px;
}
.MyGrid .FloatRight {
float: right;
}
</style>
I want to increase the space between two textboxes without using the line break. I've created a CSS rule but it has no effect when displaying the page.
These are the textboxes
<asp:Label ID="Discount" CssClass="textboxcontainer" runat="server" Text="Discount: "></asp:Label><asp:TextBox ID="TextBoxDiscount" runat="server"></asp:TextBox><br />
<asp:Label ID="TotalAfterDis" CssClass="textboxcontainer" runat="server" Text="Total : "></asp:Label><asp:TextBox ID="TextBoxTotal" runat="server"></asp:TextBox> <br />
I have this CSS rule in CSS file
div#page .textboxcontainer{
margin: 10px auto;
Any help is really appreciated
margin doesn't work on asp:label, since asp:label is rendered into span, which is an inline element
Try adding display:inline-block to your css rule.
Your <asp:Label> will render as an HTML span, which displays inline by default, causing top and bottom margin to be ignored. Add display: block or display: inline-block to your .textboxcontainer rule.
ASP Label controls render in a <span> tag at runtime. This is what is giving you trouble. Simply wrap the label and textbox control in their own div and you will get that block separation. Add a class to that div and give it a margin-bottom: XXpx and you are on your way
<div class="form-group">
<asp:Label ID="Discount" CssClass="textboxcontainer" runat="server" Text="Discount: "></asp:Label>
<asp:TextBox ID="TextBoxDiscount" runat="server"></asp:TextBox>
</div>
<div class="form-group">
<asp:Label ID="TotalAfterDis" CssClass="textboxcontainer" runat="server" Text="Total : "></asp:Label>
<asp:TextBox ID="TextBoxTotal" runat="server"></asp:TextBox>
</div>
CSS
.form-group{
margin-bottom: 10px;
}
I have written a code to display selected row in the form having labels and most of the data in the gridview are stored in labels but one cell is storing data in div element . So, the question is how to fetch that data in the div element and display it in the label.
This is my aspx code of gridview
<asp:TemplateField HeaderText="DOC PATH" HeaderStyle-BackColor="DarkGreen" HeaderStyle-ForeColor="White">
<ItemTemplate>
<div id="DIV1" style="width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
<%#Eval("[DOC PATH]") %>
</div>
</ItemTemplate>
</asp:TemplateField>
THis is my code behind
protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
{
GridViewRow row = GridView1.SelectedRow;
lblTASKIDOUTPUT.Text = (row.FindControl("TASKID") as Label).Text;
lblDescOutput.Text = (row.FindControl("DESC") as Label).Text;
lblFrequencyOutput.Text = (row.FindControl("FREQUENCY") as Label).Text;
lblDocPathOutput.Text = row.Cells[4].Text;
}
The above three lblTASKIDOUTPUT,DescOutput and FrequencyOutput are all working because they have been kept in labels in the template fields in grid view . But, the problem is with the 4th one the doc path
You can use literal control here. Instead of displaying the text directly under div, use Literal control, which does not render any html tag.
<asp:TemplateField HeaderText="DOC PATH" HeaderStyle-BackColor="DarkGreen" HeaderStyle-ForeColor="White">
<ItemTemplate>
<div id="DIV1" style="width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
<asp:Literal ID="literalPath" runat="server" Text='<%#Eval("[DOC PATH]") %>'></asp:Literal>
</div>
</ItemTemplate>
</asp:TemplateField>
You can then access the literal control as below
Literal literalPath= row.FindControl("literalPath") as Literal;
This you can use it further
This is a simple question. In a GridView control, I assumed that I could set the HeaderStyle-Font-Bold item within the asp:GridView tag and it would automatically apply it to all column header texts but this has no effect and only works if I set it within the asp:BoundField tag of each column.
This doesnt work:
<asp:GridView ... HeaderStyle-Font-Bold="false">
but this does:
<asp:BoundField ... HeaderStyle-Font-Bold="false"/>
Is this how its suppose to work? ie do I have to set the headerstyle at each column?
What effect should it have if I set the HeaderStyle-Font-Bold in the asp:Griview tag?
Thanks
Rob
Edit
I'm not looking for a solution as to how to make the header text bold as I already know how to do this. My question is about using the HeaderStyle-Font-Bold property and why it doesnt work if I set it in the asp:griview tag but works fine in the asp:BoundField tag.
Thanks
Add class to Gridview Control work both for using ItemTemplate,BoundField and set css
HTML MARKUP:
<asp:GridView CssClass="gvstyling">
....
</asp:GridView>
Simple CSS:
// For heading
.gvstyling th {
background-color: Red;
font-size: 12px;
}
// For Cell
.gvstyling td {
background-color: Red;
font-size: 12px;
}
// For Row
.gvstyling tr {
background-color: Red;
font-size: 12px;
}
Answer to yours edited one
If you using TemplateField, then you need to Add HeaderStyle-Font-Bold="false" inside TemplateField instead of Gridview and it will work for you
HTML MARKUP: look like this
<asp:GridView id="myGV1" CssClass="gvstyling">
<asp:TemplateField HeaderText="Id" HeaderStyle-Font-Bold="false" Visible="false">
<ItemTemplate>
<asp:Label ID="lblid" runat="server" Text='<%# Eval("Id") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
......
......
</asp:GridView>
what about
<headerstyle
font-bold="false"/>
How to align text within a FooterTemplate cell in a GridView
I tried the following but the text is still centered (there is a parent center tag):
<FooterTemplate>
<span style="size:100%; padding:0; text-align: right">Total: </span>
</FooterTemplate>
In the parent column of the template try setting FooterStyle-HorizontalAlign="Right"
Maybe
<FooterTemplate>
<div style="text-align: right;">
<span>Total: </span>
</div>
</FooterTemplate>
works as you want.
Use display:block which replaces size:100% (which doesn't exist, AFAIK)
<FooterTemplate>
<span style="display:block; padding:0; text-align: right">Total: </span>
</FooterTemplate>
The Grid-view would in the end be rendered as a table itself hence, using basic CSS selectors, we can solve the problem, I used the following to fix the same problem that I was facing, hope it helps anyone else looking for this thread
tr:last-of-type td {
align-content: center;
vertical-align: middle;
text-align: center;
}
Hope that helped.