Skip to content

Commit 7f2c18c

Browse files
Stason4egStason4eg
authored
Merge pull request #1 from DevExpress-Examples/20.2.4+
20.2.4+
2 parents 4eee770 + afd7f74 commit 7f2c18c

File tree

4 files changed

+37
-34
lines changed

4 files changed

+37
-34
lines changed

‎CS/NetCoreDashboardApp/Data/Dashboards/dashboard1.xml

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@
1616
</SqlDataSource>
1717
</DataSources>
1818
<Items>
19-
<Chart ComponentName="chartDashboardItem1" Name="Chart Country" ParentContainer="dashboardTabPage2" DataSource="DataSource1" DataMember="SalesPerson">
19+
<Chart ComponentName="chartDashboardItem1" Name="Chart OrderDate - Month-Year" ParentContainer="dashboardTabPage2" DataSource="DataSource1" DataMember="SalesPerson">
2020
<DataItems>
2121
<Measure DataMember="ExtendedPrice" DefaultId="DataItem0" />
22-
<Dimension DataMember="Country" DefaultId="DataItem1" />
22+
<Dimension DataMember="OrderDate" DateTimeGroupInterval="MonthYear" DefaultId="DataItem1" />
2323
<Dimension DataMember="Country" DefaultId="DataItem2" />
2424
</DataItems>
2525
<SeriesDimensions>
@@ -38,10 +38,10 @@
3838
</Pane>
3939
</Panes>
4040
</Chart>
41-
<Chart ComponentName="chartDashboardItem2" Name="Chart CategoryName" ParentContainer="dashboardTabPage1" DataSource="DataSource1" DataMember="SalesPerson">
41+
<Chart ComponentName="chartDashboardItem2" Name="Chart OrderData - Year" ParentContainer="dashboardTabPage1" DataSource="DataSource1" DataMember="SalesPerson">
4242
<DataItems>
4343
<Measure DataMember="ExtendedPrice" DefaultId="DataItem0" />
44-
<Dimension DataMember="CategoryName" DefaultId="DataItem1" />
44+
<Dimension DataMember="OrderDate" DefaultId="DataItem1" />
4545
<Dimension DataMember="Country" DefaultId="DataItem2" />
4646
</DataItems>
4747
<SeriesDimensions>
@@ -62,8 +62,8 @@
6262
</Chart>
6363
<TabContainer ComponentName="tabContainerDashboardItem1" Name="Tab Container 1" ShowCaption="false">
6464
<Pages>
65-
<Page ComponentName="dashboardTabPage1" Name="Page 1" />
66-
<Page ComponentName="dashboardTabPage2" Name="Page 2" />
65+
<Page ComponentName="dashboardTabPage1" Name="OrderData - Year" ShowItemAsTabPage="false" />
66+
<Page ComponentName="dashboardTabPage2" Name="OrderDate - Month-Year" ShowItemAsTabPage="false" />
6767
</Pages>
6868
</TabContainer>
6969
<ListBox ComponentName="listBoxDashboardItem1" Name="List Box 1" DataSource="DataSource1" DataMember="SalesPerson">

‎CS/NetCoreDashboardApp/Pages/Index.cshtml

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,18 @@
33

44
<script>
55
function onItemCaptionToolbarUpdated(e) {
6-
if (e.itemName == 'listBoxDashboardItem1') {
7-
e.options.actionItems.push({
8-
text: 'Custom Menu',
6+
if (e.itemName === 'chartDashboardItem1' || e.itemName === 'chartDashboardItem2') {
7+
e.options.stateItems.push({
8+
text: 'Switch Arguments',
99
type: "menu",
1010
menu: {
1111
type: 'list',
12-
items: ['Category Name Argument', 'Country'],
12+
items: ['OrderDate - Year', 'OrderDate - Month-Year'],
1313
selectionMode: 'single',
14-
itemClick: function (e) {
14+
itemClick: function (item) {
1515
var viewerAPI = dashboardControl.findExtension("viewer-api");
1616
var tabContainerComponentName = "tabContainerDashboardItem1";
17-
if (e == 'Category Name Argument')
17+
if (item === 'OrderDate - Year')
1818
viewerAPI.setSelectedTabPageIndex(tabContainerComponentName, 0);
1919
else
2020
viewerAPI.setSelectedTabPageIndex(tabContainerComponentName, 1);
@@ -26,7 +26,7 @@
2626
</script>
2727

2828
<div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;">
29-
@(Html.DevExpress().Dashboard("dashboardControl")
29+
@(Html.DevExpress().Dashboard("dashboardControl")
3030
.Width("100%")
3131
.Height("100%")
3232
.UseNeutralFilterMode(true)

‎CS/NetCoreDashboardApp/Pages/_Layout.cshtml

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!DOCTYPE html>
22

33
<html>
44
<head>
@@ -10,7 +10,6 @@
1010

1111
<script type="text/javascript">
1212
function onBeforeRender(dashboardControl) {
13-
dashboardControl.registerExtension(new DevExpress.Dashboard.DashboardPanelExtension(dashboardControl, { dashboardThumbnail: "./DashboardThumbnail/{0}.png" }));
1413
}
1514
</script>
1615
</head>

‎README.md

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,23 @@
1-
# Dashboard for ASP.NET Core - How to change chart arguments at runtime
2-
3-
This example demonstrates how to change Chart items with different settings in a tab container using a custom menu in a List Box item.
4-
Our Dashboard doesn't allow customizing a Chart item and changing its settings at runtime. A possible way is to create a tab container, add different chart items there, and manually set the group interval property of each chart.
5-
6-
To add some automation, it is possible to add custom buttons to any dashboard item title and then use them to switch between tabs. I recommend using the [DashboardTitleToolbarUpdated](https://docs.devexpress.com/Dashboard/js-DevExpress.Dashboard.ViewerApiExtensionOptions#js_devexpress_dashboard_viewerapiextensionoptions_onitemcaptiontoolbarupdated) event to add the required buttons to the dashboard item title.
7-
As for switching between the tabs, I suggest you use the [setSelectedTabPage](https://docs.devexpress.com/Dashboard/js-DevExpress.Dashboard.ViewerApiExtension#js_devexpress_dashboard_viewerapiextension_setselectedtabpage_tabpagename_) or [setSelectedTabPageIndex](https://docs.devexpress.com/Dashboard/js-DevExpress.Dashboard.ViewerApiExtension#js_devexpress_dashboard_viewerapiextension_setselectedtabpageindex_tabcontainername_index_) functions.
8-
9-
Also, you can modify the dashboard XML definition to hide the tab container’s caption:
10-
```
11-
<TabContainer ComponentName="tabContainerDashboardItem1" Name="Tab Container 1" ShowCaption="false">
12-
<Pages>
13-
```
14-
15-
<!-- default file list -->
16-
*Files to look at*:
17-
18-
* [Index.cshtm](./CS/NetCoreDashboardApp/Pages/Index.cshtm)
19-
<!-- default file list end -->
1+
# Dashboard for ASP.NET Core - How to change chart arguments at runtime
2+
3+
<!-- default file list -->
4+
*Files to look at*:
5+
* [Index](./CS/NetCoreDashboardApp/Pages/Index.cshtml)
6+
<!-- default file list end -->
7+
8+
This example uses a custom menu in a List Box item to change Chart items with different settings in a tab container.
9+
Our Dashboard doesn't support the ability to customize a Chart item and change its settings at runtime. A possible way is to create a tab container, add different chart items to it, and manually set the group interval property of each chart.
10+
11+
To implement automation, add custom buttons to any dashboard item title and then use them to switch between tabs. For this, use the [DashboardTitleToolbarUpdated](https://docs.devexpress.com/Dashboard/js-DevExpress.Dashboard.ViewerApiExtensionOptions#js_devexpress_dashboard_viewerapiextensionoptions_onitemcaptiontoolbarupdated) event to add the required buttons to the dashboard item title.
12+
As for switching between the tabs, you can use the [setSelectedTabPage](https://docs.devexpress.com/Dashboard/js-DevExpress.Dashboard.ViewerApiExtension#js_devexpress_dashboard_viewerapiextension_setselectedtabpage_tabpagename_) or [setSelectedTabPageIndex](https://docs.devexpress.com/Dashboard/js-DevExpress.Dashboard.ViewerApiExtension#js_devexpress_dashboard_viewerapiextension_setselectedtabpageindex_tabcontainername_index_) function.
13+
14+
Also, you can modify the dashboard XML definition to hide the tab container’s caption, add the ShowCaption property and set it to false:
15+
```
16+
<TabContainer ComponentName="tabContainerDashboardItem1" Name="Tab Container 1" ShowCaption="false">
17+
<Pages>
18+
```
19+
20+
<!-- default file list -->
21+
*Files to look at*:
22+
23+
* [Index.cshtm](./CS/NetCoreDashboardApp/Pages/Index.cshtm)

0 commit comments

Comments
 (0)