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

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

 

 

 

 

 

Article ID: Published Date: Last Revised Date: Platform: Control:
8693 04/13/2018 04/13/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.