using DevExpress.DashboardCommon;
using DevExpress.DashboardWeb;
using DevExpress.DashboardWeb.Native;
using DevExpress.Web;
using System;
using System.Collections.Generic;
using System.Drawing;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Xml.Linq;
namespace WebApplication18 {
public partial class Default : System.Web.UI.Page {
string dashboardsPath = @"~/App_Data/Dashboards";
string thumbnailsPath = @"~/Thumbnails";
protected void Page_Load(object sender, EventArgs e) {
DashboardFileStorage storage = new DashboardFileStorage(dashboardsPath);
ASPxDashboard1.SetDashboardStorage(storage);
DataSourceInMemoryStorage dataSourceStorage = new DataSourceInMemoryStorage();
dataSourceStorage.RegisterDataSource(DataSourceGenerator.CreateNWindDataSource().SaveToXml());
ASPxDashboard1.SetDataSourceStorage(dataSourceStorage);
}
protected void ImageSlider_ItemDataBound(object source, ImageSliderItemEventArgs e) {
e.Item.Name = System.IO.Path.GetFileNameWithoutExtension(e.Item.ImageUrl);
}
protected void ASPxDashboard1_DataLoading(object sender, DataLoadingWebEventArgs e) {
DashboardMainDemo.DataLoader.LoadData(e);
}
protected void ASPxCallbackPanel1_Callback(object sender, CallbackEventArgsBase e) {
DashboardFileStorage storage = new DashboardFileStorage(dashboardsPath);
var dashboards = (storage as IDashboardStorage).GetAvailableDashboardsInfo().ToList();
ASPxDashboardExporter exporter = new ASPxDashboardExporter(ASPxDashboard1);
string path = Server.MapPath(thumbnailsPath);
DirectoryInfo di = new DirectoryInfo(path);
foreach (FileInfo file in di.GetFiles()) {
file.Delete();
}
for (int i = 0; i < dashboards.Count; i++) {
string fullPath = string.Format(@"{0}\{1}.png", path, dashboards[i].ID);
using (FileStream fs = new FileStream(fullPath, FileMode.OpenOrCreate, FileAccess.Write))
exporter.ExportToImage(dashboards[i].ID, fs, new Size(1000, 1000), null, new DashboardImageExportOptions() {
Format = DevExpress.DashboardCommon.DashboardExportImageFormat.Png
});
}
ImageSlider.ImageSourceFolder = thumbnailsPath;
}
}
}
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication18.Default" %>
<%@ Register Assembly="DevExpress.Web.v17.1, Version=17.1.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Dashboard.v17.1.Web, Version=17.1.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.DashboardWeb" TagPrefix="dx" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.OptionsTable {
margin-bottom: 5px;
}
.dxisControl .dxis-nbItem {
width: 250px;
height: 250px;
background-color: transparent;
}
.dxisControl .dxis-nbSelectedItem,
.dxisControl .dxis-nbSelectedItem > div,
.dxisControl .dxis-nbItem .dxis-nbHoverItem {
display: none !important; /* Hide Selection Frame */
}
.container {
display: block;
color: #0068bb;
line-height: 1.2;
border: 1px solid #ffffff;
padding: 20px 25px 25px 25px;
text-align: center;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 249px;
height: 250px;
}
.container:hover {
color: #dd0000;
border: 1px solid #dddddd;
background-color: #f8f8f8;
}
.name {
font-size: 13px;
white-space: normal;
font-family: helvetica, arial, sans-serif;
font-family: 'Segoe UI', Helvetica, Tahoma, Geneva, sans-serif;
}
</style>
<script type="text/javascript">
function onThumbnailItemClick(s, e) {
dashboard.LoadDashboard(e.item.name);
}
function onInit(s, e) {
callbackPanel.PerformCallback();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<dx:ASPxSplitter ID="ASPxSplitter1" Orientation="Vertical" runat="server" FullscreenMode="true">
<Panes>
<dx:SplitterPane AutoHeight="true" ShowCollapseBackwardButton="True">
<ContentCollection>
<dx:SplitterContentControl runat="server">
<dx:ASPxCallbackPanel ID="ASPxCallbackPanel1" runat="server" ClientInstanceName="callbackPanel" OnCallback="ASPxCallbackPanel1_Callback">
<PanelCollection>
<dx:PanelContent runat="server">
<dx:ASPxImageSlider ID="ImageSlider" runat="server" EnableViewState="False" EnableTheming="False" ImageSourceFolder="\Thumbnails" Width="100%" ShowImageArea="false" OnItemDataBound="ImageSlider_ItemDataBound">
<ItemThumbnailTemplate>
<div class="container">
<dx:ASPxImage runat="server" Width="200px" Height="200px" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "ImageUrl") %>' AlternateText='<%# DataBinder.Eval(Container.DataItem, "Name") %>' ShowLoadingImage="true"></dx:ASPxImage>
<span class="name"><%# DataBinder.Eval(Container.DataItem, "Name") %></span>
</div>
</ItemThumbnailTemplate>
<SettingsBehavior ExtremeItemClickMode="Select" />
<SettingsNavigationBar ThumbnailsModeNavigationButtonVisibility="Always" ThumbnailsNavigationButtonPosition="Outside" PagingMode="Single" />
<ClientSideEvents ThumbnailItemClick="onThumbnailItemClick" />
</dx:ASPxImageSlider>
</dx:PanelContent>
</PanelCollection>
<ClientSideEvents Init="onInit" />
</dx:ASPxCallbackPanel>
</dx:SplitterContentControl>
</ContentCollection>
</dx:SplitterPane>
<dx:SplitterPane>
<ContentCollection>
<dx:SplitterContentControl runat="server">
<dx:ASPxDashboard ID="ASPxDashboard1" ClientInstanceName="dashboard" Height="100%" Width="100%" OnDataLoading="ASPxDashboard1_DataLoading" runat="server">
</dx:ASPxDashboard>
</dx:SplitterContentControl>
</ContentCollection>
</dx:SplitterPane>
</Panes>
</dx:ASPxSplitter>
</form>
</body>
</html>
Imports DevExpress.DashboardCommon
Imports DevExpress.DashboardWeb
Imports DevExpress.DashboardWeb.Native
Imports DevExpress.Web
Imports System
Imports System.Collections.Generic
Imports System.Drawing
Imports System.IO
Imports System.Linq
Imports System.Web
Imports System.Web.Script.Serialization
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Xml.Linq
Namespace WebApplication18
Partial Public Class [Default]
Inherits System.Web.UI.Page
Private dashboardsPath As String = "~/App_Data/Dashboards"
Private thumbnailsPath As String = "~/Thumbnails"
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
Dim storage As New DashboardFileStorage(dashboardsPath)
ASPxDashboard1.SetDashboardStorage(storage)
Dim dataSourceStorage As New DataSourceInMemoryStorage()
dataSourceStorage.RegisterDataSource(DataSourceGenerator.CreateNWindDataSource().SaveToXml())
ASPxDashboard1.SetDataSourceStorage(dataSourceStorage)
End Sub
Protected Sub ImageSlider_ItemDataBound(ByVal source As Object, ByVal e As ImageSliderItemEventArgs)
e.Item.Name = System.IO.Path.GetFileNameWithoutExtension(e.Item.ImageUrl)
End Sub
Protected Sub ASPxDashboard1_DataLoading(ByVal sender As Object, ByVal e As DataLoadingWebEventArgs)
DashboardMainDemo.DataLoader.LoadData(e)
End Sub
Protected Sub ASPxCallbackPanel1_Callback(ByVal sender As Object, ByVal e As CallbackEventArgsBase)
Dim storage As New DashboardFileStorage(dashboardsPath)
Dim dashboards = (TryCast(storage, IDashboardStorage)).GetAvailableDashboardsInfo().ToList()
Dim exporter As New ASPxDashboardExporter(ASPxDashboard1)
Dim path As String = Server.MapPath(thumbnailsPath)
Dim di As New DirectoryInfo(path)
For Each file As FileInfo In di.GetFiles()
file.Delete()
Next file
For i As Integer = 0 To dashboards.Count - 1
Dim fullPath As String = String.Format("{0}\{1}.png", path, dashboards(i).ID)
Using fs As New FileStream(fullPath, FileMode.OpenOrCreate, FileAccess.Write)
exporter.ExportToImage(dashboards(i).ID, fs, New Size(1000, 1000), Nothing, New DashboardImageExportOptions() With {.Format = DevExpress.DashboardCommon.DashboardExportImageFormat.Png})
End Using
Next i
ImageSlider.ImageSourceFolder = thumbnailsPath
End Sub
End Class
End Namespace
<%@ Page Language="vb" AutoEventWireup="true" CodeBehind="Default.aspx.vb" Inherits="WebApplication18.Default" %>
<%@ Register Assembly="DevExpress.Web.v17.1, Version=17.1.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Dashboard.v17.1.Web, Version=17.1.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.DashboardWeb" TagPrefix="dx" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.OptionsTable {
margin-bottom: 5px;
}
.dxisControl .dxis-nbItem {
width: 250px;
height: 250px;
background-color: transparent;
}
.dxisControl .dxis-nbSelectedItem,
.dxisControl .dxis-nbSelectedItem > div,
.dxisControl .dxis-nbItem .dxis-nbHoverItem {
display: none !important; // Hide Selection Frame
}
.container {
display: block;
color: #0068bb;
line-height: 1.2;
border: 1px solid #ffffff;
padding: 20px 25px 25px 25px;
text-align: center;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 249px;
height: 250px;
}
.container:hover {
color: #dd0000;
border: 1px solid #dddddd;
background-color: #f8f8f8;
}
.name {
font-size: 13px;
white-space: normal;
font-family: helvetica, arial, sans-serif;
font-family: 'Segoe UI', Helvetica, Tahoma, Geneva, sans-serif;
}
</style>
<script type="text/javascript">
function onThumbnailItemClick(s, e) {
dashboard.LoadDashboard(e.item.name);
}
function onInit(s, e) {
callbackPanel.PerformCallback();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<dx:ASPxSplitter ID="ASPxSplitter1" Orientation="Vertical" runat="server" FullscreenMode="true">
<Panes>
<dx:SplitterPane AutoHeight="true" ShowCollapseBackwardButton="True">
<ContentCollection>
<dx:SplitterContentControl runat="server">
<dx:ASPxCallbackPanel ID="ASPxCallbackPanel1" runat="server" ClientInstanceName="callbackPanel" OnCallback="ASPxCallbackPanel1_Callback">
<PanelCollection>
<dx:PanelContent runat="server">
<dx:ASPxImageSlider ID="ImageSlider" runat="server" EnableViewState="False" EnableTheming="False" ImageSourceFolder="\Thumbnails" Width="100%" ShowImageArea="false" OnItemDataBound="ImageSlider_ItemDataBound">
<ItemThumbnailTemplate>
<div class="container">
<dx:ASPxImage runat="server" Width="200px" Height="200px" ImageUrl='<%#DataBinder.Eval(Container.DataItem, "ImageUrl")%>' AlternateText='<%#DataBinder.Eval(Container.DataItem, "Name")%>' ShowLoadingImage="true"></dx:ASPxImage>
<span class="name"><%#DataBinder.Eval(Container.DataItem, "Name")%></span>
</div>
</ItemThumbnailTemplate>
<SettingsBehavior ExtremeItemClickMode="Select" />
<SettingsNavigationBar ThumbnailsModeNavigationButtonVisibility="Always" ThumbnailsNavigationButtonPosition="Outside" PagingMode="Single" />
<ClientSideEvents ThumbnailItemClick="onThumbnailItemClick" />
</dx:ASPxImageSlider>
</dx:PanelContent>
</PanelCollection>
<ClientSideEvents Init="onInit" />
</dx:ASPxCallbackPanel>
</dx:SplitterContentControl>
</ContentCollection>
</dx:SplitterPane>
<dx:SplitterPane>
<ContentCollection>
<dx:SplitterContentControl runat="server">
<dx:ASPxDashboard ID="ASPxDashboard1" ClientInstanceName="dashboard" Height="100%" Width="100%" OnDataLoading="ASPxDashboard1_DataLoading" runat="server">
</dx:ASPxDashboard>
</dx:SplitterContentControl>
</ContentCollection>
</dx:SplitterPane>
</Panes>
</dx:ASPxSplitter>
</form>
</body>
</html>