Image Gallery Sample

[Troy Clemons]

in the samples of the aps.net ajax controls under listview there is an application scenario called Image Gallery.

I have been trying to reduplicate this application and i am using vb.net. i followed all the tutorials and steps, but when i compile the app i get an error that Photo is not defined

<%@ Import Namespace="Data" %>
<%@ Import Namespace="Photo" %>

Data

Imports System
Imports System.Collections.Generic
Imports System.Drawing.Imaging
Imports System.IO
Imports System.Linq
Imports System.Web
Imports System.Drawing

Namespace Data
    Public NotInheritable Class DataProvider
        Private Sub New()
        End Sub
        <ThreadStatic()> _
        Private Shared _photos As List(Of Photo)

        Public Shared Function GetData() As IList(Of Photo)
            If _photos IsNot Nothing Then
                Return _photos
            End If

            _photos = New List(Of Photo)()
            For Each files As String In Directory.GetFiles(HttpContext.Current.Server.MapPath("~/Images"))
                Dim photo = New Photo() With { _
                    .Name = Path.GetFileName(files) _
                }

                Dim image__1 As Image = Image.FromFile(files)
                Using memoryStream = New MemoryStream()
                    image__1.Save(memoryStream, ImageFormat.Png)
                    photo.Data = memoryStream.ToArray()
                End Using
                _photos.Add(photo)
            Next
            Return _photos
        End Function

        Public Shared Sub Update(ByVal photoId As Integer, ByVal name As String)
            Dim first As Photo = _photos.FirstOrDefault(Function(p) p.Id = photoId)

            If first IsNot Nothing Then
                first.Name = name
            End If
        End Sub
    End Class


End Namespace

Photo

Public Class Photo
    Private Shared ReadOnly _key As New Object()
    Private Shared _counter As Integer

    Public Sub New()
        Id = GetId()
    End Sub

    Public Property Name() As String
        Get
            Return m_Name
        End Get
        Set(ByVal value As String)
            m_Name = Value
        End Set
    End Property
    Private m_Name As String
    Public Property Data() As Byte()
        Get
            Return m_Data
        End Get
        Set(ByVal value As Byte())
            m_Data = Value
        End Set
    End Property
    Private m_Data As Byte()
    Public Property Id() As Integer
        Get
            Return m_Id
        End Get
        Private Set(ByVal value As Integer)
            m_Id = Value
        End Set
    End Property
    Private m_Id As Integer

    Protected Shared Function GetId() As Integer
        SyncLock _key
            _counter += 1
        End SyncLock
        Return _counter
    End Function
End Class

<ItemTemplate>
                    <fieldset style="float: left; margin: 5px 5px 5px 5px; padding: 2px 2px 2px 2px;
                        background: #eeeeee" class="myClass" onmouseover="containerMouseover(this)" onmouseout="containerMouseout(this)">
                        <telerik:RadBinaryImage Style="cursor: pointer;" runat="server" ID="RadBinaryImage1"
                            DataValue='<%#Eval("Data") %>' Height='<%#ImageHeight %>' Width="<%#ImageWidth %>"
                            ResizeMode="Fit" onclick="<%#CreateWindowScript(DirectCast(Container.DataItem, Photo)) %>"
                            AlternateText="Click to view larger image" ToolTip="Click to view larger image" />
                        <br />
                        <div style="margin-top: -30px; position: fixed; display: none; width: <%#ImageHeight.Value/1.5 %>px;">
                            <asp:TextBox runat="server" ID="TextBox1" Text='<%#Bind("Name") %>' CssClass="txt"
                                OnTextChanged="TextBox1_TextChanged" AutoPostBack="true" ToolTip="Edit image name" />
                        </div>
                    </fieldset>
                </ItemTemplate>

What am i missing here..

Thanks in Advanced

TClemons

[Veli]

Hi Troy,

Do you have a namespace named "Photo"? You are trying to load it. I can only see a class named Photo, not an entire namespace.

Veli
the Telerik team

[Troy Clemons]

you are correct on the namespace, that was something that i never removed from a previous attempt at this.

but this line of code in your sample on the onclick event of the radlistview

onclick="<%#CreateWindowScript(DirectCast(Container.DataItem, Photo)) %>"

Photo in this line is wht is not defined

this code was taken straight from your demo Imge Gallery Secnario using a RadListView.

[Veli]

Hello Troy,

This is a databinding expression that is evaluated when the template container is databound. In this context the Container (which is of type RadListViewDataItem) has a DataItem property data is the Photo instance the current item binds to. We use it to generate the onclick script for the image. If you are using a different data item type, you need to cast to it respectively.

Veli
the Telerik team

[Troy Clemons]

i am using exactly as your demo shows, i have changed nothing but i still return photo is not defined

[Veli]

Hello Troy,

Do you get your local copy of the demos (that come with the Telerik RadControls installation bundle) working OK? You can compare changes with it, you should have the demos in the Telerik RadControls installation folder.

Veli
the Telerik team

[Troy Clemons]

the demo works perfectly. that is what is concerning me. the only difference is framework 3.5 to 4.0

[Troy Clemons]

here is my dataprovider

Imports System
Imports System.Collections.Generic
Imports System.Drawing.Imaging
Imports System.IO
Imports System.Linq
Imports System.Web
Imports System.Drawing

Namespace Data
    Public NotInheritable Class DataProvider
        Private Sub New()
        End Sub
        <ThreadStatic()> _
        Private Shared _photos As List(Of Photo)

        Public Shared Function GetData() As IList(Of Photo)
            If _photos IsNot Nothing Then
                Return _photos
            End If

            _photos = New List(Of Photo)()
            For Each file As String In Directory.GetFiles(HttpContext.Current.Server.MapPath("~/Images"))
                Dim photo = New Photo() With { _
                    .Name = Path.GetFileName(file) _
                }

                Dim image__1 As Image = Image.FromFile(file)
                Using memoryStream = New MemoryStream()
                    image__1.Save(memoryStream, ImageFormat.Png)
                    photo.Data = memoryStream.ToArray()
                End Using
                _photos.Add(photo)
            Next
            Return _photos
        End Function

        Public Shared Sub Update(ByVal photoId As Integer, ByVal name As String)
            Dim first As Photo = _photos.FirstOrDefault(Function(p) p.Id = photoId)

            If first IsNot Nothing Then
                first.Name = name
            End If
        End Sub
    End Class

    Public Class Photo
        Private Shared ReadOnly _key As New Object()
        Private Shared _counter As Integer

        Public Sub New()
            Id = GetId()
        End Sub

        Public Property Name() As String
            Get
                Return m_Name
            End Get
            Set(ByVal value As String)
                m_Name = Value
            End Set
        End Property
        Private m_Name As String
        Public Property Data() As Byte()
            Get
                Return m_Data
            End Get
            Set(ByVal value As Byte())
                m_Data = Value
            End Set
        End Property
        Private m_Data As Byte()
        Public Property Id() As Integer
            Get
                Return m_Id
            End Get
            Private Set(ByVal value As Integer)
                m_Id = Value
            End Set
        End Property
        Private m_Id As Integer

        Protected Shared Function GetId() As Integer
            SyncLock _key
                _counter += 1
            End SyncLock
            Return _counter
        End Function
    End Class
End Namespace

here is my web page

<%@ Page Language="VB" AutoEventWireup="false" CodeBehind="Image_Gallery.aspx.vb" Inherits="Graphics_Web.Image_Gallery" %>
<%@ Import Namespace="Data" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
<style type="text/css">
        .myClass:hover
        {
            background-color: #a1da29 !important;
        }
        .txt
        {
            border: 0px !important;
            background: #eeeeee !important;
            color: Black !important;
            margin-left: 25%;
            margin-right: auto;
            width: 100%;
            filter: alpha(opacity=50); /* IE's opacity*/
            opacity: 0.50;
            text-align: center;
        }
    </style>
</head>
<body class="BODY">
    <form runat="server" id="mainForm" method="post" >
    <div>
        <asp:ScriptManager runat="server" ID="ScriptManager1" />
        <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" MinDisplayTime="200" />
        <telerik:RadFormDecorator runat="server" ID="RadFormDecorator1" DecoratedControls="All" />
        <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1">
            <telerik:RadListView runat="server" ID="RadListView1" DataSourceID="ObjectDataSource1"
                AllowPaging="true" PageSize="10" DataKeyNames="Id" OverrideDataSourceControlSorting="true">
                <LayoutTemplate>
                    <div id="list">
                        <asp:Panel runat="server" ID="Panel1" Style="float: left; margin-left: 160px" Visible="<%#Container.PageCount > 1 %>">
<asp:Button runat="server" ID="PrevButton" CommandName="Page" CommandArgument="Prev"
Text="Prev Page" Enabled="<%#Container.CurrentPageIndex > 0 %>"/>
<asp:Button runat="server" ID="NextButton" CommandName="Page" CommandArgument="Next"
Text="Next Page" Enabled="<%#Container.CurrentPageIndex < Container.PageCount - 1 %>"/>
                        </asp:Panel>
                        <div>
                            <telerik:RadSlider runat="server" ID="RadSlider1" MaximumValue="3" MinimumValue="1"
                                Value="2" LiveDrag="false" SmallChange="1" AutoPostBack="true" OnValueChanged="RadSlider1_ValueChanged"
                                Width="150px" CausesValidation="false" />
                        </div>
                        <div style="clear: both;">
                        </div>
                        <fieldset runat="server" id="itemPlaceholder" />
                        <div style="clear: both;">
                        </div>
                    </div>
                </LayoutTemplate>
                <ItemTemplate>
                    <fieldset style="float: left; margin: 5px 5px 5px 5px; padding: 2px 2px 2px 2px;
                        background: #eeeeee" class="myClass" onmouseover="containerMouseover(this)" onmouseout="containerMouseout(this)">
                        <telerik:RadBinaryImage Style="cursor: pointer;" runat="server" ID="RadBinaryImage1"
                            DataValue='<%#Eval("Data") %>' Height='<%#ImageHeight %>' Width="<%#ImageWidth %>"
                            ResizeMode="Fit" onclick="<%#CreateWindowScript(DirectCast(Container.DataItem, Photo)) %>"
                            AlternateText="Click to view larger image" ToolTip="Click to view larger image" />
                        <br />
                        <div style="margin-top: -30px; position: fixed; display: none; width: <%#ImageHeight.Value/1.5 %>px;">
                            <asp:TextBox runat="server" ID="TextBox1" Text='<%#Bind("Name") %>' CssClass="txt"
                                OnTextChanged="TextBox1_TextChanged" AutoPostBack="true" ToolTip="Edit image name" />
                        </div>
                    </fieldset>
                </ItemTemplate>
            </telerik:RadListView>
        </telerik:RadAjaxPanel>

<asp:ObjectDataSource runat="server" ID="ObjectDataSource1" SelectMethod="GetData"
TypeName="Data.DataProvider"></asp:ObjectDataSource>
        <telerik:RadWindowManager runat="server" ID="RadWindowManager1">
            <Windows>
                <telerik:RadWindow runat="server" ID="Details" VisibleStatusbar="false" NavigateUrl="windovb.aspx"
                    Width="635px" Height="530px" AutoSize="false" Behaviors="Close,Move" ShowContentDuringLoad="false"
                    Modal="true">
                </telerik:RadWindow>
            </Windows>
        </telerik:RadWindowManager>

        <script type="text/javascript">
            function containerMouseover(sender) {
                sender.getElementsByTagName("div")[0].style.display = "";
            }
            function containerMouseout(sender) {
                sender.getElementsByTagName("div")[0].style.display = "none";
            }
        </script>

    </div>
    </form>
</body>
</html>

[Veli]

Hi Troy,

You need to fully qualify the Photo type in your markup:

<telerik:RadBinaryImage Style="cursor: pointer;" runat="server" ID="RadBinaryImage1"
    DataValue='<%#Eval("Data") %>' Height='<%#ImageHeight %>' Width="<%#ImageWidth %>"
    ResizeMode="Fit" onclick="<%#CreateWindowScript(DirectCast(Container.DataItem, Data.Photo)) %>"
    AlternateText="Click to view larger image" ToolTip="Click to view larger image" />

Attaching a sample application, showing the images OK.

Veli
the Telerik team

[Adam]

I use demo on Telerik URL:
http://demos.telerik.com/aspnet-ajax/controls/examples/integration/listviewsliderwindowrotator/defaultcs.aspx?product=listview

I have 6 images files (extension .JPG) in Images folder.

the images are not populated to the RadListView on Default.aspx and windowcs.aspx.

Here my codes on Default.aspx:

<%

 

@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<%

 

@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

 

<%

 

@ Import Namespace="Data" %>

 

<

 

 

asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">

 

 

 

<style type="text/css">

 

 

 

.myClass:hover

 

{

 

 

background-color: #a1da29 !important;

 

}

 

 

.txt

 

{

 

 

border: 0px !important;

 

 

 

background: #eeeeee !important;

 

 

 

color: Black !important;

 

 

 

margin-left: 25%;

 

 

 

margin-right: auto;

 

 

 

width: 100%;

 

 

 

filter: alpha(opacity=50); /* IE's opacity*/

 

 

 

/* opacity: 0.50; */

 

 

 

text-align: center;

 

}

 

 

</style>

 

</

 

 

asp:Content>

 

<

 

 

asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">

 

 

 

<div>

 

 

 

<asp:ScriptManager runat="server" ID="ScriptManager1" />

 

 

 

<telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" MinDisplayTime="200" />

 

 

 

<telerik:RadFormDecorator runat="server" ID="RadFormDecorator1" DecoratedControls="All" />

 

 

 

 

<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1">

 

 

 

<telerik:RadListView runat="server" ID="RadListView1" DataSourceID="ObjectDataSource1"

 

 

 

AllowPaging="True" DataKeyNames="Id"

 

 

 

OverrideDataSourceControlSorting="True">

 

 

 

<LayoutTemplate>

 

 

 

<div id="list">

 

 

 

<asp:Panel runat="server" ID="Panel1" Style="float: left; margin-left: 160px" Visible="<%#Container.PageCount > 1 %>">

 

 

 

<asp:Button runat="server" ID="PrevButton" CommandName="Page" CommandArgument="Prev"

 

 

 

Text="Prev Page" Enabled="<%#Container.CurrentPageIndex > 0 %>" />

 

 

 

<asp:Button runat="server" ID="NextButton" CommandName="Page" CommandArgument="Next"

 

 

 

Text="Next Page" Enabled="<%#Container.CurrentPageIndex < Container.PageCount - 1 %>" />

 

 

 

</asp:Panel>

 

 

 

<div>

 

 

 

<telerik:RadSlider runat="server" ID="RadSlider1" MaximumValue="3" MinimumValue="1"

 

 

 

Value="2" LiveDrag="false" SmallChange="1" AutoPostBack="true" OnValueChanged="RadSlider1_ValueChanged"

 

 

 

Width="150px" CausesValidation="false" />

 

 

 

</div>

 

 

 

<div style="clear: both;">

 

 

 

</div>

 

 

 

<fieldset runat="server" id="itemPlaceholder" />

 

 

 

<div style="clear: both;">

 

 

 

</div>

 

 

 

</div>

 

 

 

</LayoutTemplate>

 

 

 

<ItemTemplate>

 

 

 

<fieldset style="float: left; margin: 5px 5px 5px 5px; padding: 2px 2px 2px 2px;

 

 

 

 

position: relative; background: #eeeeee" class="myClass" onmouseover="containerMouseover(this)"

 

 

 

onmouseout="containerMouseout(this)">

 

　

　

 

 

<telerik:RadBinaryImage ID="RadBinaryImage1" Style="cursor: pointer; display:block;" runat="server"

 

 

 

DataValue='<%#Eval("Data") %>' Height='<%#ImageHeight %>' Width="<%#ImageWidth %>"

 

 

 

ResizeMode="Fit" onclick="<%#CreateWindowScript((Photo)Container.DataItem) %>"

 

 

 

AlternateText="Click to view larger image" ToolTip="Click to view larger image" />

 

　

 

　

 

 

<div style="margin-top: -30px; position: absolute; display: none; width: <%#ImageHeight.Value/1.5 %>px;">

 

 

 

<asp:TextBox runat="server" ID="TextBox1" Text='<%#Bind("Name") %>' CssClass="txt"

 

 

 

OnTextChanged="TextBox1_TextChanged" AutoPostBack="true" ToolTip="Edit image name" />

 

 

 

</div>

 

 

 

</fieldset>

 

 

 

</ItemTemplate>

 

 

 

</telerik:RadListView>

 

 

 

</telerik:RadAjaxPanel>

 

 

 

 

<asp:ObjectDataSource runat="server" ID="ObjectDataSource1" SelectMethod="GetData"

 

 

 

TypeName="Data.DataProvider"></asp:ObjectDataSource>

 

 

 

<telerik:RadWindowManager runat="server" ID="RadWindowManager1">

 

 

 

<Windows>

 

 

 

<telerik:RadWindow runat="server" ID="Details" VisibleStatusbar="false" NavigateUrl="windowcs.aspx"

 

 

 

Width="645px" Height="530px" AutoSize="false" Behaviors="Close,Move" ShowContentDuringLoad="false"

 

 

 

Modal="true">

 

 

 

</telerik:RadWindow>

 

 

 

</Windows>

 

 

 

</telerik:RadWindowManager>

 

 

 

<script type="text/javascript">

 

 

 

function containerMouseover(sender) {

 

sender.getElementsByTagName(

 

"div")[0].style.display = "";

 

}

 

 

function containerMouseout(sender) {

 

sender.getElementsByTagName(

 

"div")[0].style.display = "none";

 

}

 

 

</script>

 

 

 

</div>

 

　

</

 

 

asp:Content>

 

====================
code of windowcs.aspx:

<%

 

@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="windowcs.aspx.cs" Inherits="windowcs" %>

 

<%

 

@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

 

<

 

 

asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">

 

</

 

 

asp:Content>

 

<

 

 

asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">

 

 

 

 

<div>

 

 

 

<asp:ScriptManager ID="ScriptManager1" runat="server" />

 

 

 

<telerik:RadFormDecorator runat="server" ID="RadFormDecorator1" Skin="Black" DecoratedControls="All" />

 

 

 

<telerik:RadRotator runat="server" ID="RadRotator1" DataSourceID="ObjectDataSource1"

 

 

 

Skin="Black" RotatorType="ButtonsOver" Width="600px" Height="450px" ScrollDirection="Right,Left "

 

 

 

SlideShowAnimation-Type="Fade">

 

 

 

<ItemTemplate>

 

<%

 

#SetInitialIndex(Container) %>

 

 

 

<telerik:RadBinaryImage runat="server" ID="RadBinaryImage1" ResizeMode="Fit" Width="600px"

 

 

 

Height="600px" DataValue='<%#Eval("Data") %>'/>

 

 

 

</ItemTemplate>

 

 

 

</telerik:RadRotator>

 

<

 

 

asp:ObjectDataSource runat="server" ID="ObjectDataSource1" SelectMethod="GetData"

 

TypeName

 

 

="Data.DataProvider"></asp:ObjectDataSource>

 

 

 

</div>

 

</

 

 

asp:Content>

 

=====================================
code of DataProvider.cs

using

 

 

System;

 

using

 

 

System.Collections.Generic;

 

using

 

 

System.Drawing.Imaging;

 

using

 

 

System.IO;

 

using

 

 

System.Linq;

 

using

 

 

System.Web;

 

using

 

 

System.Drawing;

 

namespace

 

 

Data

 

{

 

 

public static class DataProvider

 

{

[

 

ThreadStatic]

 

 

 

private static List<Photo> _photos;

 

 

 

public static IList<Photo> GetData()

 

{

 

 

if (_photos != null)

 

{

 

 

return _photos;

 

}

_photos =

 

new List<Photo>();

 

 

 

foreach (var file in Directory.GetFiles(HttpContext.Current.Server.MapPath("~/Images")))

 

{

 

 

var photo = new Photo { Name = Path.GetFileName(file) };

 

 

 

Image image = Image.FromFile(file);

 

 

 

using (var memoryStream = new MemoryStream())

 

{

image.Save(memoryStream,

 

ImageFormat.Png);

 

photo.Data = memoryStream.ToArray();

}

_photos.Add(photo);

}

 

 

return _photos;

 

}

 

 

public static void Update(int photoId, string name)

 

{

 

 

Photo first;

 

 

 

if (_photos == null)

 

{

first = GetData().FirstOrDefault(p => p.Id == photoId); ;

}

first = _photos.FirstOrDefault(p => p.Id == photoId);

 

 

if (first != null)

 

{

first.Name = name;

}

}

}

 

 

public class Photo

 

{

 

 

private static readonly object _key = new object();

 

[

 

ThreadStatic]

 

 

 

private static int _counter;

 

 

 

public Photo()

 

{

Id = GetId();

}

 

 

public string Name { get; set; }

 

 

 

public byte[] Data { get; set; }

 

 

 

public int Id { get; private set; }

 

 

 

protected static int GetId()

 

{

 

 

lock (_key)

 

{

_counter++;

}

 

 

return _counter;

 

}

}

}

[Maria Ilieva]

Hi Adam,

I reviewed your code and was not able to isolate anything obvious which may cause the issue you are facing. The image binding mechanism looks totally correct. Could you please open a regular support ticket and send us runnable version of your application so we could debug it locally and do our best to isolate the root cause of the problem.

All the best,
Maria Ilieva
the Telerik team