Display Images in Pop-Up attached to C1GridView From Database

C1GridView for ASP.NET AJAX enables its users to display items from a data source in an interactive, fully customizable table view. C1GridView control is also standards-compliant and AJAX supported. This means that run-time data can be formatted, manipulated or reloaded easily with its help. To elaborate more on the feature and enhancing its UI, we would be binding a Pop-Up to C1GridView, which will display "Image" on your hovering mouse. These images are stored in the Database in "Image" DataField. Since Images are stored as "Binary Data", a handler will be created to read them. A template column inside C1Gridview will be bound to the "HoverMenuExtender" control, which displays "Images" on hovering mouse with the help of a handler. Below is the detailed implementation : Creating Handler For displaying images in C1GridView, we need to create a Handler to read binary data from the database. Right click on solution explorer and then Add new item. Pick Generic Handler and name it ImageHandler.ashx. SQL Database with which C1Gridview is bound has 3 columns ' ImageID', 'ImageName' and 'Image'. 'Image' field has images stored in db. In ProcessRequest(HttpContext context) method write the below given code :

SqlConnection con = new SqlConnection(); con.ConnectionString = System.Configuration.ConfigurationManager.ConnectionStrings["C1ConnectionString"].ConnectionString; SqlCommand cmd = new SqlCommand(); cmd.CommandText = "Select [ImageName],[Image] from [Images] where ID=@ID"; cmd.CommandType = System.Data.CommandType.Text; cmd.Connection = con; SqlParameter ID = new SqlParameter("@ID", System.Data.SqlDbType.Int); ID.Value = context.Request.QueryString["ID"]; cmd.Parameters.Add(ID); con.Open(); SqlDataReader dr = cmd.ExecuteReader(); dr.Read(); context.Response.BinaryWrite((byte[]) dr["Image"]); dr.Close(); con.Close();

Adding "ToolkitScriptManager" Now let us move to Design view of the .aspx page. As mentioned earlier we will be binding a Pop-Up to C1GridView which will display "Image" on the hovering mouse. For this purpose "HoverMenuExtender" control will be used. ASP.NET AJAX Controls Toolkit provides "HoverMenuExtender control" that enables one to attach popup menu with any ASP.NET control.It can be used to display a larger image of the product when the user moves his or her mouse on the product thumbnail image or any specific column. Before using 'HoverMenuExtender' we will have to add "ToolkitScriptManager" control to the top. Asp.Net AJAX Controls Toolkit includes its own version of the ScriptManager, called ToolkitScriptManager, that is derived from ScriptManager and is meant to improve some of the ScriptManager's behaviors; in particular, how it renders out the behavior of JS scripts. The tags given below will assist you in adding "ToolkitScriptManager": Binding C1GridView with SqLDataSource Binding C1Gridview with SQL Database is not difficult and can simply be bound by setting "DataSource". However, since one of the Fields in the Database is "Image" type we will have to tweak the implementation. This is where the handler we created above will come into play. C1GridView control on the 'Design' view will have "ImageId" as bound field and "ImageName" as the template Field. We added "ImageName" as the template field since it will be bound to the pop-up menu, where images stored in db will be displayed. An asp "Label" will be added inside "Template" displaying "Image Name". The "HoverMenuExtender" control will be bound to this "Label" displaying the "Image" stored in the database corresponding to the row on which mouse is hovered. This is achieved by setting "ImageUrl" property to ' Here is the whole code snippet :

<cc1:C1GridView ID="C1GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ID" VisualStylePath="~/C1WebControls/VisualStyles" VisualStyle="Vista" DataSourceID="SqlDataSource1">

<asp:Label runat="server" ID ="Description" Text =''> <asp:HoverMenuExtender ID="HoverMenuExtender2" runat="server" PopupControlID="popupImage" TargetControlID="Description" OffsetX="10" OffsetY="5" PopupPosition="Right" PopDelay="50" HoverDelay="50"> <asp:Image runat="server" ID="mainImage" ImageUrl='' /> In a NutShell To summarize what we just displayed, the "Images" stored in the SQL Database are in a pop-up attached to C1GridView. When the sample attached with this blog is run, then one will see a table view displaying an 'ImageId' and 'ImageName' column. While hovering the mouse over the grid, corresponding Images will be displayed in a pop-up. Please note that while running the attached sample, DO NOT forget to include the correct dlls for Ajax Toolkit. In case the samples are not there in the system make sure to download it from : http://ajaxcontroltoolkit.codeplex.com/releases/view/43475#DownloadId=116534