Silly question...
Code:
<asp:BoundField DataField="PrevDuration" HeaderText="Prev."
SortExpression="PrevDuration" ItemStyle-Width="25">
</asp:BoundField>
Html output:
<td style="width:25px;"><input name="ctl00$MainContent$GridView1$ctl03$ctl02" type="text" value="1" size="5" title="Prev."></td>
So this code specifies the td width, but how instead can I specify the input width?
PS. by the way where does that size=5 comes out from?
Use ControlStyle-Width="25px" property.
<asp:BoundField DataField="PrevDuration" HeaderText="Prev." SortExpression="PrevDuration" ControlStyle-Width="25px">
</asp:BoundField>
Give it a cssclass and set the width in there
<asp:BoundField DataField="PrevDuration"
HeaderText="Prev."
SortExpression="PrevDuration"
ItemStyle-Width="25"
CssClass="inputs"> //note this
</asp:BoundField>
CSS
.inputs{
width:...px;
}
Related
I have an asp.net 4.5 web app, where I generate a gridview with about 40-50 columns and rows vary between 1 and a few thousands.
Since it's so big, I put the gridview in a div, set a height and the overflow-y:scroll.
What I want is to be able to see the header when I scroll.
I tried to find answers online. First solution was to give the header a CSS class and set the position:absolute, thus popping out the header. The problem with this approach was that when the header pops out, it covers the first row and unless I set the height of row huge, I can't see the first row.
I tried making only the first row's height bigger and setting the vertical-align to bottom. This worked very nice. The problem is that I have implemented jQuery tablesort on the header. When I sorted the table, the first row that has a huge height, gets buried and the rest of the rows scramble because they are being offset by that huge row.
I searched on Stack Overflow and I found another thread about the same problem: How Can We Have A SCROLLABLE GridView With Fixed Header?
Here it suggested creating another table for the header. This is very nice, but the problem here is that I don't have a fixed size table. The columns nr vary and the rows value vary. So I made another gridview above the main one. I set the ShowHeaderWhenEmpty=true. I added the columns in the code behind. The problem now is that the columns are not the same width as the original gridview.
I tried to set the width in OnRowDataBound. I tried with jQuery. Nothing works. The only thing that works is if I add the data of the original gridview and hide the rows. But can I hide them ? If I use display:none, the header width goes back like it doesn't even see the data. I managed to hide the rows with opacity:0.0
The problem here is that the page takes a long time to load, it's very slow and it doesn't even render properly.
So instead of adding all the data, I tried adding a single row. In this row, for each cell, I added the longest string on that column. This method worked the best, but the problem now is that some of the columns in the second gridview are not aligned with the original gridview.
Why? My best guess is that some cells have wrap enabled and when that longest string wraps, it doesn't wrap the same as other rows which might affect the column's width.
What can I try next?
Update
So I was thinking, since I'm already using the jQuery tablesorter plugin, I could try to use the widget-scroller to have the header fixed.
I found this page: https://mottie.github.io/tablesorter/docs/example-widget-scroller.html, but I haven't managed to enable the scroller.
Current tablesorter version: TableSorter (FORK) v2.28.15
My code is this:
HTML
<div id="wrapper">
<asp:GridView ID="OnlineSearchGridView" runat="server" CssClass="tablesorter hover-highlight tablesorter-scroller tablesorter-scroller-table" Visible="false" EnableSortingAndPagingCallbacks="false" AutoGenerateColumns="true" OnRowDataBound="OnlineSearchGridView_RowDataBound" Height="50px" CellPadding="5" Font-Names="Arial" Font-Size="9pt">
<EditRowStyle Font-Names="Arial" Font-Size="9pt" />
<HeaderStyle BackColor="#666666" BorderColor="Black" Font-Names="Arial" Font-Size="9pt" ForeColor="White"/>
<RowStyle BorderStyle="Solid" Font-Names="Arial" Font-Size="9pt" BorderColor="Black" BorderWidth="1px" HorizontalAlign="Center"/>
</asp:GridView>
</div>
JS
jQuery.fn.insertTHead = function (selection)
{
return this.each(function ()
{
if (jQuery('thead', this).length == 0)
jQuery("<thead></thead>").prependTo(this).append(jQuery(selection, this))
})
}
$(document).ready(function ()
{
$("table")
.insertTHead("tr:first")//Calling the jquery function that will insert the thead after postback.
.tablesorter({
widgets: ['scroller'],
widgetOptions:
{
scroller_height: 300,
scroller_upAfterSort: true,
scroller_jumpToHeader: true,
scroller_barWidth: null
}
})
});
External files
<link rel="stylesheet" type="text/css" href="css/tablesort_style.css"/>
<script type="text/javascript" src="Scripts/jquery-latest.js"></script>
<script type="text/javascript" src="Scripts/jquery.tablesorter.js"></script>
<script type="text/javascript" src="Scripts/jquery.tablesorter.widgets.js"></script>
What is wrong with this picture? Why isn't the scroller active?
I'm thinking because griview doesn't have colgroups? Do I need to append them just like I'm doing with the thead?
My solution was using ScrollableTablePlugin addon:
<script src="js/ScrollableTablePlugin_1.0_min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#<%=GridView1_resize.ClientID%>').Scrollable({
ScrollHeight: 600
});
});
GridView1_resize is quite a normal GridView:
<asp:GridView ID="GridView1_resize" runat="server" AutoGenerateColumns="False"
CellPadding="0" DataSourceID="ObjectDataSource1" EnableTheming="false"
EmptyDataText="Nessun rapportino" CssClass="presenzeCol">
<Columns>
<asp:BoundField DataField="Nome"
HeaderText="Cognome e Nome" SortExpression="Nome">
</asp:BoundField>
<asp:BoundField DataField="Matricola" HeaderText="Matr."
SortExpression="Matricola">
</asp:BoundField>
<asp:BoundField DataField="Email">
</asp:BoundField>
<asp:BoundField DataField="G1" HeaderText="1" DataFormatString="{0:f}">
</asp:BoundField>
<asp:BoundField DataField="G2" HeaderText="2" DataFormatString="{0:f}">
</asp:BoundField>
<asp:BoundField DataField="G3" HeaderText="3" DataFormatString="{0:f}">
</asp:BoundField>
<asp:BoundField DataField="G4" HeaderText=" 4" DataFormatString="{0:f}">
</asp:BoundField>
<asp:BoundField DataField="G5" HeaderText="5" DataFormatString="{0:f}">
</asp:BoundField>
<asp:BoundField DataField="G6" HeaderText="6" DataFormatString="{0:f}">
</asp:BoundField>
<asp:BoundField DataField="G7" HeaderText="7" DataFormatString="{0:f}">
</asp:BoundField>
<asp:BoundField DataField="G8" HeaderText="8" DataFormatString="{0:f}">
</asp:BoundField>
<asp:BoundField DataField="G9" HeaderText="9" DataFormatString="{0:f}">
</asp:BoundField>
<asp:BoundField DataField="G10" HeaderText="10" DataFormatString="{0:f}">
</asp:BoundField>
<asp:BoundField DataField="G11" HeaderText="11" DataFormatString="{0:f}">
</asp:BoundField>
<asp:BoundField DataField="G12" HeaderText="12" DataFormatString="{0:f}">
</asp:BoundField>
</Columns>
</asp:GridView>
I'm new to WebForms and have no idea how to make this thing work.
<asp:BoundField DataField="StateCode.Code" HeaderText="State"
SortExpression="StateCode.Code" />
I have a state code, such as CA, that is a text field that can be edited, I know it should be a drop down but that's not my call. Unless there's an easy way to turn this into a drop down box, that would be acceptable.
Anyways, it needs to be forced to upper. I've been trying to set an ItemStyle as below but it's not working. And due to ASP.Net WebForms 'magic', I don't know how to intercept the data before it's saved to the database record to force it to save an uppercase state code.
<asp:BoundField DataField="StateCode.Code" HeaderText="State"
SortExpression="StateCode.Code">
<ItemStyle texttransform: "uppercase" />
</asp:BoundField>
Three things could work.
Figuring out why I can't get ItemStyle to work, I've tried every syntax imaginable.
Figuring out a way to turn this Bound Datafield into a drop down menu instead.
Figuring out how to intercept the data before it's saved to the database.
Here is the datasource:
<asp:EntityDataSource ID="EntityDataSource_School" runat="server"
ConnectionString="name=SchoolEntity" DefaultContainerName="SchoolEntity"
EntitySetName="School" Where="it.ID = #schoolid" EnableUpdate="True">
<WhereParameters>
<asp:Parameter DbType="Guid" DefaultValue="00" Name="schoolid" />
</WhereParameters>
For ItemStyle to work, do these
Markup
<asp:BoundField DataField="StateCode.Code" HeaderText="State"
SortExpression="StateCode.Code">
<ItemStyle CssClass="toUpper" />
</asp:BoundField>
CSS
.toUpper {
text-transform: uppercase;
}
You can directly specify the ItemStyle-CssClass for the BoundField as below.
<asp:BoundField DataField="StateCode.Code" HeaderText="State"
ItemStyle-CssClass="statuscode" SortExpression="StateCode.Code" />
and you css
.statuscode {
text-transform: uppercase;
}
If you want to just capitalize the first letter then text-transform: capitalize; will work
I have a 'status' cluster of three columns. I want to have the header row span all three. I know I can use the colspan="3" parameter with the th tag in HTML. How do I accomplish this with BoundField?
Sample code snippet as it exists now...
<asp:BoundField DataField="Priority" HeaderText="Priority" />
<asp:TemplateField ItemStyle-Width="50">
<ItemTemplate>
<asp:ImageButton ID="btnMinus" CommandName="minus" runat="server" ImageUrl="~/Images/arrowUp_ico.gif" BorderWidth="1" BorderStyle="Ridge" />
<asp:ImageButton ID="btnPlus" CommandName="plus" runat="server" ImageUrl="~/Images/arrowDown_ico.gif" BorderWidth="1" BorderStyle="Ridge" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ProjectName" HeaderText="Project" />
<asp:BoundField DataField="Group" HeaderText="Group" />
<asp:BoundField DataField="Assigned" HeaderText="Assigned" />
...etc.
I need the header text 'Priority' to span the itself and the next two columns.
As is usual for me, when it takes a long time to get an answer I figure it out myself. The solution is to go to the code behind in the init section (or equivalent, depending on your project) and add two lines...
myDataGrid.HeaderRow.Cells[n].ColumnSpan = 2;
MyDataGrid.HeaderRow.Cells[n+1].Visible = false;
This extends the first header cell (n) out to be two columns wide and removes the adjacent one. If you leave out the second line the header for that column just gets pushed to the right.
I can not set the width of bound field. Is there any problem in the following markup.
<asp:BoundField DataField="UserName" HeaderText="User Name"
meta:resourcekey="BoundFieldUNCUserNameResource1">
<HeaderStyle Width="50%" />
</asp:BoundField>
Please refer to the image. I set width using the following. The yellow colored numbers are corresponding width. The marked user name is always Wrapped even I set a width to a large value (say 50%) and set Wrap="false".
<HeaderStyle Width="20%" Wrap="true" />
<ItemStyle Width="20%" Wrap="true" />
Try This:
ItemStyle-Width="50%" ItemStyle-Wrap="false" in the BoundField tag
For BoundField:
<asp:BoundField DataField="UserName" HeaderText="User Name" ItemStyle-Width="50px" />
It's amazing that even now, in 2016, the ItemStyle-Width and HeaderStyle-Width attributes usually get ignored in the ASP.Net GridView control.
Sometimes, they just seem to create no markup whatsoever.
My solution was to give up trying to set this attributes, and I resorted to using plain old CSS instead:
.AspNet-GridView table tbody tr td:nth-child(1)
{
/* Set the width of the 1st GridView column */
width: 200px;
}
.AspNet-GridView table tbody tr td:nth-child(2)
{
/* Set the width of the 2nd GridView column */
width: 300px;
}
I am also facing this problem today. What i got is you must define ur width in css class & called that css class in boundfeild.
e.g.
HeaderStyle-CssClass="width350"
To change column width gridview boundfield just add this inside boundfield
ItemStyle-Width="200" ItemStyle-Wrap="False"
it worked for me, try this
After trying several solutions with no luck, I was able to add a css class to the item. Seems like both HeaderStyle-CssClass and ItemStyle-CssClass attributes needed to be set:
<asp:BoundField DataField="Name" HeaderText="Name" HeaderStyle-CssClass="Name" ItemStyle-CssClass="Name" />
Is possible to set the title attibute on the image buttons of a commandfield?
<asp:CommandField ShowDeleteButton="True" ButtonType="Image" ShowEditButton="True"
DeleteImageUrl="images/BPAnn.gif" EditImageUrl="images/edit.gif" DeleteText="Elimina" EditText="Modifica"
UpdateImageUrl="images/apply.gif" CancelImageUrl="images/undo.gif" />
When you say Title do you mean HeaderText???
<asp:CommandField ShowEditButton="True" HeaderText="Testing" />
If You want Tooltip my suggestion is to convert CommandField to TemplateField.
In Template field you have more options available.
In case someone needs this you can do this for any command. Here it is done for the delete:
<asp:CommandField DeleteText="<i aria-hidden='true' title='Delete Role' class='glyphicon glyphicon-trash'>" ShowDeleteButton="True"/>