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. (Last updated on: November 16, 2018).
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?

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

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

 

  1. 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.

 

  1. 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.

C#

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));

                  }

  1. 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

 

JavaScript

<script type="text/javascript">

    $('#dashboard').ejDashboardViewer({

        //Change the connection string in dashboard

        onApplyConnection: 'onApplyConnectionHandler'

    });

    // Function calling in script

    function onApplyConnectionHandler(args) {

        args.data.modifiedConnectionStrings = '@ViewBag.EncryptedString';

    }

</script>

 

  1. 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:

HTML

<html>

<body>

//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>

<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';

        dashboardobj.redrawDashboard();

    }

    function onApplyConnection(args) {

        args.data.modifiedConnectionStrings = '@ViewBag.EncryptedString;

}

</script>

</body>

</html>

 

Article ID: Published Date: Last Revised Date: Platform: Control: .NET Framework: Product Version:
7466 02/23/2017 02/23/2017 Dashboard Platform Dashboard SDK 4.5 2.0.1.2
Did you find this information helpful?
Add Comment
You must log in to leave a comment

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