ejDashboardViewer

Dashboard Viewer allows you to visualize the dashboard that was published in Dashboard Server or deployed in local physical path, opened through Dashboard Designer and run, navigating to specific URL in web browser. Certain options to widgets that have been enabled during design time like Maximize button, CSV, Excel & Image export options can be availed at run time through Dashboard Viewer. Also, you can export entire dashboard itself to image.

Syntax

  • js
  • $(element).ejDashboardViewer()

    Example

  • js
  • <div id="container"></div> 
        <script> 
        // Create Dashboard 
        $('#container').ejDashboardViewer(); 
        </script>

    Requires

    • module:jquery-1.10.2.min.js

    • module:jquery.easing.1.3.min.js

    • module:ej.dashboardViewer.all.min.js

    Members

    accessToken string

    It holds the user token generated at Dashboard Server and it is used for embedding the dashboard which is available in Dashboard Server.

    Default value

  • ""
  • Example

  • js
  • $("#container").ejDashboardViewer({
         accessToken:""
         });

    allowComment boolean

    Adds a comment icon to Dashboard and also the Widgets in the Dashboard.

    Default value

  • false
  • Example

  • js
  • $("#container").ejDashboardViewer({
         allowComment:true
         });

    autoRefreshSettings object

    The auto refresh allows you to configure the scheduled refreshing process of the dashboard. It is used to refresh the data, based on the specified time. Either the whole dashboard or specific widgets in the dashboard can be refreshed automatically.

    autoRefreshSettings.tabName string

    Specifies to refresh the given name of the dashboard.

    Default value

  • null
  • Example

    The following code snippet illustrates auto refreshing of tab name in multi-tabbed dashboard:

  • js
  • $("#container").ejDashboardViewer({  
           enableAutoRefresh:true,  
           autoRefreshSettings:[{
                 tabName:"Worldwide Car Sales Random data"  // set dashboard name
                 }]
         });

    autoRefreshSettings.tabIndex number

    Specifies to refresh the given tab index of the dashboard, and the default value 0 indicates the first tab of the dashboard.

    Default value

  • 0
  • Example

    The following code snippet illustrates auto refreshing of tab index item in multi-tabbed dashboard:

  • js
  • $("#container").ejDashboardViewer({ 
           enableAutoRefresh:true,   
           autoRefreshSettings:[{
                 tabIndex:1  // set dashboard tab index value, 1 indicates the second tab dashboard
                 }]
         });

    autoRefreshSettings.intervalSettings object

    Specifies the time interval based on the mode type for auto refreshing of data. You can set the time interval settings by using the mode type(“Hourly, Daily, Weekly, Monthly, and Yearly”) and set the corresponding schedule settings depends on the mode type.

    For hourlySchedule API : The dashboard or widget will be refreshed in the specified time interval in number of hours, minutes, and seconds. You can set the time interval value maximum of hours-99, minutes-999 and seconds-9999.

    For DailySchedule API : The dashboard or widget will be refreshed in the specified number of days. If you specify 2 days once to refresh the dashboard or widget, then the data will be refreshed on 12PM at end of the total days.

    For weeklySchedule API : The dashboard or widget will be refreshed in the given week days in the specified number of weeks. Week days value is arranged in this specific order [Sunday-Saturday —> 1-7] to refresh the data.

    For monthlySchedule API : The dashboard or widget will be refreshed in the given day of the specified number of months. If you need to refresh the dashboard or widgets in the last day of [any] month, then set the day value as 32. The month value is arranged in this specific order [January-December —> 1-12] to refresh the data.

    For yearlySchedule API: The dashboard or widget will be refreshed in the given day of the month in the specified number of years.

    Default value

  • {}
  • Example

    This example illustrates auto refresh interval settings for without multi tabbed dashboard:

    Code snippet for hourlySchedule API interval settings:

  • js
  • $("#container").ejDashboardViewer({    
           enableAutoRefresh:true, 
           autoRefreshSettings:{
                 intervalSettings: {
                            mode: "Hourly",                        
                            hourlySchedule: {
                                hours: 0,   // Default value is 0
                                minutes: 0, // Default value is 0
                                seconds: 30 // Default value is 30
                            }
                 }
           }
         });

    Code snippet for dailySchedule API interval settings:

  • js
  • $("#container").ejDashboardViewer({    
           enableAutoRefresh:true, 
           autoRefreshSettings:{
                 intervalSettings: {
                            mode: "Daily",                        
                            dailySchedule: {
                                days: 1     // Default value is 1
                            }
                 }
           }
         });

    Code snippet for weeklySchedule API interval settings:

  • js
  • $("#container").ejDashboardViewer({    
           enableAutoRefresh:true, 
           autoRefreshSettings:{
                 intervalSettings: {
                            mode: "Weekly",                        
                            weeklySchedule: {
                                weeks: 1,    // Default value is 1
                                weekDay: [1] // Default value is [1]
                            }
                 }
           }
         });

    Code snippet for monthlySchedule API interval settings:

  • js
  • $("#container").ejDashboardViewer({    
           enableAutoRefresh:true, 
           autoRefreshSettings:{
                 intervalSettings: {
                            mode: "Monthly",                        
                            monthlySchedule: {
                                day: 1,     // Default value is 1
                                months: 1   // Default value is 1
                            }
                 }
           }
         });

    Code snippet for yearlySchedule API interval settings:

  • js
  • $("#container").ejDashboardViewer({    
           enableAutoRefresh:true, 
           autoRefreshSettings:{
                 intervalSettings: {
                            mode: "Yearly",                        
                            yearlySchedule: {
                                years: 1,   // Default value is 1
                                day: 1,     // Default value is 1
                                month: 1    // Default value is 1
                            }
                 }
           }
         });

    This example illustrates auto refresh interval settings for multi-tabbed dashboard:

    Code snippet for hourlySchedule, dailySchedule, weeklySchedule, monthlySchedule, and yearlySchedule API interval settings:

  • js
  • $("#container").ejDashboardViewer({    
           enableAutoRefresh:true, 
           autoRefreshSettings:[{
                   tabName:Worldwide Car Sales Random data,
                   tabIndex:0,
                   intervalSettings: {
                            mode: "Hourly",                        
                            hourlySchedule: {
                                hours: 0,   // Default value is 0
                                minutes: 0, // Default value is 0
                                seconds: 30 // Default value is 30
                            }
                 }
           },
           {
                 tabName:Worldwide Car Sales Random data 1,
                 tabIndex:1,
                 intervalSettings: {
                            mode: "Daily",                        
                            dailySchedule: {
                                days: 1     // Default value is 1
                            }
                 }
           },
           {
                 tabName:Worldwide Car Sales Random data 2,
                 tabIndex:2,
                 intervalSettings: {
                            mode: "Weekly",                        
                            weeklySchedule: {
                                weeks: 1,    // Default value is 1
                                weekDay: [1] // Default value is [1]
                            }
                 }
           },
           {
                 tabName:Worldwide Car Sales Random data 3, 
                 tabIndex:3,
                 intervalSettings: {
                            mode: "Monthly",                        
                            monthlySchedule: {
                                day: 1,     // Default value is 1
                                months: 1   // Default value is 1
                            }
                 }
           },   
           {
                 tabName:Worldwide Car Sales Random data 4,
                 tabIndex:4,
                 intervalSettings: {
                            mode: "Yearly",                        
                            yearlySchedule: {
                                years: 1,   // Default value is 1
                                day: 1,     // Default value is 1
                                month: 1    // Default value is 1
                            }
                 }
           }]     
         });

    autoRefreshSettings.isWidgetSpecific boolean

    Specifies to refresh the data of specific widgets alone in the viewer.

    Default value

  • false
  • Example

    Code snippet for auto refresh widget specific item in the without multi-tabbed dashboard.

  • js
  • $("#container").ejDashboardViewer({    
           enableAutoRefresh:true,  
           autoRefreshSettings:{isWidgetSpecific:true}
         });

    Code snippet for auto refresh widget specific item in the multi-tabbed dashboard.

  • js
  • $("#container").ejDashboardViewer({    
           enableAutoRefresh:true,  
           autoRefreshSettings:[{
                   tabName:Worldwide Car Sales Random data,
                   tabIndex:0,      // 0 indicates the first tab dashboard
                   isWidgetSpecific:true
                   }]
         });

    autoRefreshSettings.showWaitingIndicator boolean

    Specifies to show the waiting indicator when the data is refreshed.

    Default value

  • false
  • Example

    The following code snippet for auto refresh shows waiting indicator item in the without multi-tabbed dashboard:

  • js
  • $("#container").ejDashboardViewer({   
           enableAutoRefresh:true,   
           autoRefreshSettings:{showWaitingIndicator:true}
         });

    The following code snippet for auto refresh shows waiting indicator item in the multi-tabbed dashboard:

  • js
  • $("#container").ejDashboardViewer({    
           enableAutoRefresh:true,  
           autoRefreshSettings:[{
                   tabName:Worldwide Car Sales Random data,
                   tabIndex:0,      // 0 indicates the first tab dashboard
                   showWaitingIndicator:true
                   }]
         });

    autoRefreshSettings.trackData boolean

    Specifies whether to trigger refreshing process of data in the dashboard viewer when there is any modifications of data in the data source table.

    Default value

  • false
  • Example

    The following code snippet illustrates auto refreshing of track data item in without multi-tabbed dashboard:

  • js
  • $("#container").ejDashboardViewer({     
            enableAutoRefresh:true,
            autoRefreshSettings:{trackData:true}
         });

    The following code snippet illustrates auto refreshing of track data item in multi-tabbed dashboard:

  • js
  • $("#container").ejDashboardViewer({    
           enableAutoRefresh:true,  
           autoRefreshSettings:[{
                   tabName:Worldwide Car Sales Random data,
                   tabIndex:0,      // 0 indicates the first tab dashboard
                   trackData:true
                   }]
         });

    autoRefreshSettings.widgets array

    Specifies the widget collection that will refresh the data automatically. Set the id as dashboard widget’s Guid.

    For hourlySchedule API : The dashboard or widget will be refreshed in the specified time interval in number of hours, minutes, and seconds. You can set the time interval value maximum of hours-99, minutes-999, and seconds-9999.

    For DailySchedule API : The dashboard or widget will be refreshed in the specified number of days. If you set number of days as 2 to refresh the dashboard or widget, then the data will be refreshed on 12PM at end of the total days.

    For weeklySchedule API : The dashboard or widget will be refreshed in the given week days in the specified number of weeks. Week days value is arranged in this specific order [Sunday-Saturday —> 1-7] to refresh the data.

    For monthlySchedule API : The dashboard or widget will be refreshed in the given day of the specified number of months. If you need to refresh the dashboard or widgets in the last day of [any]month, then set the day value as 32. The month value is arranged in this specific order [January-December —> 1-12] to refresh the data.

    For yearlySchedule API: The dashboard or widget will be refreshed in the given day of the month in the specified number of years.

    Default value

  • []
  • Example

    Example for auto refresh interval settings in the without multi tabbed dashboard:

    To get the widget’s Guid, refer to getCurrentDashboardDetails

    Code snippet for hourlySchedule API interval settings for widget specific data refresh.

  • js
  • $("#container").ejDashboardViewer({    
           enableAutoRefresh:true, 
           autoRefreshSettings:{
                 isWidgetSpecific:true,
                 widgets:[{
                         id:"957d0fa9-0eb1-4b43-8626-d4b8e0f5e625",       // set the Guid of the dashboard widget
                         intervalSettings:{
                            mode: "Hourly",                                          
                            hourlySchedule: {
                                hours: 0,   // Default value is 0
                                minutes: 0, // Default value is 0
                                seconds: 30 // Default value is 30
                            }
                        }
                 }]
           }
         });

    Code snippet for dailySchedule API interval settings for widget specific data refresh.

  • js
  • $("#container").ejDashboardViewer({   
           enableAutoRefresh:true,        
           autoRefreshSettings:{
                 isWidgetSpecific:true,
                 widgets:[{
                         id:"957d0fa9-0eb1-4b43-8626-d4b8e0f5e625",       // set the Guid of the dashboard widget
                         intervalSettings:{
                                 mode:"Daily",
                                 dailySchedule: {
                                    days: 1 // Default value is 1
                            }
                         }
                 }]
           }
         });

    Code snippet for weeklySchedule API interval settings for widget specific data refresh.

  • js
  • $("#container").ejDashboardViewer({   
           enableAutoRefresh:true,   
           autoRefreshSettings:{
                 isWidgetSpecific:true,
                 widgets:[{
                         id:"957d0fa9-0eb1-4b43-8626-d4b8e0f5e625",         // set the Guid of the dashboard widget
                         intervalSettings:{
                                 mode:"Weekly",
                                 weeklySchedule: {
                                    weeks: 1,       // Default value is 1
                                    weekDay: [1]    // Default value is [1]
                            }
                         }
                 }]
           }
         });

    Code snippet for monthlySchedule API interval settings for widget specific data refresh.

  • js
  • $("#container").ejDashboardViewer({   
           enableAutoRefresh:true,   
           autoRefreshSettings:{
                 isWidgetSpecific:true,
                 widgets:[{
                         id:"957d0fa9-0eb1-4b43-8626-d4b8e0f5e625",           // set the Guid of the dashboard widget
                         intervalSettings:{
                                 mode:"Monthly",
                                 monthlySchedule: {
                                    day: 1,     // Default value is 1
                                    months: 1   // Default value is 1
                            }
                         }
                 }]
           }
         });

    Code snippet for yearlySchedule API interval settings for widget specific data refresh.

  • js
  • $("#container").ejDashboardViewer({   
           enableAutoRefresh:true,   
           autoRefreshSettings:{
                 isWidgetSpecific:true,
                 widgets:[{
                         id:"957d0fa9-0eb1-4b43-8626-d4b8e0f5e625",         // set the Guid of the dashboard widget
                         intervalSettings:{
                            mode: "Yearly",                        
                            yearlySchedule: {
                                years: 1,   // Default value is 1
                                day: 1,     // Default value is 1
                                month: 1    // Default value is 1
                            }
                         }
                 }]
           }
         });

    Example for auto refresh interval settings in multi tabbed dashboard:

    The following code snippet illustrates hourlySchedule, dailySchedule, weeklySchedule, monthlySchedule, and yearlySchedule API interval settings:

  • js
  • $("#container").ejDashboardViewer({
    
           enableAutoRefresh:true, 
           autoRefreshSettings:[{
                   tabName:Worldwide Car Sales Random data,
                   tabIndex:0,
                   widgets:[{
                         id:"957d0fa9-0eb1-4b43-8626-d4b8e0f5e625",       // set the Guid of the dashboard widget
                         intervalSettings:{
                            mode: "Hourly",                        
                            hourlySchedule: {
                                hours: 0,   // Default value is 0
                                minutes: 0, // Default value is 0
                                seconds: 30 // Default value is 30
                            }
                         }
                 },
                 {
                         id:"937d0fa9-0eb1-4b43-8626-d4b8e0f5e625",      // set the Guid of the dashboard widget
                         intervalSettings:{
                            mode: "Daily",                        
                            dailySchedule: {
                                days: 1     // Default value is 1
                            }
                         }
                 },
                 {
                         id:"878d0fa9-0eb1-4b43-8626-d4b8e0f5e625",       // set the Guid of the dashboard widget
                         intervalSettings:{
                            mode: "Weekly",                        
                            weeklySchedule: {
                                weeks: 1,    // Default value is 1
                                weekDay: [1] // Default value is [1]
                            }
                         }
                 }]               
           },
           {
                 tabName:Worldwide Car Sales Random data 1,
                 tabIndex:1,
                 widgets:[{
                         id:"957d0fa9-0eb1-4b43-8626-d4b8e0f5e625",       // set the Guid of the dashboard widget
                         intervalSettings:{
                            mode: "Monthly",                        
                            monthlySchedule: {
                                day: 1,     // Default value is 1
                                months: 1   // Default value is 1
                            }
                         }
                 },
                 {
                         id:"932d0fa9-0eb1-4b43-8626-d4b8e0f5e625",       // set the Guid of the dashboard widget
                         intervalSettings:{
                            mode: "Yearly",                        
                            yearlySchedule: {
                                years: 1,   // Default value is 1
                                day: 1,     // Default value is 1
                                month: 1    // Default value is 1
                            }
                         }
                 }]                     
           }]     
         });

    cacheSettings object

    Contains the settings for customization of client side caching.

    cacheSettings.capacity number

    Specifies the number of requests to be cached. If the request count exceeds the capacity old cached items will be replaced with new one’s.

    Default value

  • 10
  • Example

  • js
  • $("#container").ejDashboardViewer({     
           enableClientSideCache:true,  
            cacheSettings:{capacity:50}
         });

    cacheSettings.cleanupInterval number

    Specifies the interval in minutes

    Default value

  • 5
  • Example

  • js
  • $("#container").ejDashboardViewer({
           enableClientSideCache:true,
           cacheSettings:{cleanupInterval:20}
         });

    cacheSettings.enableAutoCleanup boolean

    Specifies whether to automatically clear the client side cached data in specific intervals.

    Default value

  • true
  • Example

  • js
  • $("#container").ejDashboardViewer({   
           enableClientSideCache:true
           cacheSettings:{enableAutoCleanup:false}
         });

    canLoadDataOffline boolean

    Specifies whether to load the offline data.

    Default value

  • false
  • Example

  • js
  • $("#container").ejDashboardViewer({   
           canLoadDataOffline:false
         });

    commentSettings object

    Comment settings allows you to enable commenting for the Dashboard and/or its individual widgets. You can add the comment for dashboard and each widgets which is available in the dashboard. The user can add more information about the dashboard and the widgets.

    commentSettings.isDashboardCommented boolean

    Used to set the comment icon for the dashboard. If it is commented, then the information will be available by clicking the comment icon in the Dashboard Viewer.

    Default value

  • false
  • Example

  • js
  • $("#container").ejDashboardViewer({
         commentSettings:{isDashboardCommented:true}
         });

    commentSettings.isWidgetCommented boolean

    Used to set the comment icon for the widgets in the dashboard. If it is commented,then the information will be shown by clicking the comment icon.

    Default value

  • false
  • Example

  • js
  • $("#container").ejDashboardViewer({
         commentSettings:{isWidgetCommented:true}
         });

    commentSettings.widgets array

    List of widgets collection will be available in the array (widget id). Commented widget list will be available in the array with widget id.

    Default value

  • []
  • Example

  • js
  • $("#container").ejDashboardViewer({
           enableComment:true,
           commentSettings:{ isWidgetCommented:true, widgets:["Chart_1", "Grid_1"]}    
         });

    cssClass string

    Sets the root CSS class for Dashboard Viewer theme, which is used for customizing the styling of Dashboard Viewer.

    Default value

  • ””
  • Example

  • js
  • $("#container").ejDashboardViewer({
         cssClass: "e-CustomTheme"
         });

    customThemeSettings string

    Used to customize the colors and fonts of dashboard based on given settings.

    Default value

  • ""
  • Example

  • js
  • $("#container").ejDashboardViewer({  
           enableCustomTheming:true,     
         customThemeSettings:ej.dashboardViewer.customTheme
         });

    dashboardData string

    Sets the layout information and all the widget data present in the current dashboard in the form of string.
    To get dashboard data value, refer to getDashboardData

    Default value

  • null
  • Example

  • js
  • var dashboardObj = $("#dashboard").data("ejDashboardViewer");
    
         $("#container").ejDashboardViewer({   
            dashboardData: dashboardObj.getDashboardData() // Get the complete information of the currently rendered dashboard
         });

    dashboardParameterSettings object

    dashboardParametersSettings API is used to update the dashboard parameter collection details in viewer. Using this we can modify the design time dashboard parameter settings in viewer.

    dashboardParameterSettings.data array

    List of dashboard parameter data collection will be available in the array (data). Dashboard Parameter list will be available in the array with data.

    Default value

  • []
  • Example

  • js
  • $("#dashboard").ejDashboardViewer(
    		{
    	            dashboardParameterSettings: {
                         "showIcon":true, // to show or hide the dashboard parameter icon
                         "data":[{                         
                             "parameterName":"CustomerId",                        
                             "showInParameterDialog":true,
                             "showInPromptDialog":false,
                             "value":"TRADH",                         
                             }]
                     },
            }
        );

    dashboardParameterSettings.data.value

    array

    The value holds single or collection of parameter values, which replaces the default value collection in the parameter.

    Default value

  • []
  • Example

  • js
  • $("#dashboard").ejDashboardViewer(
    		{
    	            dashboardParameterSettings: {
                         "showIcon":true, // to show or hide the dashboard parameter icon
                         "data":[{                         
                             "parameterName":"CustomerId",                        
                             "showInParameterDialog":true,
                             "showInPromptDialog":false,
                             "value":["TRADH", "HANAR", "FALKO"],                         
                             }]
                     },
            }
        );

    string

    The value contains the relative date values as input to the parameter to filter the data with date range.

    Default value

  • ""
  • Example

  • js
  • $("#dashboard").ejDashboardViewer(
    		{
    	            dashboardParameterSettings: {
                         "showIcon":true, // to show or hide the dashboard parameter icon
                         "data":[{                         
                             "parameterName":"OrderDate",                        
                             "showInParameterDialog":true,
                             "showInPromptDialog":false,
                             "value":"Last 1 Week(s)",                         
                             }]
                     },
            }
        );

    For example, if you configure Last 1 Week as filter, you will get the last 1 week data in that widget. After a week, it will show you the previous 1 week data from the date you are viewing. Through this, you will no longer required to set the filter statically and change week by week to see the previous week results.

    The following are the different possibilities and use case on relative date values in the dashboard parameter value:

    Range Type Examples
    Current
    Previous
    Succeeding
    Last
    Next
    Past
    Upcoming
    Year(s)
    Quarter(s)
    Month(s)
    Week(s)
    Day(s)
    Hour(s)
    Current Year(s), Previous Month(s), Succeeding Week(s), Last 3 Quarter(s), Next 1 Year(s), Past 2 Week(s), Upcoming 1 Week, Tomorrow, Today, Yesterday
    Year to date - Year to date
    Quarter to date - Quarter to date
    Month to date - Month to date
    Week to date - Week to date

    object

    The value also holds the date values as input by representing the start and end dates.

    Default value

  • {}
  • dashboardParameterSettings.data.value.start string

    Start date holds the date value in the yyyy/MM/dd format from which the parameter can filter the data with respect to the date-time column assigned to, via the stored procedure data.

    Default value

  • ""
  • dashboardParameterSettings.data.value.end string

    End date holds the date value in the yyyy/MM/dd format from which the parameter can filter the data with respect to the date-time column assigned to, via stored procedure data.

    Default value

  • ""
  • Example

  • js
  • $("#dashboard").ejDashboardViewer(
    		{
    	            dashboardParameterSettings: {
                         "showIcon":true, // to show or hide the dashboard parameter icon
                         "data":[{                         
                             "parameterName":"OrderDate",                        
                             "showInParameterDialog":true,
                             "showInPromptDialog":false,
                             "value": {"start" : "1996/09/21", "end" : "2018/02/13"},  // DateTime string should be in the format yyyy/MM/dd                
                             }]
                     },
            }
        );

    dashboardParameterSettings.showIcon boolean

    Used to set the dashboard parameter icon for the dashboard. If icon set in visible state, the dashboard parameter data information will be available in dashboard parameter dialog by clicking the dashboard parameter icon in the Dashboard Viewer.

    Default value

  • true
  • Example

  • js
  • $("#container").ejDashboardViewer({
         dashboardParameterSettings:{showIcon:false}
         });

    dashboardPath string

    Sets the Dashboard file path (SYDX). This API can hold absolute path of SYDX file in disk or the URL of SYDX file hosted in a web server (This link should return the SYDX file as stream)

    Default value

  • ””
  • Example

  • js
  • $("#container").ejDashboardViewer({
         dashboardPath: "C:\\Documents\\Sample Dashboard.sydx"
         });

    enableAutoRefresh boolean

    Enables the refreshing of dashboard data on specific intervals automatically.

    Default value

  • false
  • Example

  • js
  • $("#container").ejDashboardViewer({
         enableAutoRefresh:true
         });

    enableClientSideCache boolean

    Sets the caching of interaction data of Dashboard Viewer in browser.

    Default value

  • false
  • Example

  • js
  • $("#container").ejDashboardViewer({
         enableClientSideCache:true
         });

    enableCustomTheming boolean

    Specifies whether to apply the custom theme to be applied to the dashboard.

    Default value

  • false
  • Example

  • js
  • $("#container").ejDashboardViewer({
         enableCustomTheming:true
         });

    enableDashboardScaling boolean

    Specifies whether to render dashboard based on the scaling factor (resolution).

    Default value

  • false
  • Example

  • js
  • $("#container").ejDashboardViewer({
         enableDashboardScaling:true
         });

    enableFilterOverview boolean

    Specifies whether to show the filter overview in Dashboard Viewer

    Default value

  • true
  • Example

  • js
  • $("#container").ejDashboardViewer({
         enableFilterOverview:false
         });

    enableServerSideCache boolean

    Sets the caching of data in Dashboard Service.

    Default value

  • false
  • Example

  • js
  • $("#container").ejDashboardViewer({
         enableServerSideCache:true
         });

    enableViewData boolean

    Specifies enable or disable the view data support in Dashboard Viewer.

    Default value

  • true
  • Example

  • js
  • $("#container").ejDashboardViewer({
         enableViewData: false
         });

    enableWidgetMode boolean

    Specifies enable or disable the widget mode settings in Dashboard viewer.

    Default value

  • false
  • Example

  • js
  • $("#container").ejDashboardViewer({
         enableWidgetMode:false
         });

    favoriteSettings object

    Specifies the favorite settings of the dashboard viewer.

    favoriteSettings.enabled boolean

    Specifies whether to enable or disable the favorite icon in favorite settings.

    Default value

  • false
  • Example

  • js
  • $("#container").ejDashboardViewer({
         favoriteSettings:{enabled:false}
         });

    favoriteSettings.isFavorite boolean

    Specifies whether to enable or disable the favorite icon in favorite settings.

    Default value

  • false
  • Example

  • js
  • $("#container").ejDashboardViewer({
         favoriteSettings:{isFavorite:false}
         });

    filterOverviewSettings object

    The filter overview shows the filter’s applied in the current view. using the filter over view you can clear the applied filters one after the other, or you may clear all the filters.

    filterOverviewSettings.showSaveAsIcon boolean

    Specifies whether to Show or hide the save as icon for saving the applied filter as view.

    Default value

  • false
  • Example

  • js
  • $("#container").ejDashboardViewer({
         filterOverviewSettings:{showSaveAsIcon:false}
         });

    filterOverviewSettings.showSaveIcon boolean

    Specifies whether to Show or hide the save icon for saving the applied filter as view.

    Default value

  • false
  • Example

  • js
  • $("#container").ejDashboardViewer({
         filterOverviewSettings:{showSaveIcon:false}
         });

    filterOverviewSettings.showViewSavedFilterIcon boolean

    Enables or disables the filter overview View Saved filter icon in Dashboard Viewer.

    Default value

  • false
  • Example

  • js
  • $("#container").ejDashboardViewer({
         filterOverviewSettings:{showViewSavedFilterIcon:false}
         });

    filterOverviewSettings.viewId string

    Contains Id attribute of the saved filter view, used to maintain this as a unique key for working in back end.

    Default value

  • ""
  • Example

  • js
  • $("#container").ejDashboardViewer({
         filterOverviewSettings:{viewId:""}
         });

    filterOverviewSettings.viewName string

    Name of the saved filter view, this name will be displayed as title for the Applied filters list.

    Default value

  • ""
  • Example

  • js
  • $("#container").ejDashboardViewer({
         filterOverviewSettings:{viewName:""}
         });

    filterPanelSettings object

    Filter panel settings allows you to apply filters in the dashboard viewer.

    filterPanelSettings.state string

    Specifies to show or hide the filter panel when the state is expanded or collapsed. The size of the dashboard will adjust on its own when the filter panel gets opened/hidden in the viewer.

    Default value

  • collapsed
  • Example

    The following code snippet illustrates expanded state of filter panel while rendering the dashboard:

  • js
  • $("#container").ejDashboardViewer({
         filterPanelSettings:{state:expanded}   // expanded - show the filter panel while rendering the dashboard
         });

    filterPanelSettings.filterPanelId string

    Contains the id attribute of the external div, where the filter panel needs to be rendered.

    Default value

  • ""
  • Example

  • js
  • $("#container").ejDashboardViewer({
         filterPanelSettings:{filterPanelId:""}
         });

    filterPanelSettings.showCloseIcon boolean

    Enables or disables the filter panel close icon in the dashboard viewer.

    Default value

  • true
  • Example

  • js
  • $("#container").ejDashboardViewer({
         filterPanelSettings:{showCloseIcon:true}
         });

    filterPanelSettings.showHeader boolean

    Enables or disables the filter panel header icon in the dashboard viewer.

    Default value

  • true
  • Example

  • js
  • $("#container").ejDashboardViewer({
         filterPanelSettings:{showHeader:true}
         });

    filterPanelSettings.showIcon boolean

    Specifies whether to show or hide the filter panel toggle icon in the dashboard viewer.

    Default value

  • true
  • Example

  • js
  • $("#container").ejDashboardViewer({
         filterPanelSettings:{showIcon:true}
         });

    filterParameters string

    Specifies the filter that has to be applied to the dashboard.

    Default value

  • null
  • Example

  • js
  • $("#container").ejDashboardViewer({
         filterParameters: "Continent=Asia,Africa,Europe"
         });

    interactionSettings object

    Interaction settings contain history maintenance property to enable or disable history maintenance in the dashboard viewer.

    interactionSettings.multiSelectionInterval number

    The “multiSelectionInterval” property is used to set the time interval for performing multi selection in widgets filter of the dashboard viewer. The default value of this property is 500 milliseconds.

    Default value

  • 500
  • Example

  • js
  • $("#container").ejDashboardViewer({
         interactionSettings:{multiSelectionInterval:500} // Default values is 500
         });

    interactionSettings.allowHistoryMaintenance boolean

    This property Used to store the current state of the dashboard in browser session storage.

    Default value

  • true
  • Example

  • js
  • $("#container").ejDashboardViewer({
         interactionSettings:{allowHistoryMaintenance:false}
         });

    interactionSettings.handleHistoryEvent boolean

    This property Used to restrict the browser back and forth button action.

    Default value

  • true
  • Example

  • js
  • $("#container").ejDashboardViewer({
         interactionSettings:{handleHistoryEvent:false}
         });

    localeSettings object

    Specifies the locale of the dashboard viewer.

    localeSettings.culture string

    Specifies the language to the applied to the dashboard viewer.

    Default value

  • ""
  • Example

  • js
  • $("#container").ejDashboardViewer({
         localeSettings:{culture:"en-US"}
         });

    localeSettings.dateFormat string

    It is used to convert the date value to given date format in dashboard viewer.

    Default value

  • ""
  • Example

  • js
  • $("#container").ejDashboardViewer({
         localeSettings:{dateFormat:"yyyy/MM/DD"}
         });

    localeSettings.resourcePath string

    Specifies the path of the resource file present in the server or else URL path of the xml resource file.

    Default value

  • ""
  • Example

    The following code snippet illustrates to specifies the localization server path:

  • js
  • $("#container").ejDashboardViewer({
         localeSettings:{resourcePath:"D:\Dashboard\Trunk\Samples\Common\Resources\"}
         });

    The following code snippet illustrates to specifies the localization xml resource URL path:

  • js
  • $("#container").ejDashboardViewer({
         localeSettings:{resourcePath:"https://dashboardsdk.syncfusion.com//Resources//Resource.en-US.xml"}
         });

    localeSettings.timeFormat string

    It is used to convert the date value to given time format in dashboard viewer.

    Default value

  • ""
  • Example

  • js
  • $("#container").ejDashboardViewer({
         localeSettings:{timeFormat:"HH:MM:SS"}
         });

    responsiveSettings object

    Specifies the responsiveness of the dashboard viewer.

    responsiveSettings.showExport boolean

    Specifies whether to show or hide the Export icon in responsive settings.

    Default value

  • false
  • Example

  • js
  • $("#container").ejDashboardViewer({
         responsiveSettings:{showExport:false}
         });

    responsiveSettings.showMaximize boolean

    Specifies whether to show or hide the maximize icon in responsive settings.

    Default value

  • false
  • Example

  • js
  • $("#container").ejDashboardViewer({
         responsiveSettings:{showMaximize:false}
         });

    scalingFactor nullable<int>

    Sets the scaling factor, which helps to render dashboard based on the resolution given, only if enableDashboardScaling sets to true.

    Default Value: null

    Example

  • js
  • $("#container").ejDashboardViewer({
         scalingFactor: null
         });

    selectedTabGuid string

    Sets the guid that indicates the selected Guid dashboard while rendering multiple dashboards in viewer.

    Default value

  • ""
  • Example

  • js
  • $("#container").ejDashboardViewer({
         selectedTabGuid:""
         });

    selectedTabIndex number

    Sets a index value that indicates the selected index dashboard with the given index position while rendering multiple dashboards.

    Default Value: 0

    Example

  • js
  • $("#container").ejDashboardViewer({
         selectedTabIndex:0
         });

    selectedTabName string

    Sets the dashboard name that indicates the selected tab with the given selected dashboard while rendering multiple dashboards in viewer.

    Default value

  • ""
  • Example

  • js
  • $("#container").ejDashboardViewer({
         selectedTabName:""
         });

    serviceUrl string

    Sets the URL of the Dashboard Service that will be used for processing the viewed Dashboard file.

    Default value

    The default value of the URL is Empty.

  • ””
  • Example

  • js
  • $("#container").ejDashboardViewer({
         serviceUrl:"http://localhost:[port]/service.svc"
         });

    showGetLinkIcon boolean

    Specifies whether to show or hide the Get Link icon in viewer.

    Default value

  • true
  • Example

  • js
  • $("#container").ejDashboardViewer({
         showGetLinkIcon:true
         });

    showTab boolean

    Specifies whether to show or hide the tabs when using multiple dashboards in viewer.

    Default value

  • true
  • Example

  • js
  • $("#container").ejDashboardViewer({
         showTab:true
         });

    size object

    Sets the height and width of the Dashboard Viewer.

    size.height string

    sets the Height of the Dashboard Viewer in % or in pixels.

    Default Value

  • ””
  • Example

  • html
  • $("#dashboard").ejDashboardViewer({size{height:'800'}});

    size.width string

    sets the Width of the Dashboard Viewer in % or in pixels.

    Default Value

  • ””
  • Example

  • html
  • $("#dashboard").ejDashboardViewer({size{width:'800'}});

    tabDetails array

    Sets the tab names to be updated in the list of tab details(tabId, displayName) of a dashboard in an array.

    Default value

  • []
  • Example

  • js
  • $("#container").ejDashboardViewer({
           tabDetails:[ { tabId: "", displayName: "" } ]   
         });

    updatePageTitle boolean

    This enables the automatic updation of page title based on the filter applied in dashboard.

    Default value

  • false
  • Example

  • js
  • $("#container").ejDashboardViewer({
         updatePageTitle:true
         });

    widgetActionSettings array

    Widget Action Settings contains the widget guid and collection of action settings value like type and array of action data to perform the navigation, master interaction and drilldown action in the dashboard viewer.

    widgetActionSettings.widgetId string

    Specifies the widget Guid.

    Default value

  • ""
  • Example

    To get the widget’s Guid, refer to getCurrentDashboardDetails

  • js
  • $("#container").ejDashboardViewer({
         widgetActionSettings:[{
                 widgetId:"957d0fa9-0eb1-4b43-8626-d4b8e0f5e625"        // set the Guid of the dashboard widget
                 }]
         });

    widgetActionSettings.actionSettings array

    Specifies the collection of action type and actions list to do customize the widget action for the given widgets.

    widgetActionSettings.actionSettings.type string

    Specifies the type of mouse action type like “Click”, “DoubleClick”, RightClick act as “ContextMenu”.

    Default value

  • ""
  • Example

  • js
  • $("#container").ejDashboardViewer({
         widgetActionSettings:[{
                 actionSettings:[{
                         [type:"Click"]
                     }]
                 }]
         });

    widgetActionSettings.actionSettings.actions array

    Specifies the action / list of actions to be shown i.e. Filter / Linking / DrillDown. If more than one item is given then instead of triggering the action, to set the actionSettings type as context menu.

    Default value

  • []
  • Example

    To get the widget’s Guid, refer to getCurrentDashboardDetails

  • js
  • $("#container").ejDashboardViewer({
         widgetActionSettings:[{
                 widgetId:"957d0fa9-0eb1-4b43-8626-d4b8e0f5e625"            // set the Guid of the dashboard widget
                 actionSettings:[{
                         type:"Click",
                         actions:["Filter"]   // When click the widget data it perform master interaction
                     }]
                 }
                 {
                 widgetName:"923f0fa9-0eb1-4b43-8626-d4b8e0f5e625"          // set the Guid of the dashboard widget
                 actionSettings:[{
                         type:"DoubleClick",
                         actions:["Linking"]  // When double click the widget data it perform linking
                     }]
                 }
                 {
                 widgetName:"322d0fa9-0eb1-4b43-8626-d4b8e0f5e625"          // set the Guid of the dashboard widget
                 actionSettings:[{
                         type:"ContextMenu",
                         actions:["DrillDown, Filter"]   // When right click the widget data context menu shown with drill down and filter options in the menu
                     }]
                 }]
         });

    widgetModeSettings object

    Specifies the widget Mode of the dashboard viewer.

    widgetModeSettings.id string

    Get the widget id attribute which is loaded in Dashboard Viewer.

    Default value

  • ""
  • Example

  • js
  • $("#container").ejDashboardViewer({
         widgetModeSettings:{id:"dashboardviewer"}
         });

    widgetModeSettings.name string

    Gets name of the widget which is loaded in Dashboard Viewer.

    Default value

  • ""
  • Example

  • js
  • $("#container").ejDashboardViewer({
         widgetModeSettings:{name:""}
         });

    Methods

    applyComments()

    This method will mark the widgets that are commented or not.

    Following are the parameter that you can pass to this method,

    Parameters Type Description
    commentSettings object Returns the comment settings values are null or not.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div>  
            
            <script>
            // Add the comments to dashboard.
             $("#dashboard").ejDashboardViewer({
               
    	        allowComment: true,
    	        commentSettings: {
                    isDashboardCommented: true,
                    isWidgetCommented: true,
                    widgets: [1]
                }
            });
            var dashboard = $("#dashboard").ejDashboardViewer();
            dashboard.applyComments(true);  
            </script>

    applyCustomTheme()

    This method will apply custom theme to dashboard or widget.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
            <script>
            // Create DashboardViewer
            $("#dashboard").ejDashboardViewer(enableCustomTheming: true);
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.applyCustomTheme(); // add the custom theme to widget.
            </script>
  • html
  • <div id="dashboard" style="height:100%;width:100%"></div>  
            
            <script>
            // add the custom theme to widget.
            $("#dashboard").ejDashboardViewer();
            $("#dashboard").ejDashboardViewer("applyCustomTheme");      
            </script>

    clearAllFilters()

    This method will reset all master filters applied to the dashboard.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
            <script>
            // Create DashboardViewer
            $("#dashboard").ejDashboardViewer();
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.clearAllFilters(); // clear the dashboard filter.
            </script>
  • html
  • <div id="dashboard" style="height:100%;width:100%"></div>  
            
            <script>
            // clear the dashboard filter.
            $("#dashboard").ejDashboardViewer();
            $("#dashboard").ejDashboardViewer("clearAllFilters");      
            </script>

    clearWidgetFilter()

    This method will reset the filter applied by a master widget.

    Following are the parameters that you can pass to this method,

    Parameters Type Description
    id string Specifies the id of the master widget whose filter need to be removed from the dashboard.
    widgetType string Specifies the master widget type such as combo box, chart etc.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
            <script>
            // Create DashboardViewer
            $("#dashboard").ejDashboardViewer();
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.clearWidgetFilter("Chart_1","Chart"); // clear the widget filter.
            </script>

    closeAllWindows()

    This method is used to close all the popups/windows currently opened.Which includes maximize, export, filter overview, description and filter panel windows

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
        <script>
            // Create DashboardViewer        
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.closeAllWindows();
        </script>
  • html
  • <div id="dashboard" style="height:100%;width:100%"></div>  
            
        <script>      
        $("#dashboard").ejDashboardViewer("closeAllWindows");      
        </script>

    closeFilterPanel()

    This method will collapse the filter panel.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
        <script>
            // Create DashboardViewer
            $("#dashboard").ejDashboardViewer();
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.closeFilterPanel(); // collapse the filter panel.
        </script>
  • html
  • <div id="dashboard" style="height:100%;width:100%"></div>  
            
         <script>
            // collapse the filter panel.
            $("#dashboard").ejDashboardViewer();
            $("#dashboard").ejDashboardViewer("closeFilterPanel");      
        </script>

    closeViewDataDialog()

    This method will close the opened view data dialog in the dashboard view.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
        <script>
            // Create DashboardViewer
            $("#dashboard").ejDashboardViewer();
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.closeViewDataDialog(); // close the View Data dialog.
        </script>

    exportToExcel()

    This method will export widget data into excel file.

    Following are the parameters that you can pass to this method:

    Parameters Type Description
    Widget/Dashboard Name string Denotes the name of the Dashboard/Widget.
    filename string Denotes the export Excel Sheet title name.
    fileType string Denotes the Excel file type such as XLSX or XLS.
    hideProgress bool The bool value specifies to Show/hide the loading indicator.
    isWholeDashboard bool The bool value(true/false) that specifies whether to export the whole dashboard or not.
    dashboardCollection array Contain the collection of Multi tab in an array, that specifies which are the tab to be exported from the dashboard.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
            <script>
            // Create DashboardViewer
            $("#dashboard").ejDashboardViewer();
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.exportToExcel("Chart_1", "Worldwide Car Sales Random data", "xlsx",true,false,[]); // export the widget data.
            </script>

    exportToImage()

    This method will export the dashboard or widget in an image.

    Following are the parameters that you can pass to this method:

    Parameters Type Description
    Widget/Dashboard name string Denotes the name of the Dashboard/Widget.
    imageType string Denotes the export image type such as jpg, png etc..
    resolution string Denotes the resolution of the image.
    fileName string Denotes the file name of the exported image.
    title string Denotes the exported image title name.
    hideProgress bool The bool value specifies to Show/hide the loading indicator.
    isWholeDashboard bool The bool value(true/false) that specifies whether to export the whole dashboard or not.
    dashboardCollection array Contain the collection of Multi tab in an array, that specifies which are the tab to be exported from the dashboard.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
            <script>
            // Create DashboardViewer
            $("#dashboard").ejDashboardViewer();
            var dashboard = $("#dashboard").data("ejDashboardViewer");
            dashboard.exportToImage("Chart_1", "jpg", "96", "Worldwide Car Sales Random data", "Worldwide Car Sales (Random data)",false, true,[]); // export the dashboard or widget.
            </script>

    exportToPdf()

    This method will export the dashboard widget into a PDF file.

    Following are the parameters that you can pass to this method:

    Parameters Type Description
    Widget/Dashboard name string Denotes the name of the Dashboard/Widget.
    fileName string Denotes the name of the PDF file.
    pageSize string Denotes the exported PDF page size such as A4,A3 etc.
    title string Denotes the title of the dashboard or widget to be shown in the exported PDF document.
    orientation string Denotes the orientation of the document such as Portrait or landscape.
    hideProgress bool The bool value specifies to Show/hide the loading indicator.
    isWholeDashboard bool The bool value(true/false) that specifies whether to export the whole dashboard or not.
    dashboardCollection array Contain the collection of Multi tab in an array, that specifies which are the tab to be exported from the dashboard.
    widgetCollection array Contain the collection of widgets in an array, that specifies which are the Widget to be exported from the dashboard.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
            <script>
            // Create DashboardViewer
            $("#dashboard").ejDashboardViewer();
            var dashboard = $("#dashboard").data("ejDashboardViewer");
            dashboard.exportToPdf("dashboard","Worldwide Car Sales Random data","A4","Worldwide Car Sales (Random data)","portrait",true,true,[],[Sales by country,Sales by car type]); // export the widget data
            </script>

    getCurrentDashboardDetails()

    This method will returns the widgets information like Widget Title, Widget Subtitle, Widget Description, Widget Id, Widget Guid and Widget Type of the currently active dashboard.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
            <script>
            // Create DashboardViewer
            $("#dashboard").ejDashboardViewer();
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.getCurrentDashboardDetails(); // get the widget info of the current dashboard
            </script>

    getCurrentFilters()

    This method will return the collection of filter applied in the current dashboard view.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
            <script>
            // Create DashboardViewer
            $("#dashboard").ejDashboardViewer();
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.getCurrentFilters(); // get the current filter.
            </script>
  • html
  • <div id="dashboard" style="height:100%;width:100%"></div>  
            
            <script>
            // get the current filter.
            $("#dashboard").ejDashboardViewer();
            $("#dashboard").ejDashboardViewer("getCurrentFilters");      
            </script>

    getCurrentTab()

    This method will return the current tab element.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
            <script>
            // Create DashboardViewer
            $("#dashboard").ejDashboardViewer();
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.getCurrentTab(); // select the current tab.
            </script>
  • html
  • <div id="dashboard" style="height:100%;width:100%"></div>  
            
            <script>
            // select the current tab.
            $("#dashboard").ejDashboardViewer();
            $("#dashboard").ejDashboardViewer("getCurrentTab");      
            </script>

    getCurrentViewUrl()

    This method will return the current view (with applied filters) of the dashboard as a URL.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
        <script>
            // Create DashboardViewer        
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.getCurrentViewUrl();
        </script>
  • html
  • <div id="dashboard" style="height:100%;width:100%"></div>  
            
        <script>      
        $("#dashboard").ejDashboardViewer("getCurrentViewUrl");      
        </script>

    getDashboardData()

    This method will return the layout information and widgets data of the currently rendered dashboard.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
            <script>
            // Create DashboardViewer
            $("#dashboard").ejDashboardViewer();
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.getDashboardData(); // get the detailed information of the rendered dashboard.
            </script>

    getDashboardTabsInfo()

    This method will return the currently active tab data and its meta data.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
            <script>
            // Create DashboardViewer
            $("#dashboard").ejDashboardViewer();
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.getDashboardTabsInfo(); // get the dashboard tab info.
            </script>
  • html
  • <div id="dashboard" style="height:100%;width:100%"></div>  
            
            <script>
            // get the dashboard tab info.
            $("#dashboard").ejDashboardViewer();
            $("#dashboard").ejDashboardViewer("getDashboardTabsInfo");      
            </script>

    getFilterPanel()

    This method will return the filter panel instance. If no filter panel is rendered, it will return null.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
        <script>
            // Create DashboardViewer
            $("#dashboard").ejDashboardViewer();
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.getFilterPanel(); // get the filter panel instance.
        </script>
  • html
  • <div id="dashboard" style="height:100%;width:100%"></div>  
            
            <script>
            // get the filter panel instance.
            $("#dashboard").ejDashboardViewer();
            $("#dashboard").ejDashboardViewer("getFilterPanel");      
        </script>

    getFilterPanelParent()

    This method will return the element where the filter panel instance is bind. If no filter panel is rendered, it will return null.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
        <script>
            // Create DashboardViewer
            $("#dashboard").ejDashboardViewer();
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.getFilterPanelParent(); // get the filter panel parent.
        </script>
  • html
  • <div id="dashboard" style="height:100%;width:100%"></div>  
            
        <script>
            // get the filter panel parent.
            $("#dashboard").ejDashboardViewer();
            $("#dashboard").ejDashboardViewer("getFilterPanelParent");      
        </script>

    getFilterPanelState()

    This method will return the state of filter panel. Whether the filter panel is in open or close state.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
            <script>
            // Create DashboardViewer
            $("#dashboard").ejDashboardViewer();
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.getFilterPanelState(); // get the filter panel state.
            </script>
  • html
  • <div id="dashboard" style="height:100%;width:100%"></div>  
            
            <script>
            //  get the filter panel state.
            $("#dashboard").ejDashboardViewer();
            $("#dashboard").ejDashboardViewer("getFilterPanelState");      
            </script>

    getMasterControlsBySlave()

    This method will get the master controls by slave controls.

    Following are the parameter that you can pass to this method:

    Parameters Type Description
    element string Returns the master widget list for the given widget id.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
            <script>
            // Create DashboardViewer
            $("#dashboard").ejDashboardViewer();
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.getMasterControlsBySlave("Chart_1"); // get the master control.
            </script>

    getWidgetDataByReportName()

    This method will return the data of the given widget based on its ID/name.

    Following are the parameter that you can pass to this method:

    Parameters Type Description
    id string Returns the the given widget data based on its ID.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
            <script>
            // Create DashboardViewer
            $("#dashboard").ejDashboardViewer();
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.getWidgetDataByReportName("ComboBox_2"); // get the widget data by report name.
            </script>

    getWidgetTitle()

    This method will refund the heading/title of the given widget.

    Following are the parameter that you can pass to this method:

    Parameters Type Description
    id string The id of the widgets whose title need to be returned.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
            <script>
            // Create DashboardViewer
            $("#dashboard").ejDashboardViewer();
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.getWidgetTitle("DatePicker_1"); // get the widget title.
            </script>

    loadDashboard()

    This method loads the layout information and dashboard information and renders the dashboard.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
            <script>
            // Create DashboardViewer
            $("#dashboard").ejDashboardViewer();
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.loadDashboard(); // Load the dashboard.
            </script>
  • html
  • <div id="dashboard" style="height:100%;width:100%"></div>  
            
            <script>
            // Load the dashboard.
            $("#dashboard").ejDashboardViewer();
            $("#dashboard").ejDashboardViewer("loadDashboard");      
            </script>

    loadHistoryData()

    This method get sessionKey as an argument and render the dashboard from the corresponding session data of the passed session key. It may returns the true value for successful rendering of the dashboard.

    Name Type Description
    args string Which holds the browser state key(GUID).

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
        <script>
            // Create DashboardViewer        
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.loadHistoryData();
        </script>
  • html
  • <div id="dashboard" style="height:100%;width:100%"></div>  
            
        <script>      
        $("#dashboard").ejDashboardViewer("loadHistoryData");      
        </script>

    loadLayout()

    This method will load the layout information and render the layout alone.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
            <script>
            // Create DashboardViewer
            $("#dashboard").ejDashboardViewer();
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.loadLayout(); // Load the dashboard layout.
            </script>
  • html
  • <div id="dashboard" style="height:100%;width:100%"></div>  
            
            <script>
            // Load the dashboard layout.
            $("#dashboard").ejDashboardViewer();
            $("#dashboard").ejDashboardViewer("loadLayout");      
            </script>

    openFilterPanel()

    This method is used to open the filter panel.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
            <script>
            // Create DashboardViewer
            $("#dashboard").ejDashboardViewer();
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.openFilterPanel(); // show the filter panel.
            </script>
  • html
  • <div id="dashboard" style="height:100%;width:100%"></div>  
            
        <script>
            // show the filter panel.
            $("#dashboard").ejDashboardViewer();
            $("#dashboard").ejDashboardViewer("openFilterPanel");      
        </script>

    openGetLinkDialog()

    This method is used to open the GetLink dialog.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
        <script>
            // Create DashboardViewer        
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.openGetLinkDialog();
        </script>
  • html
  • <div id="dashboard" style="height:100%;width:100%"></div>  
            
        <script>      
        $("#dashboard").ejDashboardViewer("openGetLinkDialog");      
        </script>

    openParameterDialog()

    This method is used to open the dashboard parameter dialog.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
        <script>
            // Create DashboardViewer        
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.openParameterDialog();
        </script>
  • html
  • <div id="dashboard" style="height:100%;width:100%"></div>  
            
        <script>      
        $("#dashboard").ejDashboardViewer("openParameterDialog");      
        </script>

    redrawDashboard()

    This method will re-render the complete dashboard and will reset the event hooks.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
            <script>
            // Create DashboardViewer
            $("#dashboard").ejDashboardViewer();
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.redrawDashboard(); // Re-render the dashboard.
            </script>
  • html
  • <div id="dashboard" style="height:100%;width:100%"></div>  
            
            <script>
            // Re-render the dashboard.
            $("#dashboard").ejDashboardViewer();
            $("#dashboard").ejDashboardViewer("redrawDashboard");      
            </script>

    refreshDashboard()

    This method will refresh the whole dashboard data or reload a specific widget data.

    Following are the parameters that you can pass to this method:

    Parameters Type Description
    controlId string Returns the name of the Control ID.
    canAutoRefresh boolean Return the bool value that specifies whether to autorefresh the whole dashboard.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
            <script>
            // Create DashboardViewer
            $("#dashboard").ejDashboardViewer();
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.refreshDashboard("Grid_1",true); // Refresh the dashboard.
            </script>

    refreshData()

    This method will refresh the dashboard in viewer.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
            <script>
            // Create DashboardViewer
            $("#dashboard").ejDashboardViewer();
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.refreshData(); // refresh the dashboard data.
            </script>
  • html
  • <div id="dashboard" style="height:100%;width:100%"></div>  
            
            <script>
            // refresh the dashboard data.
            $("#dashboard").ejDashboardViewer();
            $("#dashboard").ejDashboardViewer("refreshData");      
            </script>

    refreshWidgetData()

    This method will refresh the widget data.

    Following are the parameter that you can pass to this method:

    Parameters Type Description
    WidgetList string Returns the widget list for the given widget id.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
            <script>
            // Create DashboardViewer
            $("#dashboard").ejDashboardViewer();
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.refreshWidgetData("Chart_1"); // refresh the widget data.
            </script>

    removeCommentToggleState()

    This method will remove the comment toggle state.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
            <script>
            // Create DashboardViewer
            $("#dashboard").ejDashboardViewer();
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.removeCommentToggleState(); // remove the comment toggle state.
            </script>
  • html
  • <div id="dashboard" style="height:100%;width:100%"></div>  
            
            <script>
            // remove the comment toggle state.
            $("#dashboard").ejDashboardViewer();
            $("#dashboard").ejDashboardViewer("removeCommentToggleState");      
            </script>

    resizeDashboard()

    This method will resize the dashboard viewer to fit the parent container size.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
            <script>
            // Create DashboardViewer
            $("#dashboard").ejDashboardViewer();
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.resizeDashboard(); // resize the dashboard.
            </script>
  • html
  • <div id="dashboard" style="height:100%;width:100%"></div>  
            
            <script>
            // resize the dashboard.
            $("#dashboard").ejDashboardViewer();
            $("#dashboard").ejDashboardViewer("resizeDashboard");      
            </script>

    selectTabByIndex()

    This method will make the tab with the given tab index as active. If an invalid index is given there will not be any action done.

    Following are the parameter that you can pass to this method:

    Parameters Type Description
    tabIndex Integer Returns the tab with given tab index.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
            <script>
            // Create DashboardViewer
            $("#dashboard").ejDashboardViewer();
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.selectTabByIndex(1); // load the tab by tab index.
            </script>

    selectTabByName()

    This method will make the tab with the given tab name as active. If an invalid tab name is given no action will be done.

    Following are the parameter that you can pass to this method,

    Parameters Type Description
    tabName string Returns the tab name with the given tab name as active.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
            <script>
            // Create DashboardViewer
            $("#dashboard").ejDashboardViewer();
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.selectTabByName("Northwind Analysis Dashboard"); // load the tab by tab name.
            </script>

    showViewData()

    This method will show the data view of a particular widget based on its Guid/ReportName. Enable the dashboard parameter enableViewData to preview the data.

    Following are the parameter that you can pass to this method,

    Parameters Type Description
    Guid guid Returns the given widget data based on its current dashboard widget's guid.

    Example

    To get the widget’s Guid, refer to getCurrentDashboardDetails

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
            <script>
            // Create DashboardViewer
            $("#dashboard").ejDashboardViewer();
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.showViewData("957d0fa9-0eb1-4b43-8626-d4b8e0f5e625"); // set the Guid of the dashboard widget.
            </script>

    toggleDashboardComment()

    This method will toggle the dashboard comment.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
            <script>
            // Create DashboardViewer
            $("#dashboard").ejDashboardViewer();
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.toggleDashboardComment(); // toggle the dashboard comment.
            </script>
  • html
  • <div id="dashboard" style="height:100%;width:100%"></div>  
            
            <script>
            // toggle the dashboard comment.
            $("#dashboard").ejDashboardViewer();
            $("#dashboard").ejDashboardViewer("toggleDashboardComment");      
            </script>

    toggleDashboardParameterIcon()

    This method will return the current view (with applied filters) of the dashboard as a URL.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
        <script>
            // Create DashboardViewer        
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.toggleDashboardParameterIcon();
        </script>
  • html
  • <div id="dashboard" style="height:100%;width:100%"></div>  
            
        <script>      
        $("#dashboard").ejDashboardViewer("toggleDashboardParameterIcon");      
        </script>

    toggleFavoriteIcon()

    This method will toggle the favorite icon i.e. mark and unmarked the favorite icon.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
            <script>
            // Create DashboardViewer
            $("#dashboard").ejDashboardViewer();
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.toggleFavoriteIcon(); // toggle the favorite icon.
            </script>
  • html
  • <div id="dashboard" style="height:100%;width:100%"></div>  
            
            <script>
            // toggle the favorite icon.
            $("#dashboard").ejDashboardViewer();
            $("#dashboard").ejDashboardViewer("toggleFavoriteIcon");      
            </script>

    toggleWidgetComment()

    This method will toggle the widget comment.

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
            <script>
            // Create DashboardViewer
            $("#dashboard").ejDashboardViewer();
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.toggleWidgetComment(); // toggle the widget comment.
            </script>
  • html
  • <div id="dashboard" style="height:100%;width:100%"></div>  
            
            <script>
            // toggle the widget comment.
            $("#dashboard").ejDashboardViewer();
            $("#dashboard").ejDashboardViewer("toggleWidgetComment");      
            </script>

    updateFilterOverview()

    This method will update the filter overview with the applied filters data.

    Following are the parameters that you can pass to this method:

    Parameters Type Description
    viewName string Name of the Filter View
    viewName string Unique ID of the Filter View

    Example

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
            <script>
            // Create DashboardViewer
            $("#dashboard").ejDashboardViewer();
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.updateFilterOverview("NorthWind","94a48f0e-2898-4ccc-ad8f-b421ff87d25f"); 
            </script>
            </script>

    updateTabName()

    This method will update the tab name in the multi-tab dashboards.

    Following are the parameters that you can pass to this method:

    Parameters Type Description
    tabId string Id of the tab to be updated
    displayName string Updated name of the tab

    Example

    To get the tab details of the existing dashboard, refer to getDashboardTabsInfo

  • html
  • <div id="dashboard" style="height:100%;width:100%"></div> 
            
            <script>
            // Create DashboardViewer
            $("#dashboard").ejDashboardViewer();
            var dashboardObj = $("#dashboard").data("ejDashboardViewer");
            dashboardObj.dashboardObj.updateTabName([{ tabId: 'Dashboard_adeaf53d_03d9_4fe3_b9ba_e70d12d0e3eb', displayName: 'Worldwide Sales (Random data)' }]);
            </script>
            </script>

    Events

    actionBegin

    This event will be triggered at the beginning of every viewer actions while applying connection, layout/ dashboard rendering, popup opening and close, refreshing, filtering, exporting etc.

    Name Type Description
    eventType Enum Will holds the current event type that triggered the event
    source object This will contain the data related to the current event
    Source.element Object Holds the current event site UI element. If there involves no UI element will be returned as null
    Source.data object Holds the current event data.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
         actionBegin: function (args) {
         // Write a code block to perform an operation on click anywhere in Dashboard } 
         });

    actionComplete

    This event will be triggered on completion of the every viewer action which completes.

    Name Type Description
    eventType Enum Will holds the current event type that triggered the event
    source object This will contain the data related to the current event
    Source.element Object Holds the current event site UI element. If there involves no UI element will be returned as null
    Source.data object Holds the current event data.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
         actionComplete: function (args) {
         // Write a code block to perform an operation on click anywhere in Dashboard } 
         });

    afterLayoutRender

    Triggered after the dashboard layout is rendered.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
          afterLayoutRender: function (args) {
          // Write a code block to perform an operation after layout rendered } 
          });

    afterNavigate

    This event is triggered after linking operation is completed.

    Url / Dashboard Linking
    Name Type Description
    url string Will holds the URL to be navigated.
    target string Will holds the target type.
    source Object Holds the source object where the linking triggered.
    Internal Linking
    Name Type Description
    tabName string Will hold the tab name.
    source Object Holds the source object where the linking triggered.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
         afterNavigate: function (args) {
         // Write a code block to perform an operation on click anywhere in Dashboard } 
         });

    afterWidgetRender

    Triggered after each widget gets rendered in viewer.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
         afterWidgetRender: function (args) {
         // Write a code block to perform an operation on widget after render } 
         });

    beforeContextMenuOpen

    Triggered before the context menu is opened for each widget.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
         beforeContextMenuOpen: function (args) {
         // Write a code block to perform an operation if before context menu open } 
         });

    beforeControlMenuOpen

    This event gets triggered before the menu is opened upon clicking the more icon for each widget.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
         beforeControlMenuOpen: function (args) {
         // Write a code block to perform an operation if before control menu open } 
         });

    beforeDashboardFetch

    This event will be triggered while fetching the dashboard data or rendering the dashboard layout. Following table illustrates this event’s arguments:

    Name Type Description
    model Object Holds the Dashboard Viewer model set by the user.
    setRequestHeader void This method is used for setting the custom header and its value. User can call this method n number of types to set the custom headers. If the given header key is already present in the custom header, then the value alone will be updated.
    isHeaderPresent bool This method checks whether the given header key is already present in the custom header collection or not.

    Example

  • js
  • $("#container").ejDashboardViewer({
                    beforeDashboardFetch: function (args) {
                    // Write a code block to perform an operation to pass custom header when fetching dashboard data
                    args.setRequestHeader(key, value);
                    }
            })

    beforeDashboardIconRendered

    This event get Triggered before the Dashboard icons are rendered in Viewer.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
         beforeDashboardIconRendered: function (args) {
         // Write a code block to perform an operation on click anywhere in Dashboard } 
         });

    beforeFilterPanelClose

    This event Fires before the filter panel is closed on the Viewer.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
         beforeFilterPanelClose: function (args) {
         // Write a code block to perform an operation on click anywhere in Dashboard } 
         });

    beforeFilterPanelOpen

    This event fires before the Filter panel is opened on the Viewer.

    Name Type Description
    model object returns the Dashboard Viewer model
    datasource string returns the data source of widgets rendered
    element object returns the HTML element of DashboardViewer where the filter panel is rendered
  • js
  • $("#container").ejDashboardViewer({ 
         beforeFilterPanelOpen: function (args) {
         // Write a code block to perform an operation on click anywhere in Dashboard } 
         );

    beforeLayoutRender

    Triggered before the dashboard layout is rendered.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
         beforeLayoutRender: function (args) {
         // Write a code block to perform an operation before Layout rendered } 
         });

    beforeMasterFilterApplied

    Event gets triggered before the master widget filter is applied to the slave widgets.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
          beforeMasterFilterApplied: function (args) {
          // Write a code block to perform an operation before MasterFilter applied } 
          });
    Name Type Description
  • html
  • argument
    object Event parameters from Dashboard Viewer
    Name Type Description
  • html
  • event
    object Handle the filter values applied on dynamic interaction(s) with master widget and supply the modified values to its listener(s) conditionally.

    beforeNavigate

    This event is triggered before the linked URL is navigated.

    Url / Dashboard Linking

    In beforeNavigate Event arguments.data will have the following information

    Name Type Description
    url string Will holds the URL to be navigated.
    target string Will holds the target type.
    handled bool If this is set as true, the navigation code in viewer will not be triggered.
    source Object Holds the source object where the linking triggered.
    Internal Linking

    In beforeNavigate Event arguments.data will have the following information

    Name Type Description
    tabName string Will hold the tab name.
    handled bool If this is set as true, the navigation code in viewer will not be triggered.
    source Object Holds the source object where the linking triggered.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
         beforeNavigate: function (args) {
         // Write a code block to perform an operation on click anywhere in Dashboard } 
         });

    beforePassiveErrorRender

    This event get triggered before the Passive Error Dialog show on the Dashboard Viewer.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
         beforePassiveErrorRender: function (args) {
         // Write a code block to perform an operation on click anywhere in Dashboard } 
         });

    beforeWidgetIconRendered

    This event gets triggered before the title icons is rendered for each widget.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
         beforeWidgetIconRendered: function (args) {
         // Write a code block to perform an operation before the widget icon before rendered } 
         });

    beforeWidgetRender

    Triggered before each widget gets rendered in viewer.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
         beforeWidgetRender: function (args) {
         // Write a code block to perform an operation before widget rendered } 
         });

    dashboardCreated

    This event will be triggered when the dashboard is created.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
          dashboardCreated: function (args) {
          // Write a code block to perform an operation after dashboard created } 
          });
    Name Type Description
  • html
  • argument
    object Event parameters from Dashboard Viewer
    Name Type Description
  • html
  • model
    object Returns the Dashboard Viewer model
  • html
  • data
    object Hold the Dashboard Viewer data and layout information

    destroy

    Event gets triggered when Widget and Dashboards are destroyed

    Example

  • js
  • $("#container").ejDashboardViewer({ 
          destroy: function (args) {
          // Write a code block to perform an operation Dashboard destroy } 
          });

    filterPanelClose

    This Event Fires after Filter panel is closed.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
         filterPanelClose: function (args) {
         // Write a code block to perform an operation on click anywhere in Dashboard } 
         });

    filterPanelOpen

    This Event Fires after Filter panel is opened.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
         filterPanelOpen: function (args) {
         // Write a code block to perform an operation on click anywhere in Dashboard } 
         });

    onApplyConnection

    Triggered before the first AJAX request is send to service. You can modify the connection string using this event.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
         onApplyConnection: function (args) {
         // Write a code block to perform an operation if connection string is changed } 
         });

    onBannerIconClick

    This event Fires, when banner get clicked in Dashboard Viewer.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
         onBannerIconClick: function (args) {
         // Write a code block to perform an operation on click anywhere in Dashboard } 
         });

    onCommentDialogClosing

    Triggered when the comment window is closing.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
         onCommentDialogClosing: function (args) {
         // Write a code block to perform an operation on click anywhere in Dashboard } 
         });

    onDashboardClick

    Triggered when ever a click is made over dashboard area.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
         onDashboardClick: function (args) {
         // Write a code block to perform an operation on click anywhere in Dashboard } 
         });

    onDashboardCommented

    This event triggers, when the dashboard gets commented in Viewer.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
         onDashboardCommented: function (args) {
         // Write a code block to perform an operation on click anywhere in Dashboard } 
         });

    onFavoriteStateChange

    This event will be triggered when the user clicks on the favorite icon in viewer.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
         onFavoriteStateChange: function (args) {
         // Write a code block to perform an operation on click anywhere in Dashboard } 
         });

    onFilterOverviewUpdated

    This event will be triggered before the filter overview gets updated with the new filter data.

    Example

  • js
  • $("#container").ejDashboardViewer({
          onFilterOverviewUpdated: function (args) {
          // Write a code block to perform an operation before filter over view is updated } 
          });
          });

    onHistoryPopStateChange

    This event triggers, while click on the browser back and forth buttons.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
         onHistoryPopStateChange: function (args) {
         // Write a code block to perform an operation on click anywhere in Dashboard } 
         });

    onMenuIconClick

    Triggered when the menu icon is clicked from the dashboard widget container.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
         onMenuIconClick: function (args) {
         // Write a code block to perform an operation on Dashboard menu icon click  } 
         });

    onMenuItemClick

    Triggered when a menu item is selected from the drop-down menu of each widget or the dashboard.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
         onMenuItemClick: function (args) {
         // Write a code block to perform an operation on Dashboard menu item click  } 
         });

    onSaveAsFilter

    This event gets Triggered when you click the save As icon while filtering on Viewer.

    Name Type Description
    model object returns the Dashboard Viewer model
    data object Contains the data of the Filtered Information
    dashboard id string Guid of the Dashboard
    tab info object contains the current Tab information in case of multiple tab dashboards

    Example

  • js
  • $("#container").ejDashboardViewer({ 
         onSaveAsFilter: function (args) {
         // Write a code block to perform an operation on click anywhere in Dashboard } 
         });

    onSaveFilter

    This event gets Triggered when you click the save icon while filtering.

    Name Type Description
    model object returns the Dashboard Viewer model
    data object Contains the data of the Filtered Information
    dashboard id string Guid of the Dashboard
    tab info object contains the current Tab information in case of multiple tab dashboards
    viewName string Name of the Filter View
    view id string Id of the Filter View

    Example

  • js
  • $("#container").ejDashboardViewer({ 
         onSaveFilter: function (args) {
         // Write a code block to perform an operation on click anywhere in Dashboard } 
         });

    onWidgetCommented

    This event triggers, when widget gets commented in Viewer.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
         onWidgetCommented: function (args) {
         // Write a code block to perform an operation on click anywhere in Dashboard } 
         });

    tabActive

    This event get Triggered after a tab activated in Viewer.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
         tabActive: function (args) {
         // Write a code block to perform an operation on click anywhere in Dashboard } 
         });

    tabSelect

    This event get Triggered after a tab selected in Viewer.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
         tabSelect: function (args) {
         // Write a code block to perform an operation on click anywhere in Dashboard } 
         });