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.
Unfortunately, activation email could not send to your email. Please try again.

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

     $("#dashboard").ejDashboardViewer({

            serviceUrl: url,

            dashboardPath:report,

 

      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++){

            if(title==$($('#dashboard').find('.e-control-title')[i]).text())

                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

alert("Unlocked");

$(".lock").hide();

}

 

</script>

 

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

C:\Users\jenushmajames.james\AppData\Local\Microsoft\Windows\INetCache\Content.Word\locked.png

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

C:\Users\jenushmajames.james\AppData\Local\Microsoft\Windows\INetCache\Content.Word\unlocked.png

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

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.