|
Rank: Member Groups: Member
Joined: 12/8/2009 Posts: 26
|
Hi There,
In the demo application under, ImageZoom/ Features/, there is a "Custom Zoom Out Panel" demo that displays a description and additional information along with the large image. Can this be acheived in the "ImageZoom with Datagrid" demo, so when I click on an image in the datagrid the large image shows with the description and additional info.
Thanks for your help.
Best Regards.
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Hi,
Yes. I believe you can. There is no real difference when using with DataGrid regarding custom zom out panel. You just copy the template over and you should be all set.
Thanks!
|
|
Rank: Member Groups: Member
Joined: 12/8/2009 Posts: 26
|
Hi There, Thanks for the reply.
Ok I have copied over the template and it shows the info but I can not get it to show different info for each row/image in the datagrid.
Can I do that?
Best Regards,
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Hi,
I am not sure how you copied it. But if you just copy the <ZoomPanelTemplate> part from "Custom Zoom Out Panel" sample into "ImageZoom with DataGrid" sample, insert the copied <ZoomPanelTemplate> block inside the <eo:ImageZoom> elements in the template column and it should work for you. The key is don't copy the whole ImageZoom control, only copy ZoomPanelTemplate part.
Thanks
|
|
Rank: Member Groups: Member
Joined: 12/8/2009 Posts: 26
|
Hi There, This is what I have. I inserted from "Zoom Panel Template"
<asp:BoundColumn DataField="Desc" HeaderText="Description"></asp:BoundColumn> <asp:TemplateColumn HeaderText="Image"> <ItemTemplate> <eo:ImageZoom runat="server" id="ImageZoom1" SmallImageUrl='<%#DataBinder.Eval(Container.DataItem, "SmallImage")%>' BigImageUrl='<%#DataBinder.Eval(Container.DataItem, "BigImage")%>' Description='<%#DataBinder.Eval(Container.DataItem, "Desc")%>' LoadingPanelID="loading"> <ZoomPanelTemplate> <table> <tr align="left"> <td align="right">Picture Taken By:</td> <td align="left">Steve Wilson</td> </tr> <tr align="left"> <td align="right">Date:</td> <td align="left">08/12/2009</td> </tr> <tr> <td colspan="2">{var:big_image}</td> </tr> </table> </ZoomPanelTemplate> <ZoomPanelStyle CssText="background-color:#ffffff;border:solid #d0d0d0 1px;padding:5px;"></ZoomPanelStyle> </eo:ImageZoom> </ItemTemplate> </asp:TemplateColumn>
As you can see the "Picture Taken By:" and "Date" will be the same for all three images.
Best Regards,
Steve.
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Hi, This is normal. You have put in "Picture Taken By: Steve Wilson" in your template. There is no reason to expect it to display anything else. The template always follows whatevever you put in first, then replaces certain segments you have marked with special syntax. In your code "{var:big_image}" is the one that's get replaced. Everything else stays. ImageZoom supports "{var:big_image}" and "{var:description}" out of box. There are several ways to extend that. The easiest way is to provide a different template for each ImageZoom control. The following code shows you how to do that:
Code: HTML/ASPX
<asp:DataGrid id="DataGrid1"
OnItemDataBound="DataGrid1_ItemDataBound" ....>
....
</asp:DataGrid>
Code: C#
protected void DataGrid1_ItemDataBound(
object sender, DataGridItemEventArgs e)
{
if ((e.Item.ItemType == ListItemType.Item) ||
(e.Item.ItemType == ListItemType.AlternatingItem))
{
//Find the ImageZoom control for this row
EO.Web.ImageZoom iz = (EO.Web.ImageZoom)e.Item.FindControl("ImageZoom1");
//The following code creates a dynamic ClientTemplate
//for this ImageZoom control.
ClientTemplate template = new ClientTemplate();
//Get your data. For example, if you have "TakenBy"
//in your DB, you can get it from here. Note the type
//of e.Item.DataItem depends on the type of your
//data source. So you may need to change DataRowRow
//to something else.
DataRowView row = (DataRowView)e.Item.DataItem;
//This code just get the big image Url because it's
//what's available in our sample data source. You will
//need to change this
string imageUrl = (string)row["BigImage"];
//Now creates the dynamic template text based on
//whatever logic you have.
template.Text = string.Format("<p>{{var:big_image}}</p><p>Url: {0}</p>", imageUrl);
//Assign the template to the ImageZoom control
iz.ZoomPanelTemplate = template;
}
}
Hope this helps. Thanks
|
|