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 get the widget Id using the Widget title after rendering the dashboard layout?

Platform: Dashboard Platform |
Control: Dashboard SDK |
Published Date: April 13, 2018 |
Last Revised Date: November 21, 2018

Refer to the following code snippet to get the widget ID using the widget title:

 

  var getReportNameFromTitle = function (title) {

        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');

        }

    }

 

 

For example, the above code can be used to change the header font settings of the specific widget with its title. Refer to the following code snippet:

 

<script type="text/javascript">

    $(function (e) {

        $("#dashboard").ejDashboardViewer({

            serviceUrl: url,

            dashboardPath:report,

            dashboardCreated : changeFontSize

        });

    });

 

function changeFontSize(args) {

        var widgetId = generateWidgetId("Sum of orders based on Ship Region"); //Get the widget ID by passing the widget title.

        var ControlContainer = $("#dashboard").find(".e-dbrd-control-container[data-widget-id=" + widgetId + "]");

        var ControlHeading = $(ControlContainer).find('.e-control-title');

        $(ControlHeading).css({"font-size":"20px","color":"blue","margin-left":"183px"});

}

 

function generateWidgetId(title){

        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');

        }

    }

</script>

 

Also, refer to the following image comparison of before and after applying the font settings:

Before Font Settings applied

After Font Settings applied

A screenshot of a computer

Description generated with very high confidence

A screenshot of a computer

Description generated with very high confidence

 

 

 

 

 

ADD COMMENT
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.

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