We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to use dedicated filter area in dashboard?

Filter panel allows you to view the filter options in a dedicated area of dashboard viewer instead of showing in the visualization region. By doing so, other major visualization widgets have enough space to accommodate. You can configure the filter using “Configure Filter Panel” option in dashboard designer.

Please find the below steps to move widgets from dashboard design area to the filter panel,

Step 1: Open the designed dashboard based on your requirement. Here we have took "Northwind Analysis" dashboard for illustration purpose. In this dashboard, "Product Category" (combo box) widget is filter widget.

A screenshot of a social media post

Description generated with very high confidence

 

Step 2: Remove the filter widgets from the canvas, which you want to showcase in filter panel and click "Configure Filter Panel" in toolbar.

A screenshot of a cell phone

Description generated with very high confidence

Step 3: Add the removed widgets into the filter panel. Here in this example, we have removed the "Product Category" (bound with Category Name) filter widget. So, we have added this into the filter panel now.

A screenshot of a cell phone

Description generated with very high confidence

Step 4: Next move to "Dashboard Filters Configuration" window, where all the filter widgets created in filter panel will be listed, to set the master-slave actions. Here, for the master widget "CategoryName", we have set the slave widgets as "Orders placed by countries" and "Top products by orders widget". Now, if we make any change in the master widget, slave widget will be automatically updated.

A screenshot of a social media post

Description generated with very high confidence

Step 5: Further, click the "Update" button and click "Preview" dashboard.

Step 6: Go to the preview page and you can see the filter icon at the top-right corner.

A screenshot of a cell phone

Description generated with high confidence

Step 7: Click the filter icon and it will open the filter panel in the webpage, displaying all the configured filters.

Before applying filter:

A screenshot of a cell phone

Description generated with very high confidence

After applying filter:

A screenshot of a cell phone

Description generated with very high confidence

Above steps from 1 to 7 illustrate the procedure to move the filter widgets into filter panel of the existing dashboard reports. Now let’s see, how to create a dashboard with filter panel from scratch.

Step 8: Add the required widgets in the dashboard. For example, consider that we have added chart and grid widgets with data.

Step 9: Go to filter panel window and drop necessary fields. Example: We have added 3 fields like in the below image.

A screenshot of a cell phone

Description generated with high confidence

 

Step 10: Next move to "Dashboard Filters Configuration" window, where all the filter widgets created in filter panel will be listed, to set the master-slave actions. Here we have set chart widget as a slave for OrderId (first screen-shot below) and Grid widget as slave for ShipCity and OrderDate (second screen-shot below).

Image 1:

A screenshot of a cell phone

Description generated with very high confidence

Image 2:

A screenshot of a cell phone

Description generated with very high confidence

 

Step 11: Go to the preview page and you can see the filter icon at the top-right corner. On clicking, it will display the filter widgets.

A screenshot of a social media post

Description generated with very high confidence

Step 12: Change any value in OrderId (master), it will automatically affect the data in Chart widget (slave) like in the below image.

A screenshot of a social media post

Description generated with very high confidence

Step 13: Change any value in ShipCity or OrderDate (master), it will automatically affect the data in Grid widget (slave) like in the below image.

A screenshot of a social media post

Description generated with very high confidence

Step 14: If there are no records, while filtering data, the widget will display message like "There is no data to be displayed".

A screenshot of a social media post

Description generated with very high confidence

 

For more reference check the below link as well,

https://help.syncfusion.com/dashboard-platform/dashboard-designer/compose-dashboard/configuring-dashboard-filter-panel

https://blog.syncfusion.com/post/filter-panel-for-dashboards.aspx

 

Article ID: Published Date: Last Revised Date: Platform: Control:
9160 08/16/2018 08/16/2018 Dashboard Platform Dashboard Designer
Did you find this information helpful?
Add Comment
You must log in to leave a comment

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon