RadGrid image column not updating when sorting

10 posts, 0 answers
  1. Steve Savage
    Steve Savage avatar
    4 posts
    Member since:
    Sep 2009

    Posted 09 Sep 2009 Link to this post

    Hi,

    I am using the RadGrid and am inserting an image into a GridBoundColumn using the ItemDataBound event, this all works fine. However when I click on a column to sort all the text columns are sorted correctly but the images do not move.

    Am I missing something?


     

    1 <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" AllowSorting="true" AutoGenerateColumns="False" CssClass="RadGrid" GridLines="None" GroupingEnabled="False" HorizontalAlign="NotSet" OnItemDataBound="RadGrid1_ItemDataBound" OnNeedDataSource="RadGrid1_NeedDataSource" PageSize="20" ShowStatusBar="True" Skin="Office2007">  
    2         <HeaderStyle CssClass="RadGridHeader" /> 
    3         <PagerStyle Mode="NextPrevAndNumeric" /> 
    4         <MasterTableView CommandItemDisplay="None" GridLines="None" AllowMultiColumnSorting="True">  
    5             <Columns> 
    6                 <telerik:GridBoundColumn DataField="ImagePath" HeaderText="" ReadOnly="True" SortExpression="ImagePath">  
    7                 </telerik:GridBoundColumn> 
    8                 <telerik:GridHyperLinkColumn DataNavigateUrlFields="InterviewerID" DataNavigateUrlFormatString="InterviewerAdministration.aspx?id={0}" DataTextField="FullName" HeaderText="Name" SortExpression="FullName" UniqueName="FullName">  
    9                 </telerik:GridHyperLinkColumn> 
    10                 <telerik:GridBoundColumn DataField="InterviewerRegionName" HeaderText="Region" ReadOnly="True" SortExpression="InterviewerRegionName" UniqueName="InterviewerRegionName">  
    11                 </telerik:GridBoundColumn> 
    12                 <telerik:GridBoundColumn DataField="PostCode" HeaderText="Post Code" ReadOnly="True" SortExpression="PostCode" UniqueName="PostCode">  
    13                 </telerik:GridBoundColumn> 
    14                 <telerik:GridBoundColumn DataField="RoleType" HeaderText="Primary Role" ReadOnly="True" SortExpression="RoleType" UniqueName="RoleType">  
    15                 </telerik:GridBoundColumn> 
    16                 <telerik:GridBoundColumn DataField="HomeTelephoneNumber" HeaderText="Telephone Number" ReadOnly="True" SortExpression="HomeTelephoneNumber" UniqueName="HomeTelephoneNumber">  
    17                 </telerik:GridBoundColumn> 
    18                 <telerik:GridBoundColumn DataField="EmailAddress" HeaderText="Email" ReadOnly="True" SortExpression="EmailAddress" UniqueName="EmailAddress">  
    19                 </telerik:GridBoundColumn> 
    20                 <telerik:GridBoundColumn DataField="AlertType" HeaderText="Alert Type" ReadOnly="True" SortExpression="AlertType" UniqueName="AlertType">  
    21                 </telerik:GridBoundColumn> 
    22             </Columns> 
    23         </MasterTableView> 
    24     </telerik:RadGrid> 

    1 protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)  
    2 {  
    3     if (e.Item is GridDataItem)  
    4     {  
    5         string sPath = ConfigurationManager.AppSettings["ImagePath"];  
    6         string sImageName = "NoImageSelected.GIF";  
    7         string sToolTip = "No image available";  
    8  
    9         DataRowView view = (DataRowView)e.Item.DataItem;  
    10  
    11         if (view.DataView[e.Item.ItemIndex]["ImagePath"] != DBNull.Value)  
    12         {  
    13             sImageName = (string)view.DataView[e.Item.ItemIndex]["ImagePath"];  
    14             sToolTip = (string)view.DataView[e.Item.ItemIndex]["FullName"];  
    15         }  
    16  
    17         Image img = new Image();  
    18         img.ImageUrl = string.Concat(sPath, sImageName);  
    19         img.ToolTip = sToolTip;  
    20         img.Height = new Unit("100px");  
    21  
    22         ((GridDataItem)e.Item)["ImagePath"].Controls.Add(img);  
    23     }  
    24 }  




  2. Mira
    Admin
    Mira avatar
    1124 posts

    Posted 10 Sep 2009 Link to this post

    Hi Steve,

    For your scenario I recommend using a GridTemplateColumn with an asp:Image in its ItemTemplate.
    You may find the following links useful:
    Getting Started (in the last paragraph is explained how to bind template columns)
    Sorting for GridHyperLinkColumn/GridTemplateColumn

    Greetings,
    Mira
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Steve Savage
    Steve Savage avatar
    4 posts
    Member since:
    Sep 2009

    Posted 11 Sep 2009 Link to this post

    Hi Mira,

    Thank you for your reply.

    I have tried using the template column without success, but I did it again in case I missed something but it is not working, see the code below.

    It is very strange as the itemdatabound event is being called and everything is sorted correctly except the images.

    Regards
    Steve

    <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" AllowSorting="true" AutoGenerateColumns="False" CssClass="RadGrid" GridLines="None" GroupingEnabled="False" HorizontalAlign="NotSet" OnItemDataBound="RadGrid1_ItemDataBound" OnNeedDataSource="RadGrid1_NeedDataSource" PageSize="20" ShowStatusBar="True" Skin="Office2007">  
        <HeaderStyle CssClass="RadGridHeader" /> 
        <PagerStyle Mode="NextPrevAndNumeric" /> 
        <MasterTableView CommandItemDisplay="None" GridLines="None" AllowMultiColumnSorting="True">  
            <Columns> 
                <telerik:GridTemplateColumn> 
                    <ItemTemplate> 
                        <asp:Image ID="imgMugShot" runat="server" /> 
                    </ItemTemplate> 
                </telerik:GridTemplateColumn> 
                <telerik:GridBoundColumn DataField="ImagePath" HeaderText="Image" ReadOnly="True" SortExpression="ImagePath">  
                </telerik:GridBoundColumn> 
                <telerik:GridBoundColumn DataField="InterviewerID" DataFormatString="{0:D5}" HeaderText="Number" ReadOnly="True" SortExpression="InterviewerID" UniqueName="InterviewerID">  
                </telerik:GridBoundColumn> 
                <telerik:GridHyperLinkColumn DataNavigateUrlFields="InterviewerID" DataNavigateUrlFormatString="InterviewerAdministration.aspx?id={0}" DataTextField="FullName" HeaderText="Name" SortExpression="FullName" UniqueName="FullName">  
                </telerik:GridHyperLinkColumn> 
                <telerik:GridBoundColumn DataField="InterviewerRegionName" HeaderText="Region" ReadOnly="True" SortExpression="InterviewerRegionName" UniqueName="InterviewerRegionName">  
                </telerik:GridBoundColumn> 
                <telerik:GridBoundColumn DataField="PostCode" HeaderText="Post Code" ReadOnly="True" SortExpression="PostCode" UniqueName="PostCode">  
                </telerik:GridBoundColumn> 
                <telerik:GridBoundColumn DataField="RoleType" HeaderText="Primary Role" ReadOnly="True" SortExpression="RoleType" UniqueName="RoleType">  
                </telerik:GridBoundColumn> 
                <telerik:GridBoundColumn DataField="HomeTelephoneNumber" HeaderText="Telephone Number" ReadOnly="True" SortExpression="HomeTelephoneNumber" UniqueName="HomeTelephoneNumber">  
                </telerik:GridBoundColumn> 
                <telerik:GridHyperLinkColumn DataNavigateUrlFields="EmailAddress" DataNavigateUrlFormatString="MailTo:{0}" DataTextField="EmailAddress" HeaderText="Email" SortExpression="EmailAddress" UniqueName="EmailAddress">  
                </telerik:GridHyperLinkColumn> 
                <telerik:GridBoundColumn DataField="AlertType" HeaderText="Alert Type" ReadOnly="True" SortExpression="AlertType" UniqueName="AlertType">  
                </telerik:GridBoundColumn> 
            </Columns> 
        </MasterTableView> 
    </telerik:RadGrid> 

    protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)  
    {  
        if (e.Item is GridDataItem)  
        {  
            string sPath = ConfigurationManager.AppSettings["ImagePath"];  
            string sImageName = "NoImageSelected.GIF";  
            string sToolTip = "No image available";  
     
            DataRowView view = (DataRowView)e.Item.DataItem;  
     
            if (view.DataView[e.Item.ItemIndex]["ImagePath"] != DBNull.Value)  
            {  
                sImageName = (string)view.DataView[e.Item.ItemIndex]["ImagePath"];  
                sToolTip = (string)view.DataView[e.Item.ItemIndex]["FullName"];  
            }  
              
            Image img = new Image();  
            img.ImageUrl = string.Concat(sPath, sImageName);  
            img.ToolTip = sToolTip;  
            img.Height = new Unit("50px");  
     
            ((GridDataItem)e.Item)["ImagePath"].Controls.Add(img);  
     
            img = (Image)((GridDataItem)e.Item).FindControl("imgMugShot");  
     
            img.ImageUrl = string.Concat(sPath, sImageName);  
            img.ToolTip = sToolTip;  
            img.Height = new Unit("50px");  
     
            if ((string)view.DataView[e.Item.ItemIndex]["Status"] != "Active")  
                ((GridDataItem)e.Item).BackColor = System.Drawing.Color.WhiteSmoke;  
        }  
  5. Mira
    Admin
    Mira avatar
    1124 posts

    Posted 15 Sep 2009 Link to this post

    Hello Steve,

    I am attaching a sample project using GridImageColumn with sorting working fine. Please take a look at it and try the approach shown there.

    Regards,
    Mira
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  6. Steve Savage
    Steve Savage avatar
    4 posts
    Member since:
    Sep 2009

    Posted 16 Sep 2009 Link to this post

    Hi Mira,

    Thanks again.

    I looked at the zip file but unfortunately could see no Image Column in the example you provided. I am not sure if I am missing something.

    I have looked at the Telerik example site and seen the image column in action and it does work with the sorting however that doesn't really suit our purpose as there needs to be some logic involved in selecting the image which is why we need to use the item databound event. For example we have an alert column and depending on the type of alert determines the type of image(s) to display so we can't hard code it at design time.

    I have tried adding an image control to a GridBoundColumn column and a template column with an image control in it, neither of which I have got to work. Is there a way of assigning the image url to an image column in the databound event?

    Regards
    Steve

  7. Mira
    Admin
    Mira avatar
    1124 posts

    Posted 18 Sep 2009 Link to this post

    Hi Steve,

    Please excuse me for attaching a wrong project to my previous post.

    To this post I am attaching 2 projects - the first is using GridImageColumn in which the Url of the image is set declarative and in the second there is a GridTemplateColumn with an Image in its ItemTemplate and the ImageUrl is set in the ItemDataBound event  handler. In both of them sorting is working fine.

    Please take a look at them and tell me what are the differences in your scenario.

    Kind regards,
    Mira
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  8. Alberto Pastorelli
    Alberto Pastorelli avatar
    5 posts
    Member since:
    Jul 2012

    Posted 18 Sep 2009 Link to this post

    hi,

    you are using ItemDataBound event with GridTemplateColumn.
    What about using GridImageColumn?
    How can I catch GridImageColumn and change its ImageUrl?

    Thanks
  9. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 22 Sep 2009 Link to this post

    Hello Alberto,

    You can reference the cell from the GridImageColumn in which the image resides using its column unique name and then get the first control in it (Controls[0]) which should be the actual asp Image.  Thus inside the ItemCreated or ItemDataBound server handler of the grid you can change the image url of a certain image programmatically (like this is done previously with the image from the template column).

    Best regards,
    Sebastian
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  10. Gustavo
    Gustavo avatar
    23 posts
    Member since:
    Apr 2012

    Posted 12 Nov 2014 Link to this post

    Hi,

    I'm facing the same problem to sort columns with images, but I can't use GridImageColumn because I have an EditItemTemplate with a RadColorPicker inside.

    Any sugest?

    Thanks

  11. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 17 Nov 2014 Link to this post

    Hello Gustavo,

    Please review the answer posted on Sep 18, 2009 by my colleague Mira Bivas. The post provides an application with template columns also.

    Test it on your end and see if it covers your requirements.

    Regards,
    Maria Ilieva
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017