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.
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>
Is there some way I can use a data format string in a bound field which appends % to my value ?
Example :
For rupee we can do this :
<asp:BoundField DataField="PassPercent" ItemStyle-Width="7%" HeaderText="Pass Percent" DataFormatString="{0:c}"
I tried using a template field too but that didn't work :
<asp:TemplateField HeaderText="Pass Percent" ItemStyle-Width="5%" >
<ItemTemplate>
<asp:Label runat="server" DataValueField="PassPercent" DataTextField="PassPercent" />
<asp:Label Text="%" runat="server" />
</ItemTemplate>
</asp:TemplateField>
Try this:-
DataFormatString="{0:p}"
But, please note percentages are stored as decimals in this case so you need to adjust your values accordingly. Check the formatting's here on MSDN.
Or you can simply hard-code it:-
DataFormatString="{0}%"
I have a DataGrid created like so:-
<asp:DataGrid id="myGrid"
BorderWidth="1"
CellPadding="3"
AutoGenerateColumns="true"
runat="server"
OnSelectedIndexChanged="myGridSelectedCallback">
<HeaderStyle CssClass="subHeader"></HeaderStyle >
<Columns>
<asp:ButtonColumn HeaderText=""
ButtonType="LinkButton"
Text="Display"
CommandName="Select">
</asp:ButtonColumn>
</Columns>
</asp:DataGrid>
And columns are added to it in the codebehind like this:-
DataTable dt = new DataTable();
dt.Columns.Add(new DataColumn("MyCol", typeof(string)));
but when I add lines to it, sometimes the text in the column wraps to another line. There doesn't appear to be any reason for this; the MaxLength for the column is -1, and there are no line break or other control characters in the added string.
What I'd like to happen is for the column to be widened to accommodate the longest string in it (the strings are only ~20 chars or so). I can't find anything on this as everyone else seems to have the opposite problem.
(This grid is contained within a div, but the div has no maximum width.)
Try using HeaderStyle-Wrap="False"
<asp:DataGrid id="DataGrid1" runat="server">
<Columns>
<asp:BoundColumn HeaderStyle-Wrap="False"></asp:BoundColumn>
<asp:TemplateColumn HeaderStyle-Wrap="False"></asp:TemplateColumn>
</Columns>
</asp:DataGrid>
Also, you can check this:DataGrid Web Server control wraps when the ItemStyle Wrap property or the HeaderStyle Wrap property is set to false in Visual Basic .NET
I have a grid like below.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" s
onrowcommand="GridView1_RowCommand">
<Columns>
<asp:ButtonField DataTextField="Name" HeaderText="Name" />
<asp:BoundField DataField="ArrDate" DataFormatString="{0:MM/dd/yyyy}"
HeaderText="Arr Date" />
<asp:BoundField HeaderText="Dep Date" DataField="DepDate"
DataFormatString="{0:MM/dd/yyyy}" />
<asp:BoundField HeaderText="Mail" DataField="Mail" />
<asp:BoundField HeaderText="Status" DataField="Status" />
<asp:BoundField DataField="ResId" HeaderText="ResId" Visible="False" />
</Columns>
</asp:GridView>
In Code Behind:-
try
{
string text = GridView1.Rows[2].Cells[5].Text;
ScriptManager.RegisterStartupScript(this, GetType(), "Message", "alert('ResId = " + text + ".');", true);
}
catch { }
Now the message shows - RegId =.
I can't get the value. So I change the RedId BoundField as vissible. Now I got the Value.
that is RegId =6.
I have two issue now -
1) How to get the RegId value in Non Visible Column.
2) How I find the Row value which i click... bzs the only i can change the ROWVALUE in code..
string text = GridView1.Rows[ROWVALUE].Cells[5].Text;
That is certainly not the right way to do it. You might want to look at using DataKeys to achieve this. With current approach, when you add a new column to your grid your code will fail.
Add your RegId column inside DataKeys property on your gridview
Reference your gridview datakey for the current row in codebehind like this
int regId= Convert.ToInt32(YourGridview.DataKeys[rowIndex]["RegId"].ToString());
I'm trying to bind a GridView HyperLinkField such that the bound column is used as a parameter value in the URL. Pretty standard stuff - nothing fancy, but the binding fails when the bound column contains a colon, i.e. :. I'm my particular case, this value is a string representing a duration of time, e.g. "14:35", or "1:07:19".
Here's my GridView, with the time value bound to the HyperLinkField url.
<asp:GridView ID="ResultsGridView" runat="server" AutoGenerateColumns="False"
DataSourceID="ResultsDataSource" EnableModelValidation="True"
AllowPaging="True">
<Columns>
<asp:BoundField DataField="Year" HeaderText="Year" SortExpression="Year" />
<asp:HyperLinkField DataNavigateUrlFields="RunTime"
DataTextField="RunTime" HeaderText="Hyperlink"
DataNavigateUrlFormatString="LinkedPage.aspx?param={0}" />
<asp:BoundField DataField="RunTime" HeaderText="Time"
SortExpression="RunTime" />
<asp:BoundField DataField="FullName" HeaderText="Name"
SortExpression="FullName" ReadOnly="True" />
</Columns>
</asp:GridView>
It produces HTML like this. Note that the <a> tags have no href attribute.
<tr>
<td>2010</td><td><a>34:58</a></td><td>34:58</td><td>Joe Schmoe</td>
</tr><tr>
<td>2010</td><td><a>35:30</a></td><td>35:30</td><td>Rod Krueger</td>
</tr><tr>
<td>2010</td><td><a>35:38</a></td><td>35:38</td><td>Mike Johnson</td>
</tr>
But if I switch the bound field from RunTime to Year, i.e. to a column that doesn't contain a colon in the values, it works as expected. Take the GridView above, and change the DataNavigateUrlFields attribute of the HyperLinkField, like so:
<asp:HyperLinkField DataNavigateUrlFields="Year"
DataTextField="RunTime" HeaderText="Hyperlink"
DataNavigateUrlFormatString="LinkedPage.aspx?param={0}" />
And now the HTML output is correct, like this:
<tr>
<td>2010</td><td>34:58</td><td>34:58</td><td>Joe Schmoe</td>
</tr><tr>
<td>2010</td><td>35:30</td><td>35:30</td><td>Rod Krueger</td>
</tr><tr>
<td>2010</td><td>35:38</td><td>35:38</td><td>Mike Johnson</td>
</tr><tr>
So the nut of my question is this: how do I bind a data column with values that contain a colon to the URL of a HyperLinkField? Or, failing that, create the same bound hyperlink by another method?
Changing the format of the data to not include a colon would be a last resort, because LinkedPage.aspx expects the parameter value in that format, and it's already written, tested and in use.
<asp:TemplateField HeaderText="Hyperlink">
<ItemTemplate>
<asp:HyperLink ID="HyperLink1" runat="server"
NavigateUrl='<%# Eval("RunTime", #"LinkedPage.aspx?param={0:hh\:mm}") %>'
Text='<%# Eval("RunTime", #"{0:hh\:mm}") %>'></asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
Wow, very strange, worse comes to worse, as a very last step, you can always tap into RowDataBound, and set the cell text to hyperlink HTML yourself, but in the meantime, try tapping into RowDataBound and examining the results there. Maybe you can encode the value at binding time, so that if there is an issue with :, encoding probably will resolve it?
You may also want to submit that as a bug to connect.microsoft.com...
HTH.