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 to lock and unlock the widget?

Platform: Dashboard Platform |
Control: Dashboard SDK

Locking and Unlocking the widget in the Dashboard using SDK

The widget that is rendered on the Dashboard can be locked or unlocked at the SDK level by appending the custom div on the Dashboard and using the afterWidgetRender event of the Dashboard Viewer.

To lock and unlock the widget, use the following code snippet.

<script type="text/javascript">
var url ="http://dashboardsdkdemo.syncfusion.com/DashboardService/DashboardService.svc";
var report = "http://dashboardsdkdemo.syncfusion.com/Dashboards/Northwind Product Details.sydx";
$(function (e) {
            serviceUrl: url,
      afterWidgetRender : function (args){
             var widgetId = generateWidgetId("Stock and Order Details of Product"); //Get the widget ID by passing the widget title.
  var dashboarddiv = $("#dashboard"); 
  if(args.data.reportName == widgetId){ // Compare the generated widget Id with the widget id in the Dashboard
    var container = dashboarddiv.find(".e-dbrd-control-container[data-widget-id="+ args.data.reportName +"]"); // Find the control container of the widget
     container.append('<div class="lock" id="lock1"></div>'); // Append the custom DIV
     var ht = $(container).height(); //Get the width and height of the widget conatiner
     var wt = $(container).width();
     $(".lock").css({ height : ht,width:wt,position: "absolute",top : "0px",left: "0px",zIndex:"100000",backgroundColor:"white"}); // Assign the properties to the Div
      $(".lock").html("This widget is locked <br/><br/>");
      $(".lock").append('<button onclick="Unlock()">Unlock</button>'); //Append the Button and Bind the Click Even to it
 function generateWidgetId(title){ // Return the widget id based on the title passed
  var titles=$('#dashboard').find('.e-control-title');
        for(var i=0;i<titles.length;i++){
                return $($('#dashboard').find('.e-control-title')[i]).parents('.e-dbrd-control-container').attr('data-widget-id');
function Unlock(){ // define your own code to unlock the widget


The following screenshot illustrates the sample output with the locked messages.

A screenshot of a cell phone

Description generated with very high confidence

After the widget has been unlocked, the output will be obtained as illustrated in the following screenshot.


A screenshot of a cell phone

Description generated with very high confidence

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