|
1 | | -<!-- default badges list --> |
2 | | - |
3 | | -[](https://supportcenter.devexpress.com/ticket/details/T1032999) |
4 | | -[](https://docs.devexpress.com/GeneralInformation/403183) |
5 | | -<!-- default badges end --> |
6 | | -# Dashboard for ASP.NET Core - Custom Item Gallery |
7 | | - |
8 | | -The example contains the source code of the most requested custom items you can use in your Web Dashboard application. Use the custom items from this example as they are, or modify them according to your needs. In this Web Dashboard application, you can add custom items from the **Custom Items** group in the [Toolbox](https://docs.devexpress.com/Dashboard/117442/web-dashboard/ui-elements-and-customization/ui-elements/toolbox): |
9 | | - |
10 | | - |
11 | | - |
12 | | -<!-- default file list --> |
13 | | - |
14 | | -## Files to Look At |
15 | | - |
16 | | -* [SimpleTableItem.js](CS/AspNetCoreCustomItem/wwwroot/js/SimpleTableItem.js) |
17 | | -* [PolarChartItem.js](CS/AspNetCoreCustomItem/wwwroot/js/PolarChartItem.js) |
18 | | -* [ParameterItem.js](CS/AspNetCoreCustomItem/wwwroot/js/ParameterItem.js) |
19 | | -* [OnlineMapItem.js](CS/AspNetCoreCustomItem/wwwroot/js/OnlineMapItem.js) |
20 | | -* [WebPageItem.js](CS/AspNetCoreCustomItem/wwwroot/js/WebPageItem.js) |
21 | | -* [GanttItem.js](CS/AspNetCoreCustomItem/wwwroot/js/GanttItem.js) |
22 | | -* [HierarchicalTreeViewItem.js](CS/AspNetCoreCustomItem/wwwroot/js/HierarchicalTreeViewItem.js) |
23 | | -* [_Layout.cshtml](CS/AspNetCoreCustomItem/Pages/_Layout.cshtml) |
24 | | - |
25 | | -<!-- default file list end --> |
26 | | - |
27 | | -## Country Sales Dashboard |
28 | | - |
29 | | -The dashboard displays product sales for the selected category. Use the Country parameter to filter data by country. Select a category on the Polar Chart to show sales by products from this category in the table. |
30 | | - |
31 | | -This dashboard contains the following custom items: |
32 | | - |
33 | | -### Simple Table |
34 | | - |
35 | | -**View Script**: [SimpleTableItem.js](CS/AspNetCoreCustomItem/wwwroot/js/SimpleTableItem.js) |
36 | | - |
37 | | -A custom **Simple Table** item renders data from the measure / dimensions as an HTML table. You can use the Simple Table as a detail item along with the Master-Filtering feature. This custom item supports the following settings that you can configure in the Web Dashboard UI: |
38 | | - |
39 | | - |
40 | | - |
41 | | -- **Show Headers** - Specifies whether to show the field headers in the table. The default value is `Auto`. |
42 | | -- **Text Color** - Allows you to change the text color. The default value is `Dark`. |
43 | | - |
44 | | -### Polar Chart Item |
45 | | - |
46 | | -**View Script**: [PolarChartItem.js](CS/AspNetCoreCustomItem/wwwroot/js/PolarChartItem.js) |
47 | | - |
48 | | -A custom **Polar Chart** item that allows you to use the [dxPolarChart](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxPolarChart/) DevExtreme widget in your dashboards. This item supports the following settings that you can configure in the Web Dashboard UI: |
49 | | - |
50 | | - |
51 | | - |
52 | | -- **Display Labels** - Specifies whether to show point labels. |
53 | | - |
54 | | -### Parameter Item |
55 | | - |
56 | | -**View Script**: [ParameterItem.js](CS/AspNetCoreCustomItem/wwwroot/js/ParameterItem.js) |
57 | | - |
58 | | -A custom **Parameter** item renders [dashboard parameter dialog](https://docs.devexpress.com/Dashboard/117571) content inside the dashboard layout, and allows you to edit and submit parameter values. This item supports the following settings that you can configure in the Web Dashboard UI: |
59 | | - |
60 | | - |
61 | | - |
62 | | -- **Show Headers** - Specifies whether to show headers in the parameters table. |
63 | | -- **Show Parameter Name** - Specifies whether to show the first column with parameter names. |
64 | | -- **Automatic Updates** - Specifies whether a parameter item is updated automatically. When enabled, this option hides the 'Submit' and 'Reset' buttons. |
65 | | - |
66 | | -## Country Info Dashboard |
67 | | - |
68 | | -The dashboard displays information from Wikipedia for the selected country. |
69 | | - |
70 | | -This dashboard contains the following custom items: |
71 | | - |
72 | | -### Online Map |
73 | | - |
74 | | -**View Script**: [OnlineMapItem.js](CS/AspNetCoreCustomItem/wwwroot/js/OnlineMapItem.js) |
75 | | - |
76 | | -A custom **Online Map** item allows you to place callouts on Google or Bing maps using geographical coordinates. The [dxMap](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxMap/) is used as an underlying UI component. This custom item supports the following settings that you can configure in the Web Dashboard UI: |
77 | | - |
78 | | - |
79 | | - |
80 | | -- **Provider** - Specifies whether to show Google or Bing maps. |
81 | | -- **Type** - Specifies the map type. You can choose between `RoadMap`, `Satellite` or `Hybrid`. |
82 | | -- **Display Mode** - Specifies whether to show markers or routes. |
83 | | - |
84 | | -### Web Page |
85 | | - |
86 | | -**View Script**: [WebPageItem.js](CS/AspNetCoreCustomItem/wwwroot/js/WebPageItem.js) |
87 | | - |
88 | | -A custom **Web Page** item displays a single web page or a set of pages. You can use the Web Page as a detail item along with the Master-Filtering feature. The content is rendered inside the Inline Frame element (`<iframe>`). This custom item supports the following setting that you can configure in the Web Dashboard UI: |
89 | | - |
90 | | - |
91 | | - |
92 | | -- **URL** - Specifies a web page URL. You can set a single page as well as a set of pages (e.g., 'https://en.wikipedia.org/wiki/{0}'). If you add a dimension and specify a placeholder, the data source field returns strings that will be inserted in the position of the {0} placeholder. Thus, the Web Page item joins the specified URL with the current dimension value and displays the page located by this address. |
93 | | - |
94 | | -## Tasks Dashboard |
95 | | - |
96 | | -The dashboard displays tasks. Select the task to display detailed information in the Grid. |
97 | | - |
98 | | -This dashboard contains the following custom item: |
99 | | - |
100 | | -### Gannt Item |
101 | | - |
102 | | -**View Script**: [GanttItem.js](CS/AspNetCoreCustomItem/wwwroot/js/GanttItem.js) |
103 | | - |
104 | | -A custom **Gannt** item displays the task flow and dependencies between tasks. This item uses [dxGantt](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxGantt/) as an underlying UI component. |
105 | | - |
106 | | - |
107 | | - |
108 | | -## Departments Dashboard |
109 | | - |
110 | | -The dashboard displays departmental data. Use the custom Tree View item to filter detailed information in the Grid. |
111 | | - |
112 | | -This dashboard contains the following custom item: |
113 | | - |
114 | | -### Hierarchical Tree View |
115 | | - |
116 | | -**View Script**: [HierarchicalTreeViewItem.js](CS/AspNetCoreCustomItem/wwwroot/js/HierarchicalTreeViewItem.js) |
117 | | - |
118 | | -A custom **Tree View** item can display hierarchical data. This item uses [dxTreeView](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxTreeView/) as an underlying UI component. |
119 | | - |
120 | | - |
121 | | - |
122 | | -## License |
123 | | -These extensions are distributed under the **MIT** license (free and open-source), but can only be used with a commercial DevExpress Dashboard software product. You can [review the license terms](https://www.devexpress.com/Support/EULAs/NetComponents.xml) or [download a free trial version](https://go.devexpress.com/DevExpressDownload_UniversalTrial.aspx) of the Dashboard suite at [DevExpress.com](https://www.devexpress.com). |
124 | | - |
125 | | -## Documentation |
126 | | - |
127 | | -- [Create a Custom Item](https://docs.devexpress.com/Dashboard/117546/web-dashboard/ui-elements-and-customization/create-a-custom-item) |
128 | | -- [Install DevExpress Controls Using NuGet Packages](https://docs.devexpress.com/GeneralInformation/115912/installation/install-devexpress-controls-using-nuget-packages) |
129 | | - |
130 | | -## More Examples |
131 | | - |
132 | | -- [Dashboard for Angular - Custom Item Gallery](https://github.com/DevExpress-Examples/dashboard-angular-app-custom-item-gallery) |
133 | | -- [Dashboard for React - Custom Item Gallery](https://github.com/DevExpress-Examples/dashboard-react-app-custom-item-gallery) |
134 | | -- [Dashboard for React - Custom Item Tutorials](https://github.com/DevExpress-Examples/dashboard-react-app-custom-item-tutorials) |
135 | | -- [Dashboard for ASP.NET Core - Custom Item Tutorials](https://github.com/DevExpress-Examples/asp-net-core-dashboard-custom-item-tutorials) |
136 | | -- [Dashboard for WinForms - Custom Item Extensions](https://github.com/DevExpress-Examples/winforms-dashboard-custom-items-extension) |
| 1 | +<!-- default badges list --> |
| 2 | + |
| 3 | +[](https://supportcenter.devexpress.com/ticket/details/T1032999) |
| 4 | +[](https://docs.devexpress.com/GeneralInformation/403183) |
| 5 | +<!-- default badges end --> |
| 6 | +# Dashboard for ASP.NET Core - Custom Item Gallery |
| 7 | + |
| 8 | +The example contains the source code of the most requested custom items you can use in your Web Dashboard application. Use the custom items from this example as they are, or modify them according to your needs. In this Web Dashboard application, you can add custom items from the **Custom Items** group in the [Toolbox](https://docs.devexpress.com/Dashboard/117442/web-dashboard/ui-elements-and-customization/ui-elements/toolbox): |
| 9 | + |
| 10 | + |
| 11 | + |
| 12 | +<!-- default file list --> |
| 13 | + |
| 14 | +## Files to Look At |
| 15 | + |
| 16 | +* [SimpleTableItem.js](CS/AspNetCoreCustomItem/wwwroot/js/SimpleTableItem.js) |
| 17 | +* [PolarChartItem.js](CS/AspNetCoreCustomItem/wwwroot/js/PolarChartItem.js) |
| 18 | +* [ParameterItem.js](CS/AspNetCoreCustomItem/wwwroot/js/ParameterItem.js) |
| 19 | +* [OnlineMapItem.js](CS/AspNetCoreCustomItem/wwwroot/js/OnlineMapItem.js) |
| 20 | +* [WebPageItem.js](CS/AspNetCoreCustomItem/wwwroot/js/WebPageItem.js) |
| 21 | +* [GanttItem.js](CS/AspNetCoreCustomItem/wwwroot/js/GanttItem.js) |
| 22 | +* [HierarchicalTreeViewItem.js](CS/AspNetCoreCustomItem/wwwroot/js/HierarchicalTreeViewItem.js) |
| 23 | +* [_Layout.cshtml](CS/AspNetCoreCustomItem/Pages/_Layout.cshtml) |
| 24 | + |
| 25 | +<!-- default file list end --> |
| 26 | + |
| 27 | +## Country Sales Dashboard |
| 28 | + |
| 29 | +The dashboard displays product sales for the selected category. Use the Country parameter to filter data by country. Select a category on the Polar Chart to show sales by products from this category in the table. |
| 30 | + |
| 31 | +This dashboard contains the following custom items: |
| 32 | + |
| 33 | +### Simple Table |
| 34 | + |
| 35 | +**View Script**: [SimpleTableItem.js](CS/AspNetCoreCustomItem/wwwroot/js/SimpleTableItem.js) |
| 36 | + |
| 37 | +A custom **Simple Table** item renders data from the measure / dimensions as an HTML table. You can use the Simple Table as a detail item along with the Master-Filtering feature. This custom item supports the following settings that you can configure in the Web Dashboard UI: |
| 38 | + |
| 39 | + |
| 40 | + |
| 41 | +- **Show Headers** - Specifies whether to show the field headers in the table. The default value is `Auto`. |
| 42 | +- **Text Color** - Allows you to change the text color. The default value is `Dark`. |
| 43 | + |
| 44 | +### Polar Chart Item |
| 45 | + |
| 46 | +**View Script**: [PolarChartItem.js](CS/AspNetCoreCustomItem/wwwroot/js/PolarChartItem.js) |
| 47 | + |
| 48 | +A custom **Polar Chart** item that allows you to use the [dxPolarChart](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxPolarChart/) DevExtreme widget in your dashboards. This item supports the following settings that you can configure in the Web Dashboard UI: |
| 49 | + |
| 50 | + |
| 51 | + |
| 52 | +- **Display Labels** - Specifies whether to show point labels. |
| 53 | + |
| 54 | +### Parameter Item |
| 55 | + |
| 56 | +**View Script**: [ParameterItem.js](CS/AspNetCoreCustomItem/wwwroot/js/ParameterItem.js) |
| 57 | + |
| 58 | +A custom **Parameter** item renders [dashboard parameter dialog](https://docs.devexpress.com/Dashboard/117571) content inside the dashboard layout, and allows you to edit and submit parameter values. This item supports the following settings that you can configure in the Web Dashboard UI: |
| 59 | + |
| 60 | + |
| 61 | + |
| 62 | +- **Show Headers** - Specifies whether to show headers in the parameters table. |
| 63 | +- **Show Parameter Name** - Specifies whether to show the first column with parameter names. |
| 64 | +- **Automatic Updates** - Specifies whether a parameter item is updated automatically. When enabled, this option hides the 'Submit' and 'Reset' buttons. |
| 65 | + |
| 66 | +## Country Info Dashboard |
| 67 | + |
| 68 | +The dashboard displays information from Wikipedia for the selected country. |
| 69 | + |
| 70 | +This dashboard contains the following custom items: |
| 71 | + |
| 72 | +### Online Map |
| 73 | + |
| 74 | +**View Script**: [OnlineMapItem.js](CS/AspNetCoreCustomItem/wwwroot/js/OnlineMapItem.js) |
| 75 | + |
| 76 | +A custom **Online Map** item allows you to place callouts on Google or Bing maps using geographical coordinates. The [dxMap](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxMap/) is used as an underlying UI component. This custom item supports the following settings that you can configure in the Web Dashboard UI: |
| 77 | + |
| 78 | + |
| 79 | + |
| 80 | +- **Provider** - Specifies whether to show Google or Bing maps. |
| 81 | +- **Type** - Specifies the map type. You can choose between `RoadMap`, `Satellite` or `Hybrid`. |
| 82 | +- **Display Mode** - Specifies whether to show markers or routes. |
| 83 | + |
| 84 | +### Web Page |
| 85 | + |
| 86 | +**View Script**: [WebPageItem.js](CS/AspNetCoreCustomItem/wwwroot/js/WebPageItem.js) |
| 87 | + |
| 88 | +A custom **Web Page** item displays a single web page or a set of pages. You can use the Web Page as a detail item along with the Master-Filtering feature. The content is rendered inside the Inline Frame element (`<iframe>`). This custom item supports the following setting that you can configure in the Web Dashboard UI: |
| 89 | + |
| 90 | + |
| 91 | + |
| 92 | +- **URL** - Specifies a web page URL. You can set a single page as well as a set of pages (e.g., 'https://en.wikipedia.org/wiki/{0}'). If you add a dimension and specify a placeholder, the data source field returns strings that will be inserted in the position of the {0} placeholder. Thus, the Web Page item joins the specified URL with the current dimension value and displays the page located by this address. |
| 93 | + |
| 94 | +## Tasks Dashboard |
| 95 | + |
| 96 | +The dashboard displays tasks. Select the task to display detailed information in the Grid. |
| 97 | + |
| 98 | +This dashboard contains the following custom item: |
| 99 | + |
| 100 | +### Gannt Item |
| 101 | + |
| 102 | +**View Script**: [GanttItem.js](CS/AspNetCoreCustomItem/wwwroot/js/GanttItem.js) |
| 103 | + |
| 104 | +A custom **Gannt** item displays the task flow and dependencies between tasks. This item uses [dxGantt](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxGantt/) as an underlying UI component. |
| 105 | + |
| 106 | + |
| 107 | + |
| 108 | +## Departments Dashboard |
| 109 | + |
| 110 | +The dashboard displays departmental data. Use the custom Tree View item to filter detailed information in the Grid. |
| 111 | + |
| 112 | +This dashboard contains the following custom item: |
| 113 | + |
| 114 | +### Hierarchical Tree View |
| 115 | + |
| 116 | +**View Script**: [HierarchicalTreeViewItem.js](CS/AspNetCoreCustomItem/wwwroot/js/HierarchicalTreeViewItem.js) |
| 117 | + |
| 118 | +A custom **Tree View** item can display hierarchical data. This item uses [dxTreeView](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxTreeView/) as an underlying UI component. |
| 119 | + |
| 120 | + |
| 121 | + |
| 122 | +## License |
| 123 | +These extensions are distributed under the **MIT** license (free and open-source), but can only be used with a commercial DevExpress Dashboard software product. You can [review the license terms](https://www.devexpress.com/Support/EULAs/NetComponents.xml) or [download a free trial version](https://go.devexpress.com/DevExpressDownload_UniversalTrial.aspx) of the Dashboard suite at [DevExpress.com](https://www.devexpress.com). |
| 124 | + |
| 125 | +## Documentation |
| 126 | + |
| 127 | +- [Create a Custom Item](https://docs.devexpress.com/Dashboard/117546/web-dashboard/ui-elements-and-customization/create-a-custom-item) |
| 128 | +- [Install DevExpress Controls Using NuGet Packages](https://docs.devexpress.com/GeneralInformation/115912/installation/install-devexpress-controls-using-nuget-packages) |
| 129 | + |
| 130 | +## More Examples |
| 131 | + |
| 132 | +- [Dashboard for Angular - Custom Item Gallery](https://github.com/DevExpress-Examples/dashboard-angular-app-custom-item-gallery) |
| 133 | +- [Dashboard for React - Custom Item Gallery](https://github.com/DevExpress-Examples/dashboard-react-app-custom-item-gallery) |
| 134 | +- [Dashboard for React - Custom Item Tutorials](https://github.com/DevExpress-Examples/dashboard-react-app-custom-item-tutorials) |
| 135 | +- [Dashboard for ASP.NET Core - Custom Item Tutorials](https://github.com/DevExpress-Examples/asp-net-core-dashboard-custom-item-tutorials) |
| 136 | +- [Dashboard for WinForms - Custom Item Extensions](https://github.com/DevExpress-Examples/winforms-dashboard-custom-items-extension) |
0 commit comments