RadGrid image column not updating when sorting

[Steve Savage]

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);
	}
	}

[Mira]

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.

[Steve Savage]

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;
    }
}

[Mira]

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.

[Steve Savage]

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

[Mira]

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.

[Alberto Pastorelli]

hi,

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

Thanks

[Sebastian]

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.

[Gustavo]

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

[Maria Ilieva]

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