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

Image in itemtemplate

6 Answers 76 Views
Grid
This is a migrated thread and some comments may be shown as answers.
arnaud
Top achievements
Rank 1
arnaud asked on 08 Feb 2010, 01:05 AM
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


6 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 1
answered on 08 Feb 2010, 08:07 AM
Hi,

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

Thanks,
Princy
0
arnaud
Top achievements
Rank 1
answered on 08 Feb 2010, 08:53 AM
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
0
Radoslav
Telerik team
answered on 11 Feb 2010, 08:09 AM
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.
0
arnaud
Top achievements
Rank 1
answered on 14 Feb 2010, 05:35 PM
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
0
Accepted
Radoslav
Telerik team
answered on 17 Feb 2010, 03:22 PM
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.
0
arnaud
Top achievements
Rank 1
answered on 09 Mar 2010, 01:53 PM
Thanks Radoslav , it was due to the the browsers cache indeed.
Tags
Grid
Asked by
arnaud
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
arnaud
Top achievements
Rank 1
Radoslav
Telerik team
Share this question
or