RadGrid not showing image column when autogenerate set to true

6 posts, 0 answers
  1. Mick
    Mick avatar
    40 posts
    Member since:
    Oct 2006

    Posted 24 Aug 2010 Link to this post

    Hi everyone,

    I have been banging my head against the wall today trying to find a solution to my problem so any help is much appreciated.

    I have a radGrid that I have bound to a datatable server side and this datatable contains a column(img) of type "Image" in the back end (SQL Server 2005).  I have AutoGenerateColumns set to True as the application we are building is an interrogation tool to any database or table on our server, I therefore cannot add all of the columns manually.  Now, when the grid is displayed, the column "img" is not shown at all.

    My first question is why this is the case and is there a setting that can be changed in order for the grid to automatically display these columns?  Even if there is, we have another requirement which I am unsure how to solve?

    So, firstly we need the column adding to the grid, then if the DataRow has binary data in it we would like to display the word "BLOB" in the radGrid cell.  If the row does not have any data then the word "blob" in lower case should be displayed.  Lastly, we then need to add a click event to that cell that will fire up a new radWindow where we can display the binary data in a text field or binary editor.  (Potentially even show the image and allow them to change it?).

    I have attached the code for completeness sake,

    Look forward to hearing your responses.

    Thanks,

    M

    <telerik:RadGrid ID="gdData" runat="server" AllowSorting="True"
                AllowPaging="True" AllowCustomPaging="True" Height="550px"
                PageSize="30" GridLines="None" PagerStyle-Visible="false"
                OnNeedDataSource="gdData_NeedDataSource" AllowFilteringByColumn="True"
                AutoGenerateEditColumn="True" Skin="WebBlue">
                <MasterTableView TableLayout="Auto" CommandItemDisplay="None" CurrentResetPageIndexAction="SetPageIndexToFirst"
                    PageSize="30" EditMode="InPlace" AllowAutomaticDeletes="True"
                    AllowAutomaticInserts="True" AllowAutomaticUpdates="True">
                    <CommandItemSettings ExportToPdfText="Export to Pdf" />
                    <ItemStyle Wrap="False" />
                    <AlternatingItemStyle Wrap="False" />
                </MasterTableView>
                <ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True" Scrolling-SaveScrollPosition="true">
                    <Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="100px" EnableVirtualScrollPaging="true" />
                    <ClientEvents OnRowCreated="AddTooltips"  />
                    <Resizing AllowColumnResize="True" EnableRealTimeResize="False" />
                </ClientSettings>
                <PagerStyle Visible="False" />
            </telerik:RadGrid>

    And the code behind:
    protected void gdData_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
    {
        if (GetData)
        {
            // Find out how many records have already been shown so we can work out start position
            int startPos = gdData.CurrentPageIndex * gdData.PageSize;
     
            this.GridData = DataAccess.GetData(CurrentConStr, cbTable.SelectedValue, startPos, gdData.PageSize);
                     
            gdData.VirtualItemCount = this.GridData.recordcount;
            gdData.DataSource = this.GridData.Ds.Tables[0];
        }
    }


  2. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 30 Aug 2010 Link to this post

    Hi Mick,

    When the AutoGenerateColumns property is set to true, an GridBoundColumn object is automatically created for each field in the data source. Each field is then displayed as a column in the Telerik RadGrid control in the order that the fields appear in the data source. However the GridBoundColumn could not show binary data as an image.
    To achieve the functionality concerning having two type of texts "BLOB" and "blob" into RadGrid column, based on the data from database, you could try the following approach:
    You could add additional GridButtonColumn:
    <Columns>
       <telerik:GridButtonColumn UniqueName="Picture">
       </telerik:GridButtonColumn>
    </Columns

    On ItemDataBound event you could change the text and attach client side function on OnClientClick event of the link button. For example:
    void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem item = e.Item as GridDataItem;
            if ((item.DataItem as DataRowView).Row["Picture"] == System.DBNull.Value)
            {
                 (item["Picture"].Controls[0] as LinkButton).Text = "blob";
            }
            else
            {
                 (item["Picture"].Controls[0] as LinkButton).Text = "BLOB";
                 (item["Picture"].Controls[0] as LinkButton).OnClientClick = "openWindow('" + item["CategoryID"].Text + "'); return false;";
            }
         }
    }

    The openWindow function could open a RadWindow with loaded aspx page into it:
    <script type="text/javascript">
     function openWindow(itemID)
     {
        window.radopen("ViewImageForm.aspx?ID="+itemID, "RadWindow1");
        return false;
     }
    </script>

    Into ViewImageForm.aspx page you could have RadBinaryImage and on Page_Load event you could get the binary data from database based on the item's ID kept into the QueryString:
    protected void Page_Load(object sender, EventArgs e)
    {
            int categoryID = int.Parse(Request.QueryString["ID"].ToString());
            RadBinaryImage.DataValue = (Byte[])GetData("SELECT * FROM Categories WHERE CategoryID='" + categoryID + "'").Rows[0]["Picture"];
            RadBinaryImage.DataBind();
    }
     
    public DataTable GetData(string query)
    {
         String ConnString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
         SqlConnection conn = new SqlConnection(ConnString);
         SqlDataAdapter adapter = new SqlDataAdapter();
         adapter.SelectCommand = new SqlCommand(query, conn);
     
         DataTable myDataTable = new DataTable();
     
         conn.Open();
         try
         {
              adapter.Fill(myDataTable);
         }
         finally
         {
              conn.Close();
         }
     
         return myDataTable;
    }

    Additionally I am sending you a simple example which demonstrates the desired functionality. Please check it out and let me know if it helps you.

    All the best,
    Radoslav
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mick
    Mick avatar
    40 posts
    Member since:
    Oct 2006

    Posted 09 Sep 2010 Link to this post

    Thanks a lot for your help Radoslav, much appreciated!  I had to adapt your example so it would work in the circumstances I have here but it looks good now!!

    Cheers,

    M
  5. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 14 Sep 2010 Link to this post

    Hi Mick,

    I am glad you solved the problem. In case you experience any further problems, do not hesitate to contact us again.

    Sincerely yours,
    Radoslav
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. kachy
    kachy avatar
    89 posts
    Member since:
    Aug 2005

    Posted 07 Feb 2011 Link to this post

    Hi,

    This example shows how to open a picture stored as a blob field in a separate RadWindow, can you please help in how to show the BLOB image inside the radgrid as one of the columns using a sqldatasource.

    Thanks.

    Went through the example once again and used the RadBinaryImage to show the image inside grid. and it worked fine.

    Thanks.
  7. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 10 Feb 2011 Link to this post

    Hello Mick,

    Please check out the following examples which demonstrates binary images in RadGrid:
    http://demos.telerik.com/aspnet-ajax/controls/examples/integration/raduploadinajaxifiedgrid/defaultcs.aspx?product=grid
    http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandradasyncupload/defaultcs.aspx?product=grid

    I hope this helps.

    Kind regards,
    Radoslav
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017