Hi @csaini,
Welcome to the Ext.NET forums!
Here is one of possible solution.
Example
<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.DataView1.GetStore().DataSource = new object[]
{
new object[] { "http://ext.net", X.ResourceManager.GetIconUrl(Icon.Accept) },
new object[] { "http://forums.ext.net", X.ResourceManager.GetIconUrl(Icon.Add) },
new object[] { "http://bridge.net", X.ResourceManager.GetIconUrl(Icon.Anchor) }
};
}
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v3 Example</title>
<script>
var onImageClick = function (href) {
window.open(href);
};
</script>
<style>
.my-dataview .my-item img {
cursor: pointer;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:DataView
ID="DataView1"
runat="server"
Cls="my-dataview"
ItemSelector="div.my-item">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="href" />
<ext:ModelField Name="iconUrl" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Tpl runat="server">
<Html>
<tpl for=".">
<div class="my-item">
<img src="{iconUrl}" onclick="onImageClick('{href}');"></img>
{href}
</div>
</tpl>
</Html>
</Tpl>
</ext:DataView>
</form>
</body>
</html>
