Skip Navigation LinksHome / Community & Support / Code Library / ASP.NET AJAX > Grid > Thumbnail Generator And RadGrid

Thumbnail Generator And RadGrid

Feed from this thread
  • Shinu MVP avatar

    Posted on Jul 13, 2007 (permalink)

    Requirements

    RadControls version

    4.6.2

    .NET version

    2.0

    Visual Studio version

    2005

    programming language

    c#

    browser support

    all browsers supported by RadControls


     
    PROJECT DESCRIPTION
    This project explains how to show a thumbnail of a image in side a RadGrid Template column and also provide options for selecting the Thumbnail size using a RadCombobox.

    MakeThumbnail.aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="MakeThumbnail.aspx.cs" Inherits="MakeThumbnail" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server">  
        <title>Untitled Page</title> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <div> 
          
        </div> 
        </form> 
    </body> 
    </html> 

    MakeThumbnail.cs
    using System;  
    using System.Data;  
    using System.Configuration;  
    using System.Collections;  
    using System.Web;  
    using System.Web.Security;  
    using System.Web.UI;  
    using System.Web.UI.WebControls;  
    using System.Web.UI.WebControls.WebParts;  
    using System.Web.UI.HtmlControls;  
    using System.IO;  
     
    public partial class MakeThumbnail : System.Web.UI.Page  
    {  
        protected void Page_Load(object sender, EventArgs e)  
        {  
            int ThumbNailSize = Convert.ToInt32 (Session["ThumbNailSize"].ToString ());  
            // get the file name -- fall800.jpg  
            string file = Request.QueryString["file"];  
            string fullpath = "~/" + file;  
     
            // create an image object, using the filename we just retrieved  
            System.Drawing.Image image = System.Drawing.Image.FromFile(Server.MapPath(fullpath));  
     
            // create the actual thumbnail image  
            System.Drawing.Image thumbnailImage = image.GetThumbnailImage(ThumbNailSize, ThumbNailSize, new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback), IntPtr.Zero);  
     
            // make a memory stream to work with the image bytes  
            MemoryStream imageStream = new MemoryStream();  
     
            // put the image into the memory stream  
            thumbnailImage.Save(imageStream, System.Drawing.Imaging.ImageFormat.Jpeg);  
     
            // make byte array the same size as the image  
            byte[] imageContent = new Byte[imageStream.Length];  
     
            // rewind the memory stream  
            imageStream.Position = 0;  
     
            // load the byte array with the image  
            imageStream.Read(imageContent, 0, (int)imageStream.Length);  
     
            // return byte array to caller with image type  
            Response.ContentType = "image/jpeg";  
            Response.BinaryWrite(imageContent);  
        }  
     
        /// <summary> 
        /// Required, but not used  
        /// </summary> 
        /// <returns>true</returns> 
        public bool ThumbnailCallback()  
        {  
            return true;  
        }  
    } 

    ThumbNailInRadGrid.aspx
    <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="ThumbNailInRadGrid.aspx.cs" Inherits="ThumbNailInRadGrid" %> 
     
    <%@ Register Assembly="RadComboBox.Net2" Namespace="Telerik.WebControls" TagPrefix="radC" %> 
     
    <%@ Register Assembly="RadGrid.Net2" Namespace="Telerik.WebControls" TagPrefix="radG" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server">  
        <title>Untitled Page</title> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <div> 
              
           <table> 
                <tr> 
                    <td style="width: 100px">  
                        <asp:Label ID="Label1" runat="server" Text="Change the ThumbNail Size" Width="175px"></asp:Label></td>  
                    <td style="width: 100px">  
                        <radc:radcombobox id="RadComboBox1" runat="server" autopostback="True" onselectedindexchanged="RadComboBox1_SelectedIndexChanged" Skin="WindowsOlive" SkinsPath="~/RadControls/ComboBox/Skins" Width="150px"><Items> 
    <radC:RadComboBoxItem ID="RadComboBoxItem1" runat="server" Text="40" Value="40"></radC:RadComboBoxItem> 
    <radC:RadComboBoxItem ID="RadComboBoxItem2" runat="server" Text="50" Value="50"></radC:RadComboBoxItem> 
    <radC:RadComboBoxItem ID="RadComboBoxItem3" runat="server" Text="60" Value="60"></radC:RadComboBoxItem> 
    <radC:RadComboBoxItem ID="RadComboBoxItem4" runat="server" Text="70" Value="70"></radC:RadComboBoxItem> 
    <radC:RadComboBoxItem ID="RadComboBoxItem5" runat="server" Text="80" Value="80"></radC:RadComboBoxItem> 
    <radC:RadComboBoxItem ID="RadComboBoxItem6" runat="server" Text="90" Value="90"></radC:RadComboBoxItem> 
    <radC:RadComboBoxItem ID="RadComboBoxItem7" runat="server" Text="100" Value="100"></radC:RadComboBoxItem> 
    <radC:RadComboBoxItem ID="RadComboBoxItem8"  runat="server" Text="110" Value="110"></radC:RadComboBoxItem> 
    <radC:RadComboBoxItem ID="RadComboBoxItem9"  runat="server" Text="120" Value="120"></radC:RadComboBoxItem> 
    <radC:RadComboBoxItem ID="RadComboBoxItem10"  runat="server" Text="130" Value="130"></radC:RadComboBoxItem> 
    <radC:RadComboBoxItem ID="RadComboBoxItem11"  runat="server" Text="140" Value="140"></radC:RadComboBoxItem> 
     
    </Items> 
    </radc:radcombobox> 
                    </td> 
                </tr> 
            </table> 
          
          <radG:radgrid runat="server" id="RadGrid1" allowpaging="True" 
                    allowsorting="True" autogeneratecolumns="False" 
                    width="97%" datasourceid="AccessDataSource1"  Skin="Green" GridLines="None" OnItemDataBound="RadGrid1_ItemDataBound" ShowStatusBar="True" EnableAJAX="True">  
                     
                    <pagerstyle mode="NextPrevAndNumeric" /> 
                    <mastertableview width="100%" datakeynames="ImageName,Extension" DataSourceID="AccessDataSource1">  
                        <columns> 
                              
                            <radG:gridtemplatecolumn headertext="Image Name" uniquename="ImageName" sortexpression="Name">  
                                <itemtemplate> 
                                    <asp:label runat="server" id="lblImageName" text='<%# Eval("ImageName") %>' /> 
                                </itemtemplate> 
                                  
                            </radG:gridtemplatecolumn> 
                            <radG:gridtemplatecolumn headertext="Description" uniquename="Description" datafield="Description">  
                                <itemtemplate> 
                                    <asp:label id="lblDescription" runat="server" text='<%# Eval("ImageDescription") %>' /> 
                                </itemtemplate> 
                                 
                            </radG:gridtemplatecolumn> 
                            <radG:gridtemplatecolumn headertext="Image" uniquename="Thumbnail">  
                                <itemtemplate> 
                                   
                                    <asp:image ID="imgThumbnail" runat="server" />      
                                </itemtemplate> 
                                 
                            </radG:gridtemplatecolumn> 
                            
                        </columns> 
                          
                        <expandcollapsecolumn visible="False">  
                            <headerstyle width="19px" /> 
                        </expandcollapsecolumn> 
                        <rowindicatorcolumn visible="False">  
                            <headerstyle width="20px" /> 
                        </rowindicatorcolumn> 
                    </mastertableview> 
                </radG:radgrid> 
          
          
          &nbsp;  
            <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/Nwind.mdb" 
                SelectCommand="SELECT [ID], [ImageID], [ImageName], [Extension], [ImageDescription] FROM [Images]">  
            </asp:AccessDataSource> 
        </div> 
        </form> 
    </body> 
    </html> 

    ThumbNailInRadGrid.cs:
    using System;  
    using System.Data;  
    using System.Configuration;  
    using System.Web;  
    using System.Web.Security;  
    using System.Web.UI;  
    using System.Web.UI.WebControls;  
    using System.Web.UI.WebControls.WebParts;  
    using System.Web.UI.HtmlControls;  
    using Telerik.WebControls;  
     
    public partial class ThumbNailInRadGrid : System.Web.UI.Page   
    {  
        protected void Page_Load(object sender, EventArgs e)  
        {  
            //Setting the initail thumbnail size  
            if (!IsPostBack)  
                Session["ThumbNailSize"] = 100;  
        }  
        protected void RadGrid1_ItemDataBound(object sender, Telerik.WebControls.GridItemEventArgs e)  
        {  
            if (e.Item.ItemType == GridItemType.Item || e.Item.ItemType == GridItemType.AlternatingItem)  
            {  
                GridDataItem dataItem = e.Item as GridDataItem;  
                //getting the imagename and extenstion  
                string strImageName = (dataItem["ImageName"].FindControl("lblImageName") as Label).Text;  
                string strFileExtenstion = dataItem.GetDataKeyValue("Extension") as string;  
                Image imgThumbnail = dataItem["Thumbnail"].FindControl("imgThumbnail") as Image;  
                string file = "Photos" + "/" + strImageName + strFileExtenstion;  
                //setting the image url   
                imgThumbnail.ImageUrl = "MakeThumbnail.aspx?file=" + file;  
            }  
        }  
        protected void RadComboBox1_SelectedIndexChanged(object o, RadComboBoxSelectedIndexChangedEventArgs e)  
        {  
            //Storing the new thumbnail size   
            Session["ThumbNailSize"] =Convert.ToInt32 (RadComboBox1.SelectedValue);  
            //Rebinding the radgrid.  
            RadGrid1.Rebind();  
        }  
              
              
    } 

    Reply

  • Sebastian Sebastian admin's avatar

    Posted on Jul 17, 2007 (permalink)

    Hi Shinu,

    Thank you for the sample project you have uploaded in our core library section. It will be helpful for community members who would like to display thumbnail images in RadGrid template column and control their size with RadComboBox selection. We appreciate the time you dedicated on creating and sharing this demo - 2000 Telerik points were added to your account for the involvement.

    Best regards,
    Stephen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center

    Reply

Back to Top

Skip Navigation LinksHome / Community & Support / Code Library / ASP.NET AJAX > Grid > Thumbnail Generator And RadGrid