|
1 | | -# Dashboard for ASP.NET Core - How to refresh a specific dashboard item using parameters without refreshing the entire dashboard |
| 1 | +# Dashboard for ASP.NET Core - How to Use Parameters to Update a Specific Dashboard Item Without Refreshing the Entire Dashboard |
2 | 2 |
|
3 | | -The example shows how to refresh a specific dashboard item using parameters without refreshing the entire dashboard. This technique is useful when you have a requirement to filter a dashboard's data source using parameters and you do not want to refresh all items in the dashboard for performance reasons. |
| 3 | +The example shows how to use dashboard parameters to update a specific dashboard item without refreshing the entire dashboard. This technique applies when you need to filter a data source's data to update a specific dashboard item, but do not want to refresh data in all items in a dashboard because this operation causes a performance delay. |
4 | 4 |
|
5 | | -## Example Structure |
6 | | - |
7 | | -The dashboard in the example has three items: |
8 | | -- The "Products grid; |
9 | | -- The "Sales per Product" chart; |
10 | | -- The "Orders" grid. |
11 | | - |
12 | | - |
13 | | - |
14 | | -Each dashboard item displays data from its own data source. The "Products" grid has enabled [Master Filtering](https://docs.devexpress.com/Dashboard/117060/web-dashboard/create-dashboards-on-the-web/interactivity/master-filtering) to filter data in the "Sales per Product" chart. Since dashboard items have a different data source, the filtering is implemented using [Dashboard Parameters](https://docs.devexpress.com/Dashboard/117062/web-dashboard/create-dashboards-on-the-web/data-analysis/dashboard-parameters). |
15 | | - |
16 | | -When the parameter value is changed in the dashboard, Web Dashboard refreshes all dashboard items to reflect possible changes in data sources. However, in this particular case, it is necessary to refresh only a single dashboard item. Thus, the parameter value is passed to the server using [Request Headers](https://docs.devexpress.com/Dashboard/js-DevExpress.Dashboard.AjaxRemoteService#js_devexpress_dashboard_ajaxremoteservice_headers) and the item is refreshed on the client side by calling the [DashboardControl.refresh](https://docs.devexpress.com/Dashboard/js-DevExpress.Dashboard.DashboardControl?p=netframework#js_devexpress_dashboard_dashboardcontrol_refresh) method. |
| 5 | +<!-- default file list --> |
| 6 | +## Files to Look at |
17 | 7 |
|
18 | | -```js |
19 | | -function onBeforeRender(dashboardControl) { |
20 | | -//... |
21 | | -var viewerApi = dashboardControl.findExtension('viewerApi'); |
22 | | -if (viewerApi) { |
23 | | -viewerApi.on('itemMasterFilterStateChanged', e => onItemMasterFilterStateChanged(dashboardControl, e)); |
24 | | -} |
25 | | -} |
| 8 | +* [Index.cshtml](./CS/AspNetCoreDashboard/Pages/Index.cshtml) |
| 9 | +* [_Layout.cshtml](./CS/AspNetCoreDashboard/Pages/_Layout.cshtml#L12-L38) |
| 10 | +* [DashboardUtils.cs](./CS/AspNetCoreDashboard/Code/DashboardUtils.cs#L18-L22) |
| 11 | +<!-- default file list end --> |
26 | 12 |
|
27 | | -function onItemMasterFilterStateChanged(dashboardControl, e) { |
28 | | -if (e.itemName === 'gridDashboardItem1') { |
29 | | -var viewerApi = dashboardControl.findExtension('viewerApi'); |
30 | | -var filterValues = viewerApi.getCurrentFilterValues(e.itemName); |
31 | | -if (filterValues) { |
32 | | -var itemData = viewerApi.getItemData(e.itemName); |
33 | | -var axisPoint = filterValues[0].getAxisPoint(); |
34 | | -var slice = itemData.getSlice(axisPoint); |
35 | | -var productIdMeasure = slice.getMeasures().filter( m => m.dataMember === 'ProductID')[0]; |
36 | | -var productId = slice.getMeasureValue(productIdMeasure.id).getValue(); |
| 13 | +## Example Structure |
37 | 14 |
|
38 | | -// Send a ProductId value to the server using Request Headers |
39 | | -dashboardControl.remoteService.headers = { 'ProductId' : productId}; |
40 | | -// Refresh the Chart Dashboard Item |
41 | | -dashboardControl.refresh(['chartDashboardItem1']); |
42 | | -} |
43 | | -} |
44 | | -} |
45 | | -``` |
| 15 | +The dashboard in the example has three items: |
| 16 | +- The "Products" grid |
| 17 | +- The "Sales per Product" chart |
| 18 | +- The "Orders" grid |
46 | 19 |
|
47 | | -```cs |
48 | | -//... |
49 | | -var contextAccessor = serviceProvider.GetService<IHttpContextAccessor>(); |
50 | | -configurator.CustomParameters += (s, e) => { |
51 | | -var value = Convert.ToInt32(contextAccessor?.HttpContext?.Request.Headers["ProductId"].FirstOrDefault()); |
52 | | -e.Parameters.Add(new DashboardParameter("ProductIdParameter", typeof(int), value)); |
53 | | -}; |
54 | | -//... |
55 | | -``` |
| 20 | + |
56 | 21 |
|
57 | | -<!-- default file list --> |
58 | | -*Files to look at*: |
| 22 | +All items are bound to different data sources. The "Products" grid item [filters](https://docs.devexpress.com/Dashboard/117060/web-dashboard/create-dashboards-on-the-web/interactivity/master-filtering) the "Sales per Product" chart values. |
59 | 23 |
|
60 | | -* [Index.cshtml](./CS/AspNetCoreDashboard/Pages/Index.cshtml) |
61 | | -* [_Layout.cshtml](./CS/AspNetCoreDashboard/Pages/_Layout.cshtml) |
62 | | -* [DashboardUtils.cs](./CS/AspNetCoreDashboard/Code/DashboardUtils.cs) |
63 | | -<!-- default file list end --> |
| 24 | +The selected master filter value is obtained on the client. The [headers](https://docs.devexpress.com/Dashboard/js-DevExpress.Dashboard.AjaxRemoteService#js_devexpress_dashboard_ajaxremoteservice_headers) property is used to pass the value to the server and change the parameter to filter the chart's data source. The [DashboardControl.refresh](https://docs.devexpress.com/Dashboard/js-DevExpress.Dashboard.DashboardControl?p=netframework#js_devexpress_dashboard_dashboardcontrol_refresh) method updates the chart item on the client side. |
64 | 25 |
|
65 | 26 | ## Documentation |
66 | 27 |
|
67 | | -* [Master Filtering](https://docs.devexpress.com/Dashboard/117060/web-dashboard/create-dashboards-on-the-web/interactivity/master-filtering) |
68 | | -* [Manage an In-Memory Data Cache](https://docs.devexpress.com/Dashboard/400983/web-dashboard/dashboard-backend/manage-an-in-memory-data-cache) |
| 28 | +- [Master Filtering](https://docs.devexpress.com/Dashboard/117060/web-dashboard/create-dashboards-on-the-web/interactivity/master-filtering) |
| 29 | +- [Manage an In-Memory Data Cache](https://docs.devexpress.com/Dashboard/400983/web-dashboard/dashboard-backend/manage-an-in-memory-data-cache) |
| 30 | +- [Dashboard Parameters](https://docs.devexpress.com/Dashboard/117062/web-dashboard/create-dashboards-on-the-web/data-analysis/dashboard-parameters) |
| 31 | + |
0 commit comments