Gridview to preserve width no matter what Asp.net - asp.net

I have a gridview and i want to preserve its width no matter what data it is displaying. For example, if there is a word with the length of 900 (Eg. abbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb) I want gridview to display in a new line instead of widening its width (girdview width is 700). For instance, like stackoverfolw, it is displaying my example word very well. This textbox has not widen than it should, hasn't ?
My current code can't do the job. Thanks. Any help?
My code.
<asp:GridView ID="gv" runat="server" CssClass="gv" AutoGenerateColumns="False" Width="700px">
<Columns>
<asp:BoundField DataField="" HeaderText=""
dataformatstring="{0:dd-MM-yyyy}" HtmlEncode="false" SortExpression="" >
<ControlStyle Width="100" />
<HeaderStyle Width="100" />
<ItemStyle Width="100" />
</asp:BoundField>
.gv th
{
width: 100px;
}

This works for me
.my-text
{
float:left;
overflow-y:auto;
overflow-x:auto;
word-break:break-all;
}
Inside your template field
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" CssClass="my-text"
Text='<%# Bind("YourColumnName")'
></asp:Label>
</ItemTemplate>
</asp:TemplateField>

Give width of div containing grid in pixels instead of percentage
<div id="divGrid" style='position:absolute; width:800px;'>
<!-- your grid here -->
</div>
Also, You can take width of screen in pixel and calculate the pixel in percentage. suppose width of screen is 1000 pixel is return by screen.width then you 90% will be 900px.
In javascript :
<script language="javascript" type="text/javascript">
document.getElementById('divGrid').style.width = screen.width + "px";
</script>

Related

How to change the CheckBox rectangle size

I am Working With ASP VB.net in that I have A checkBox ,I want to change the Size Of that checkbox I added css to change but its not working the outer portion only get changing the rectangle remains same . can somebody help me ?
<asp:CheckBox ID="chkDate" width="83pt" runat="server" Height="20px"
style="text-align: right; font-size:small"
BorderStyle="None" autosize="false" size="250px" EnableViewState="False" />
Use CSS
<style type="text/css">
.BigCheckBox input {width:20px; height:20px;}
</style>
In asp.net,
<asp:CheckBox ID="CheckBox1" runat="server" CssClass="BigCheckBox" />

how to autosize textbox in GridView row in ASP.NET

I'm trying to add a databound text box in a GridView row:
<ItemTemplate >
<asp:TextBox ID="TextBox" runat="server" Visible="true" Enabled="true"
Wrap="true" text='<%#Eval("Notes")%>' TextMode="MultiLine" >
</asp:TextBox>
</ItemTemplate>
I can't figure out how to make the textbox autosize to the height of the GridView row
If you want to know the height of a content in a multiline textbox you can you a simple formula depend on the font size of the textbox.
enter code hereExample (the number are not real).
If a line of 80 characters consume 400px in width and 20px in height, a line of 160 characters consume always 400px in width but 40px in height.
So, in the Height attribute of the TextBox you can write
Height='<% (Eval("Comments").Length / 80) * 20 %>'
<asp:TextBox TextMode="multiLine" Width="400" Text='<%#Eval("field_name") %>'
Height='<%# Eval("field_name").ToString().Length*2%>' `enter code here`
ID="TextBox1" runat="server"></asp:TextBox>
You Can do by java script too
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Automatic Resize TextBox</title>
<script type="text/javascript">
function setHeight(txtdesc) {
txtdesc.style.height = txtdesc.scrollHeight + "px";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="txtDesc" runat= "server" TextMode="MultiLine" onkeyup="setHeight(this);" onkeydown="setHeight(this);" />
</form>
</body>
</html>

How to change color in TemplateField using Eval

I have a Gridview contain many TemplateField.
I want make every <td> in my html source equal the color saved in my database
I try code Located below but not working it's give me a <span> tag inside <td> with my color but But do not appear on the browser
<asp:TemplateField HeaderText="BackGround Color">
<ItemTemplate>
<asp:Label ID="lblBackColor" runat="server"
BackColor='<%# ConvertFromHexToColor( Eval("BackColor").ToString()) %>'>
</asp:Label>
<itemstyle width="20%" horizontalalign="Center" />
</ItemTemplate>
</asp:TemplateField>
C# code working
public Color ConvertFromHexToColor(string hex)
{
string colorcode = hex;
int argb = Int32.Parse(colorcode.Replace("#", ""), NumberStyles.HexNumber);
Color clr = Color.FromArgb(argb);
return clr;
}
And this is the source html and css code in my browser
<td>
<span id="BodyZone__ThemesGrid_lblForeColor_0" style="background-color: #FFFFFF;"></span>
<itemstyle width="20%" horizontalalign="Center">
</itemstyle>
</td>
CSS
table.activity_datatable td {
padding: 8px 15px;
color: #6c6c6c;
vertical-align: middle;
-webkit-transition: all 0.2s;
}
If you want to check with a boolean value if it is true then Green colour else Red colour will effect. Then displaying text with the respective colour according to the Eval function. Here GetStatus is a method you need to create it in code behind with its we are binding the text to UI, or else you can bind with Eval or Bind function as usual.
ForeColor='<%# (bool)Eval("UserType")==true?System.Drawing.Color.Green:System.Drawing.Color.Red %>'
Text='<%# GetStatus((bool)Eval("UserType")) %>'>
You need to place text inside of your Label (which renders to a span)
<asp:TemplateField HeaderText="BackGround Color">
<ItemTemplate>
<asp:Label ID="lblBackColor" runat="server" BackColor='<%# ConvertFromHexToColor( Eval("BackColor").ToString()) %>'>PUT_TEXT_HERE</asp:Label>
<itemstyle width="20%" horizontalalign="Center" />
</ItemTemplate>
</asp:TemplateField>
You may also prefer using a Panel (which renders to a div) rather than a Label. Don't forget to put stuff inside of the div or span.
ForeColor='<%# Convert.ToString(Eval("ESM")) == "Elective" ? System.Drawing.Color.Green:
Convert.ToString(Eval("ESM")) == "Emergency" ? System.Drawing.Color.Red: System.Drawing.Color.Purple%>'
Try this code..........

How can I right-align my GridView paging buttons?

I can't get my paging buttons: "<< < > >>" to align right.
Here is my GridView:
<asp:GridView ID="GridView1" ShowHeader="false" AllowPaging="true" PageSize="2"
AutoGenerateColumns="false" Width="100%" runat="server">
<Columns>
<asp:TemplateField>
<ItemTemplate>
foo
</ItemTemplate>
<ItemStyle CssClass="blah" />
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
bar
</ItemTemplate>
<ItemStyle CssClass="pluh" />
</asp:TemplateField>
</Columns>
<PagerStyle CssClass="gridpager" HorizontalAlign="Right" />
<PagerSettings Mode="NextPreviousFirstLast" FirstPageText="<<" PreviousPageText="<"
NextPageText=">" LastPageText=" >>" Position="Bottom" />
</asp:GridView>
And the CSS style:
.gridpager, .gridpager td
{
padding-left: 5px;
text-align: right;
}
If I remove the PageStyle CssClass and use HorizontalAlign="Right" on PagerSettings it works, but then I don't get the padding I need. And specifying both a CssClass and HorizontalAlign like my sample doesn't work.
What do I need to do?
Thank you!
It looks because of the horrible markup Web Forms outputs. The pager is created as a table within a td. I can get it working with this CSS:
.gridpager table {
float: right;
}
Edit: glad you got it figured out. I didn't know if you wanted to do it with pure CSS. I also don't like the float method much.
Edit 2: Looks like the rendered grid uses the align attribute in the td used for the pager when you use <PagerStyle HorizontalAlign="Right" />
Well, I feel kind of silly, but turns out I just needed to remove "text-align: right" from my style. Thanks for reading!
You can do simply a css trick:
.gridpager td table{
margin-right:20px;
}
This should solve the issue.

GridView : How to make fixed Header Row

?
Need fixed Header Row from Vertical Scroll bar, because my GridView is very large.
Making 2 panels was my the best try (but also won't works) :
added :
<asp:Panel style="width:720px;" runat="server" ScrollBars="Horizontal">
<asp:GridView ID="GV3" runat="server" />
<br />
<asp:Label ID="justfortest" Text="11111" runat="server" />
<hr />
<asp:Panel style="max-height:400px;border-style: outset; border-width: 4px; "
ID=HGix runat="server" ScrollBars="Vertical">
<asp:GridView ID="GridView2" runat="server" CellPadding="4"
.........................
</asp:GridView>
</asp:Panel>
</asp:Panel>
why the horizontal line adds to second panel, it's ScrollBars="Vertical" but works as Both
Implementing a Fixed GridView Header in ASP.NET (Uses Panels)
Using jQuery
Stackoverflow
Freezing gridview header in a fixed width div
Table - fixed header, scrollable body, most robust/simple solution?

Resources