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

How can a dashboard created with a local excel file made to refer a new excel file programmatically in a dashboard viewer website hosted in a remote machine?

Platform: Dashboard Platform |
Control: Dashboard SDK |
.NET Framework: 4.5 |
Product Version:

Change connection with excel datatype

This can be done through, Dashboard Viewer API called onApplyConnection.

(i)Create a Web/MVC application to embed dashboard through Dashboard Viewer by referring the, Getting Started page.


(ii)Add the assembly named ‘Syncfusion.Dashboard.Encrytion’  into your application from the below location to encrypt the provided modified connection settings.


%localappdata%\Syncfusion\Dashboard\Samples\Common\Precompiled Assemblies.


(iii)Have the connection settings to change the Excel file path (of this hosted machine) and encrypt it using the following code snippet in DashboardViewerController.cs file.


public ActionResult Index()
            DashboardCryptoProvider provider = new DashboardCryptoProvider(EncryptionTypes.AES);
            Connection connectionName = new Connection { DataSources = new List<DataSourceConnectionString>() };
            connectionName.DataSources.Add(new DataSourceConnectionString
                Name = "Name of your Data Source used in the SYDX file", //For Example, DataSource1
                ConnectionString = "File path of your new Excel file" //For Example, C:\Syncfusion\Excel\NorthWindSales.xlsx
            ViewBag.EncryptedString = provider.DoEncryption(Converter.SerializeObject(connectionName));


(iv)Bind the event ‘onApplyConnectionHandler’to the API ‘onApplyConnection’ to render the dashboard with modified connection settings. Use the below code snippet in the Index.cshtml




<script type="text/javascript">
        //Change the connection string in dashboard 
        onApplyConnection: 'onApplyConnectionHandler'
    // Function calling in script 
    function onApplyConnectionHandler(args) {
        args.data.modifiedConnectionStrings = '@ViewBag.EncryptedString';


(v)To handle the change in connection settings, post loading of the existing dashboard and you can make use of any event (say button click event) handler.


  1. Create a button and register the onclick event with the event caller method.
  2. Add a script, holding the changed connection settings, event caller and event handler methods.

Following code snippet illustrates the same:



//Button creation 
<div style="padding: 4px 4px 0px 7px;height:4%;background-color: #303030 "> 
<input type="button" value="Change Connection String" style="border: none; -ms-border-radius: 3px; border-radius: 3px;padding: 5px 8px 5px 8px;background-color: #0080ff; color: #ffffff;font-size: 72%;text-transform: uppercase;" onclick="onButtonEventHandler()" /> 
<div id="dashboard" style="width:100%; height:94%;"></div> 
<script type="text/javascript"> 
    //Button event calling in script 
    function onButtonEventHandler() { 
        var dashboardobj = $('#dashboard').data('ejDashboardViewer'); 
        dashboardobj.model.onApplyConnection = 'onApplyConnection'; 
    function onApplyConnection(args) { 
        args.data.modifiedConnectionStrings = '@ViewBag.EncryptedString; 


You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

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

Live Chat Icon For mobile