ASPxDataViewBase.CustomJSProperties Event
Enables you to supply any server data that can then be parsed on the client.
Namespace: DevExpress.Web
Assembly: DevExpress.Web.v24.1.dll
NuGet Package: DevExpress.Web
Declaration
Event Data
The CustomJSProperties event's data class is CustomJSPropertiesEventArgs. The following properties provide information specific to this event:
| Property | Description |
|---|---|
| Properties | Gets a collection of temporary client properties. |
Remarks
In some instances, it is necessary to obtain server information on the client. The CustomJSProperties event enables you to declare temporary client properties. Once declared, a property can be accessed on the client.
To add new properties, use the event parameter’s CustomJSPropertiesEventArgs.Properties property, which represents a collection of property names and their values. The only requirement is that property names must begin with the ‘cp’ prefix, to avoid rewriting the ASPxDataViewBase‘s base properties.
Note
Typically, using a specifically introduced ASPxDataViewBase.JSProperties property might be more convenient and efficient than handling the CustomJSProperties event, which is mostly declared for backward compatibility.
Concept
How to Access Server Data on the Client Side
Example
This example demonstrates how to implement a kind of an image gallery with an image preview.Image thumbnails are displayed by ASPxDataView that is used in Flow layout mode. In this mode, image thumbnails flow one after another, to fill the available page area within the browser window in the best possible way. When hovering a thumbnail, ASPxPopupControl is invoked to display a large (zoomed) image. During zoomed image loading, ASPxPopupControl displays a thumbnail image enlarged to the zoomed image size.The specificity of this example is that image previews are displayed with the help of a single ASPxPopupControl that is dynamically linked to multiple invoker elements via client code. The client SetPopupElementID method is used to associate ASPxPopupControl with multiple instances of a thumbnail image element placed within ASPxDataView's ItemTemplate.From this example, you can also learn how to dynamically generate two images - thumbnail and preview - from an original image and how to apply a watermark to a large preview image.
<head runat="server">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function galleryDV_Init(s,e) {
InitializePopupElements();
}
function galleryDV_EndCallBack() {
InitializePopupElements();
}
function popup_Popup(s, e) {
var popupElement = s.GetCurrentPopupElement();
var itemDetail = galleryDV.cpItemDetails[popupElement.id];
var lowQualityImage = document.getElementById("lowQualityImage");
var description = document.getElementById("description");
var highQualityImageWrapper = document.getElementById("highQualityImageWrapper");
var highQualityImage = document.createElement("IMG");
highQualityImageWrapper.innerHTML = "";
highQualityImageWrapper.appendChild(highQualityImage);
highQualityImageWrapper.style.marginTop = "-" + itemDetail.imageHeight + "px";
highQualityImageWrapper.style.width = itemDetail.imageWidth + "px";
highQualityImageWrapper.style.height = itemDetail.imageHeight + "px";
lowQualityImage.src = popupElement.src;
lowQualityImage.width = itemDetail.imageWidth;
lowQualityImage.height = itemDetail.imageHeight;
lowQualityImage.alt = itemDetail.description;
highQualityImage.src = itemDetail.highQualityImageUrl;
highQualityImage.alt = itemDetail.description;
description.innerHTML = itemDetail.description;
s.UpdatePosition();
}
function InitializePopupElements() {
var imageIDs = [ ];
for(var id in galleryDV.cpItemDetails)
imageIDs.push(id)
popup.SetPopupElementID(imageIDs.join(";"));
}
</script>
</head>
<body>
<form id="form1" runat="server">
<p>To zoom a thumbnail image, move the mouse cursor over it.</p>
<div class="panel">
<dx:ASPxDataView ID="galleryDV" ClientInstanceName="galleryDV" runat="server"
EnableViewState="false" DataSourceID="XmlHomes"
OnCustomJSProperties="galleryDV_CustomJSProperties" Layout="Flow" PagerAlign="Justify"
ItemSpacing="0" ColumnCount="10" RowPerPage="2">
<ItemTemplate>
<div align="center" class="imageWrapper">
<a href="javascript:;">
<img id='<%# GetImageID(Eval("ID"))%>' src='<%# Eval("ImageUrl")%>' alt='<%# Eval("Description") %>' class="thumbnailImage" />
</a>
</div>
</ItemTemplate>
<PagerSettings ShowNumericButtons="true">
<AllButton Visible="False" />
<Summary Visible="false" />
<PageSizeItemSettings Visible="true" ShowAllItem="true"
Items="10, 20, 30, 60" />
</PagerSettings>
<ClientSideEvents Init="galleryDV_Init" EndCallback="galleryDV_EndCallBack" />
</dx:ASPxDataView>
</div>
<dx:ASPxPopupControl ID="popup" ClientInstanceName="popup" runat="server" EnableViewState="false" ShowHeader="false"
EnableAnimation="false" PopupHorizontalAlign="OutsideRight" PopupVerticalAlign="TopSides"
PopupAction="MouseOver" CloseAction="MouseOut" AppearAfter="0" DisappearAfter="0"
PopupHorizontalOffset="18" PopupVerticalOffset="-60">
<ContentCollection>
<dx:PopupControlContentControl>
<img id="lowQualityImage" src="" alt="" />
<div id="highQualityImageWrapper"></div>
<p id="description"></p>
</dx:PopupControlContentControl>
</ContentCollection>
<ClientSideEvents PopUp="popup_Popup" />
</dx:ASPxPopupControl>
<asp:XmlDataSource ID="XmlHomes" runat="server" DataFile="~/App_Data/Gallery.xml"
XPath="//dsImages/Image"></asp:XmlDataSource>
</form>
</body>
using System.Collections.Generic;
using System.Web.UI;
using System.Web.UI.WebControls;
using DevExpress.Web;
using DevExpress.Web.ASPxDataView;
public partial class Examples_Default2 : System.Web.UI.Page {
protected void galleryDV_CustomJSProperties(object sender, CustomJSPropertiesEventArgs e) {
var itemDetails = new Dictionary<string, object>();
foreach(DataViewItem item in galleryDV.Items.GetVisibleItems()) {
var key = GetImageID(GetItemValue(item, "ID"));
itemDetails[key] = GetItemDetail(item);
}
e.Properties["cpItemDetails"] = itemDetails;
}
protected object GetItemDetail(DataViewItem item) {
Dictionary<string, object> itemDetail = new Dictionary<string, object>();
itemDetail.Add("description", GetItemValue(item, "Description"));
itemDetail.Add("highQualityImageUrl", GetItemValue(item, "LargeImageUrl"));
itemDetail.Add("imageWidth", GetItemValue(item, "Width"));
itemDetail.Add("imageHeight", GetItemValue(item, "Height"));
return itemDetail;
}
protected object GetItemValue(DataViewItem item, string fieldName) {
return DataBinder.Eval(item.DataItem, fieldName);
}
protected string GetImageID(object id) {
return string.Format("img_{0}", id);
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;
using System.Drawing;
using System.Xml;
using System.Web.UI;
public class CreatorResources
{
const string watermarkText = "ASPxPopupControl Demo",
largeImagePostFix = "_large",
fontName = "Tahoma";
const float fontSize = 11;
readonly Color fontColor = Color.FromArgb(80, Color.Gray);
public void CreateThumbnailImages(Size thumbnailSize, Size largeSize, string originalImagesPath, string thumbnailImagePath, string xmlFileName) {
XmlDocument xmlDocument = CreateXmlDocument();
XmlElement rootElement = CreateXmlElement(xmlDocument, null, "dsImages");
var index = 0;
foreach(var imageSourceName in Directory.GetFiles(originalImagesPath)) {
var thumbnailImagefileName = Path.GetFileName(imageSourceName);
var largeImageFileName = thumbnailImagefileName.Insert(thumbnailImagefileName.IndexOf('.'), largeImagePostFix);
var actualLargeImageSize = new Size();
using(var imageSource = Bitmap.FromFile(imageSourceName)) {
using(var thumbnailImage = GetThumbnailImage(imageSource, thumbnailSize)) {
thumbnailImage.Save(thumbnailImagePath + thumbnailImagefileName);
}
using(var largeImage = GetThumbnailImage(imageSource, largeSize)) {
actualLargeImageSize.Width = largeImage.Width;
actualLargeImageSize.Height = largeImage.Height;
SetWatermark(largeImage);
largeImage.Save(thumbnailImagePath + largeImageFileName);
}
}
string relativeImagePath = string.Format("{0}/", new DirectoryInfo(thumbnailImagePath).Name);
XmlElement element = CreateXmlElement(xmlDocument, rootElement, "Image");
AddAttribute(xmlDocument, element, "ID", index);
AddAttribute(xmlDocument, element, "Description", Path.GetFileNameWithoutExtension(imageSourceName));
AddAttribute(xmlDocument, element, "ImageUrl", relativeImagePath + thumbnailImagefileName);
AddAttribute(xmlDocument, element, "LargeImageUrl", relativeImagePath + largeImageFileName);
AddAttribute(xmlDocument, element, "Width", actualLargeImageSize.Width);
AddAttribute(xmlDocument, element, "Height", actualLargeImageSize.Height);
index++;
}
xmlDocument.Save(xmlFileName);
}
Image GetThumbnailImage(Image image, Size size) {
var proportion = (float)size.Width / image.Width;
var width = size.Width;
var height = (int)(proportion * image.Height);
if(height > size.Height) {
proportion = (float)size.Height / image.Height;
height = size.Height;
width = (int)(proportion * image.Width);
}
return image.GetThumbnailImage(width, height, null, IntPtr.Zero);
}
void SetWatermark(Image image) {
using(Graphics graphics = Graphics.FromImage(image)) {
using(Font font = new Font(fontName, fontSize)) {
SizeF stringSize = graphics.MeasureString(watermarkText, font);
graphics.TranslateTransform(image.Width - stringSize.Height, image.Height);
graphics.RotateTransform(-90);
graphics.DrawString(watermarkText, font, new SolidBrush(fontColor), 5, -2);
}
}
}
XmlDocument CreateXmlDocument() {
XmlDocument document = new XmlDocument();
XmlDeclaration dec = document.CreateXmlDeclaration("1.0", null, null);
document.AppendChild(dec);
return document;
}
XmlElement CreateXmlElement(XmlDocument document, XmlElement rootElement, string elementName) {
XmlElement element = document.CreateElement(elementName);
if(rootElement == null)
document.AppendChild(element);
else
rootElement.AppendChild(element);
return element;
}
void AddAttribute(XmlDocument document, XmlElement element, string name, object value) {
XmlAttribute attribute = document.CreateAttribute(name);
attribute.InnerText = value.ToString();
element.Attributes.Append(attribute);
}
}