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.
Change connection with excel datatypeThis 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. 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));
}
(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
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>
(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.
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>
|
This page will automatically be redirected to the sign-in page in 10 seconds.
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.
