This is a migrated thread and some comments may be shown as answers.

RadGrid image column not updating when sorting

9 Answers 241 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Steve Savage
Top achievements
Rank 1
Steve Savage asked on 09 Sep 2009, 10:04 AM
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?


 

<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:GridBoundColumn DataField="ImagePath" HeaderText="" ReadOnly="True" SortExpression="ImagePath">  
                </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:GridBoundColumn DataField="EmailAddress" HeaderText="Email" ReadOnly="True" SortExpression="EmailAddress" UniqueName="EmailAddress">  
                </telerik:GridBoundColumn> 
                <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("100px");  
 
        ((GridDataItem)e.Item)["ImagePath"].Controls.Add(img);  
    }  
}  




9 Answers, 1 is accepted

Sort by
0
Mira
Telerik team
answered on 10 Sep 2009, 03:31 PM
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.
0
Steve Savage
Top achievements
Rank 1
answered on 11 Sep 2009, 12:57 PM
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;  
    }  
0
Mira
Telerik team
answered on 15 Sep 2009, 12:23 PM
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.
0
Steve Savage
Top achievements
Rank 1
answered on 16 Sep 2009, 08:33 AM

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

0
Mira
Telerik team
answered on 18 Sep 2009, 02:35 PM
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.
0
Alberto Pastorelli
Top achievements
Rank 1
answered on 18 Sep 2009, 04:38 PM
hi,

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

Thanks
0
Sebastian
Telerik team
answered on 22 Sep 2009, 11:37 AM
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.
0
Gustavo
Top achievements
Rank 1
answered on 12 Nov 2014, 12:27 PM
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

0
Maria Ilieva
Telerik team
answered on 17 Nov 2014, 09:37 AM
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.

 
Tags
Grid
Asked by
Steve Savage
Top achievements
Rank 1
Answers by
Mira
Telerik team
Steve Savage
Top achievements
Rank 1
Alberto Pastorelli
Top achievements
Rank 1
Sebastian
Telerik team
Gustavo
Top achievements
Rank 1
Maria Ilieva
Telerik team
Share this question
or