How to Hide the Option for Adding a New SQL Connection in the SQL DataSource Wizard in Web Report Designer
Environment
Product | Progress® Telerik® Reporting |
Description
This article demonstrates how to hide the option for adding a new SQL connection in the SQL DataSource Wizard in the Web Report Designer.
Suggested Workarounds
Currently, such functionality can be achieved through a workaround. You can add some extra JS and Jquery code that hides the option to create a new SQL connection. It does not hide the step entirely, but the only option showing is to use existing SQL Connections:
<script type="text/javascript">
// JS function to set click-listener on the SQL-data-source button
function setSqlDsListener() {
// selecting the div for the SQL DataSource button and adding a listener
$('div[component-name="SqlDataSource"]').click(function () {
// timeout to wait for the wizard to load in
setTimeout(function () {
// Selects the radio button within the New Sql Connection DIV
// The Radio button is selected as it has a unique ID to it, the div does not
var radio = $('#newSQLConnection');
// Selects the div tag that contains the radio button
var el = radio.closest('div[class^="editor__content"]');
el.attr("style", "display:none");
// Recalls itself because the click-listener gets removed after the wizards opens
setSqlDsListener();
}, 200)
})
}
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#webReportDesigner").telerik_WebReportDesigner({
toolboxArea: {
layout: "list" //Change to "grid" to display the contents of the Components area in a flow grid layout.
},
serviceUrl: "api/reportdesigner/",
report: "Product Catalog.trdp"
}).data("telerik_WebDesigner");
// 500 ms timeout to wait for the designer to load in
setTimeout(function () {
// selecting the Components tab and adding a click listener
$('span[class^="k-link"]').click(function () {
// a timeout to wait for the components tab to load in
setTimeout(function () {
//Calls the function to set the click listener for SQL DataSource
setSqlDsListener();
}, 400)
})
}, 500)
});
</script>
Note that experienced users can look through the raw HTML and find the hidden DIV tag. But until the Web Designer gets the added features of customizing the UI, this is the closest solution.