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

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

Article ID: Published Date: Last Revised Date: Platform: Control:
9236 08/31/2018 11/21/2018 Dashboard Platform Dashboard SDK
Did you find this information helpful?
Add Comment
You must log in to leave a comment

Please sign in to access our KB

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

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