Develop Reference

How to display dynamically generated images in asp.net gridview?

I have a class (POCO) that has an Image property. I use a List<> of this class as the datasource for a gridview control. Most of the properties are grabbed from the database. However, I am dynamically generating a barcode (System.Drawing.Image) in my code behind and populating the Image property in the POCO with the result prior to databinding. It is NOT possible for me to store the images on the database or the filesystem. How do I go about displaying the barcodes in the Gridview control? When I try, nothing shows and the images generate 404 errors. The code for the gridview is:
<asp:GridView runat="server" ID="gvInventoryDetail" CssClass="centerpage"
style="width: 700px;" ItemType="DisplayModels.InventoryDetailItem"
DataKeyNames="InventoryId" AutoGenerateColumns="False"
AllowPaging="True" PageSize="11" ShowHeaderWhenEmpty="True">
<Columns>
<asp:BoundField HeaderText="Barcode" DataField="Barcode"/>
<asp:TemplateField HeaderText="Image">
<ItemTemplate >
<asp:Image ID="BarcodeImage" runat="server"
Height="150px" Width="80px" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="Comments" DataField="Comments"/>
<asp:BoundField HeaderText="Status" DataField="Status"/>
<asp:BoundField HeaderText="Broken?" DataField="IsBroken"/>
</Columns>
<SelectedRowStyle BackColor="#89d8f6" Font-Bold="True"/>
</asp:GridView>
Any help is MUCH appreciated!

I had a similar issue when generating pie charts using another 3rd party project.
What I did was the following:
Keep the Image Tag in your Grid.
Set that Image Tag to call an ASPX Page in your site, passing what ever params you need on the URL to generate the barcode image.
In that new ASPX do the following
response.clear()
response.binarywrite() of the image.
If you browse that URL you will see the image in the browser, which means, that URL would also show the image in your Image Tag in your grid.

How to encode html data in asp / vb.net boundcolumn datagrid?

I have some data in database which I am binding it to a bound column.
Data contains many html tags.
But I want to display it as TEXT only "NOT TO RENDER IT"
I am not sure because HTMLENCODE property doesn't work with boundcolumn.
Please help.
Also just to add I have multiple datagrids binding with bind() function and are using one event handler Itemdatabound.
<asp:boundcolumn datafield="content" readonly="True" headertext="Product ID ">
<headerstyle horizontalalign="Center" width="100px"></headerstyle>
<itemstyle horizontalalign="Left" width="100px"></itemstyle>
</asp:boundcolumn>

Prevent HTML encoding in auto-generated GridView columns
extract from possible solution from above link:
<asp:TemplateField HeaderText="myLink" SortExpression="myLink">
<ItemTemplate>
<asp:Literal ID="litHyperLink" runat="server" Text='<%# Bind("myLink", "{0}") %>' />
</ItemTemplate>
</asp:TemplateField>
Or bind your own columns, also shown in above link

Server.HtmlDecode()
This will allow you to print the tags without rendering them to html.
http://msdn.microsoft.com/en-us/library/hwzhtkke(v=vs.110).aspx

Pass session variable in the DataNavigateUrlFormatString for datagrid

I am using Datagrid with a hyperlink column.
<asp:DataGrid ID="dg" runat="server" AllowSorting="True" Font="Trebuchet MS, 14.25pt" Width ="880px"
AutoGenerateColumns="false" ForeColor="Black" AlternatingItemStyle-BackColor="LightGray"
OnItemDataBound="dgdatabound" EnableViewState="true">
<HeaderStyle CssClass="GridHeader" />
<ItemStyle CssClass="GridItem" />
<AlternatingItemStyle CssClass="GridAltItem" />
<PagerStyle VerticalAlign="Middle" />
<Columns>
<asp:HyperLinkColumn DataTextField ="BugId" HeaderText="BugId" HeaderStyle-Width ="60"
DataNavigateUrlField ="BugId"
DataNavigateUrlFormatString="SOME URL?USER"
HeaderStyle-BackColor="AliceBlue" />
</Columns>
From the above code, How can I pass 'USER' value from Session.
As of now i have tried with:
DataNavigateUrlFormatString="SOME URL?USER =<% Session["username"]%>"
but it didnt worked :(

You can't use ASP.NET inline expressions in properties of server controls.
See this MSDN artcle:
Remember that the displaying expression cannot be used in the
attributes of server controls. This is because the .NET Framework
directly compiles the whole expression instead of the displaying
content as the value to the attribute.
You will need to set this value in your code page, if you absolutely need to get it from the Session.
It's kind of hacky, but you could do it like this (probably in your Page_Load):
protected void Page_Load(object sender, EventArgs e)
{
if(!Page.IsPostBack)
{
string yourURL = "SOME URL?USER=" + Session["username"].ToString();
dg.Columns[0].DataNavigateUrlFormatString = yourURL;
}
}
Note: the only reason I say "kind of hacky" is that you have to hardcode the column ordinal (number), which is fragile (if your column order changes).

How to programmatically iterate through pages of a GridView

I've created a wallboard application to display outstanding support calls for my ICT department. I've bound a number of gridviews to sqldatasources which execute a stored procedure. This is automated via asp.net ajax controls and partially refreshes the page/data every 30 seconds.
At the moment, when the number of records in the gridview goes over 9, the gridview automatically pages and shows the number of pages in the bottom right hand corner. The helpdesk can then VNC to the box which controls the screen and manually click to see what's on the next page.
What I am after is a way to programmatically (using the c# code-behind file) changing the current displayed page after 10/15 seconds or so, obviously if this is possible in the scope of the gridview. I trailed using javascript (and failed at jquery) of scrolling the gridview within a div, however this didn't work as expected.
Can anyone point me in the right example? I can't find anyone else querying this functionality via a quick Google. Any help/advice of how to fix this issue would be greatly appreciated!!
Gridview Code:
<asp:GridView ID="GridView1" ShowHeader="False" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1"
GridLines="None" CellPadding="2" Font-Size="35pt" AllowPaging="True" PageSize="9">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" SortExpression="ID">
<ItemStyle Width="15%" />
</asp:BoundField>
<asp:BoundField DataField="ASSIGNEES" HeaderText="ASSIGNEES" SortExpression="ASSIGNEES">
<ItemStyle Width="32%" Wrap="false"/>
</asp:BoundField>
<asp:BoundField DataField="title" HeaderText="title" SortExpression="title">
<ItemStyle Width="53%" Wrap="false"/>
</asp:BoundField>
</Columns>
</asp:GridView>
SqlDataSource Code:
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:FPConnectionString %>" SelectCommand="HDMonitoringOutstandingToday" SelectCommandType="StoredProcedure"></asp:SqlDataSource>
Printscreen of wallboard:

You can try something like this in a timer.
if(GridView1.PageIndex == GridView1.PageCount)
{
GridView1.PageIndex = 0;
}
else
{
GridView.PageIndex = GridView.PageIndex + 1;
}
I cant remember if you would need to add one to the PageIndex or not.
But anyway, the properties you need to work with are PageIndex and PageCount.

GridView.PageIndex
You can change pages by setting the PageIndex, how you do it is up to you see here for some examples: http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.pageindex.aspx

Gridview header issue: call event on header

Now I got this gridview, And I need the headers to be clickable, whereafter an event starts (something like OnClickHeader="header_ClickEvent"?) Ofcourse there is a SortExpression element, which enables to sort the grid, but I want to be able to start any event, like when clicking a button.
I could not find any solution within the asp:BoundField nor asp:TemplateField...
I thought a hyperlink could solve the problem, but that was a bit premature.
Also, when using a TemplateField, I find it very hard to fill the column with data.
Could anyone bring me the solution?
The Gridview:
<asp:GridView CssClass="gridview" ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="Student_key" OnSelectedIndexChanged="GridView1_SelectedIndexChanged" PagerSettings-Visible="false" PageSize="14">
<HeaderStyle CssClass="headerstyle" />
<RowStyle CssClass="rowstyle"/>
<AlternatingRowStyle CssClass="altrowstyle" />
<Columns>
<asp:BoundField DataField="Studentnumber" HeaderText="Studentnummer" >
<HeaderStyle CssClass="header100" />
</asp:BoundField>
<asp:BoundField DataField="Prefix" HeaderText="Voorletters" >
<HeaderStyle CssClass="header75" />
</asp:BoundField>
<asp:BoundField DataField="prename" HeaderText="Voornaam" SortExpression="Voornaam">
<HeaderStyle CssClass="header75" />
</asp:BoundField>
<asp:BoundField DataField="nickname" HeaderText="Roepnaam" >
<HeaderStyle CssClass="header100" />
</asp:BoundField>
<asp:BoundField DataField="insertion" HeaderText="Tussenvoegsel" >
<HeaderStyle CssClass="header100" />
</asp:BoundField>
<asp:BoundField DataField="surname" HeaderText="Achternaam">
<HeaderStyle CssClass="header100" />
</asp:BoundField>
<asp:CommandField SelectText="show results" ShowSelectButton="True" >
<HeaderStyle CssClass="header100" />
</asp:CommandField>
</Columns>
<EmptyDataTemplate >There are no results shown, please try again.</EmptyDataTemplate>
</asp:GridView>

Funny, I had the same problem today, and, like you, I found the above solution a bit much.
Here's something that I'm happy with.
First, you need to use the CSS Friendly Control adapters. There are a lot of other benefits to this if you're using a GridView and you have any class whatsoever. It is needed in this case because it adds the necessary classes to your header based on sorting properties, which ASP.NET does not.
You don't need to change any of your code to add the adapters, just drop their DLL in your bin folder, and their .browser file in your App_Browsers folder (which you may need to add for this purpose).
(On a side node, I actually found that the adapters broke some of my other control layouts (which were styled against the default ASP.NET markup), so I ripped out all the adapter tags except the one for GridView.)
<browser refID="Default">
<controlAdapters>
<adapter controlType="System.Web.UI.WebControls.GridView"
adapterType="CSSFriendly.GridViewAdapter" />
</controlAdapters>
</browser>
Now, to get to the good part. This bit of jQuery in your document.ready event will have the desired effect.
// Make the entire column header clickable, not just the text
$('#your-table thead th.sortable').each( function() {
var href = $('a', this).attr('href');
$(this).click( new Function(href.replace(/^javascript:/, '')) );
$('a', this).attr('href', 'javascript: return false;');
});
Basically, it strips the javascript out of the link that ASP.NET places in the header, which looks like this
Qty
and puts the code into the header's click event. Then it disables the link, so that the event bubbling does not cause a conflict.
Of course, you'll need to add style rules to give the desired visual cues.
This solution degrades well, since those mythical non-javascript browsers will simply exhibit the default behavior (where you have to click on the header text).
Hope this works for you!
EDIT: I just realized that I hadn't read your question very carefully the first time. My code was designed to get the default sorting behavior when you click anywhere in the header (not just the link text). But I guess this was close enough :)
By the way, to get data into a template field similar to what ASP.NET would put there, you just add
<ItemTemplate>
<%# Eval("FieldName") %>
</ItemTemplate>
See the documentation on formatting, etc.

This is old code mind you. It can be optimized.
http://weblogs.asp.net/rajbk/archive/2006/08/04/Clickable-GridView-Headers.aspx