Image in itemtemplate

[arnaud]

Hi,

I have an ajaxified RadGrid with a single GridImageColumn.

<telerik:RadGrid ID="RadGrid1" runat="server" Skin="Black" AllowPaging="true" PageSize="20"
            AutoGenerateColumns="False" AllowSorting="True" AllowFilteringByColumn="True">
            <ClientSettings EnableRowHoverStyle="true">
                <ClientEvents OnRowDblClick="RowDblClick" />
            </ClientSettings>
            <MasterTableView CommandItemDisplay="Top" DataKeyNames="id_film" CommandItemSettings-AddNewRecordText="Ajoutez un film"
                NoMasterRecordsText="Aucun résultat" AllowMultiColumnSorting="true">
                <Columns>
                    <telerik:GridImageColumn DataType="System.String" DataImageUrlFields="id_film" DataImageUrlFormatString="Affiches/{0}_Mini.jpg"
                        DataAlternateTextField="titre" ImageAlign="Middle" ImageHeight="100" ImageWidth="75"
                        AllowSorting="false" AllowFiltering="false" UniqueName="affiche" />
                </Columns>
                <EditFormSettings EditFormType="Template">
                    <FormTemplate>
                        <asp:Button ID="Button1" Text='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "Enregistrer", "Modifier") %>'
                            runat="server" CommandName='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "PerformInsert", "Update")%>'>
                        </asp:Button>
                    </FormTemplate>
                </EditFormSettings>
            </MasterTableView>
        </telerik:RadGrid>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

When updating a item, I overwrite the image (the image url stay the same).

 Protected Sub RadGrid1_ItemCommand(ByVal source As Object, ByVal e As GridCommandEventArgs) Handles RadGrid1.ItemCommand

        If (e.CommandName = RadGrid.UpdateCommandName) Then


            'Upload Affiche
            Dim myRequest As HttpWebRequest
            Dim myResponse As HttpWebResponse
            Dim s As System.IO.Stream
            Dim graphicTemp As System.Drawing.Graphics
            Dim ImageSource As System.Drawing.Image
            Dim affiche_url = "http://thenewimage"
            myRequest = WebRequest.Create(affiche_url)
            myResponse = myRequest.GetResponse()
            s = myResponse.GetResponseStream()
            ImageSource = System.Drawing.Image.FromStream(s)
            graphicTemp = System.Drawing.Graphics.FromImage(ImageSource)
            graphicTemp.CompositingMode = System.Drawing.Drawing2D.CompositingMode.SourceOver
            graphicTemp.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality
            graphicTemp.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality
            graphicTemp.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic
            graphicTemp.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.HighQuality
            graphicTemp.DrawImage(ImageSource, 0, 0, ImageSource.Size.Width, ImageSource.Size.Height)
            graphicTemp.Dispose()
            ImageSource.Save(Server.MapPath("~/Media/Affiches/" & e.Item.OwnerTableView.DataKeyValues(e.Item.ItemIndex)("id_film") & "_Normal.jpg"), System.Drawing.Imaging.ImageFormat.Jpeg)
            ImageSource.Dispose()
            s.Close()
            myResponse.Close()


        End If
    End Sub

The problem is the following :
When the Grid is rebind after the update, the image has not been refreshed within the grid, its still the old one. I have to refresh the page (F5) to make the changes visible.

Any ideas ?

- My grid is bind using needdatasource
- I tried to replace the imagecolumn by a templatecolumn -> same problem
- I tried to set the imageurl inthe itemdatabound event of the grid -> same problem

Thank You
Arnaud Boiselle

[Princy]

Hi,

Try explicitly rebinding the grid  by callling RadGrid1.Rebind() after performing the update operation.
Let me know if this was helpful.

Thanks,
Princy

[arnaud]

Hi Princy,

I already tried this solution and it doesn't work.

If I try to add another templatecolumn with a label for example, the label is refreshed without problem. The problem really seems to come from the image control.

Thank you

[Radoslav]

Hello Arnaud,

You could use a GridTemplateColumn to achieve the desired scenario:

<telerik:GridTemplateColumn UniqueName="id_film" DataField="id_film" HeaderText="Images">
  <ItemTemplate>
     <asp:HiddenField ID="hidden" Value='<%# Eval("id_film") %>' runat="server" />
   </ItemTemplate>
</telerik:GridTemplateColumn>

In RadGrid.ItemDataBound event handler you could add dynamically the image control into the GridTemplateColumn's controls collection:

Protected Sub RadGrid1_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles RadGrid1.ItemDataBound
        If TypeOf e.Item Is GridDataItem Then
            Dim item As GridDataItem = DirectCast(e.Item, GridDataItem)
            Dim img As New Image()
            img.ID = "Image1"
            Dim Id As String = CType(item("id_film").FindControl("hidden"), HiddenField).Value
            img.ImageUrl = "~/Images/" + Id + ".png"
            item("id_film").Controls.Add(img)
        End If
    End Sub

Additionally I am sending you a simple example that illustrates how to achieve the desired functionality. I hope this helps.

Best wishes,
Radoslav
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[arnaud]

Radosla,

Your solution does not change anything. As I said in my post I did try to use your proposal.

Taking your solution : If I overwritte the image in the update ItemCommand event (as shown in my first post), the image will not be refreshed in the grid -> the old one will appear until you refresh the page manually.

Regards,
Arnaud Boiselle

[Radoslav]

Hello Arnaud,

Could you please try to change the name of the new image, when you save it into the RadGrid1_ItemCommand event handler as below?

If (e.CommandName = RadGrid.UpdateCommandName) Then
            'Upload Affiche
            Dim myRequest As HttpWebRequest
            Dim myResponse As HttpWebResponse
            Dim s As System.IO.Stream
            Dim graphicTemp As System.Drawing.Graphics
            Dim ImageSource As System.Drawing.Image
            Dim affiche_url = "http://thenewimage"
            myRequest = WebRequest.Create(affiche_url)
            myResponse = myRequest.GetResponse()
            s = myResponse.GetResponseStream()
            ImageSource = System.Drawing.Image.FromStream(s)
            graphicTemp = System.Drawing.Graphics.FromImage(ImageSource)
            graphicTemp.CompositingMode = System.Drawing.Drawing2D.CompositingMode.SourceOver
            graphicTemp.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality
            graphicTemp.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality
            graphicTemp.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic
            graphicTemp.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.HighQuality
            graphicTemp.DrawImage(ImageSource, 0, 0, ImageSource.Size.Width, ImageSource.Size.Height)
            graphicTemp.Dispose()
            ImageSource.Save(Server.MapPath("~/Media/Affiches/"
& e.Item.OwnerTableView.DataKeyValues(e.Item.ItemIndex)("id_film")
& Date.Now &"_Normal.jpg"), System.Drawing.Imaging.ImageFormat.Jpeg)
            ImageSource.Dispose()
            s.Close()
            myResponse.Close()

        End If

I assume that the browsers have cached the images, so when you save the new generated image with the name of the old image and the browsers make request, they "find" that image with the same name is already cashed and they load cashed image not the new one.
        
If changing the name of the new generated image does not help, in order to progress in the resolution of this matter I will ask you to send us a simple runnable application demonstrating the problem. You could open a formal support ticket from your Telerik account and attach a ZIP file there. In that way we can reproduce and pinpoint the problems you're facing on our side, understand the logic of your application and provide a solution.

Kind regards,
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.

[arnaud]

Thanks Radoslav , it was due to the the browsers cache indeed.