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 add the custom icon, change the link text and hide the Copy button in GetLink dialog

To add the custom icon in the dashboard viewer for Get Link, customize the text in Get Link Dialog and remove the Copy button features, follow the given steps:

  1. Add the custom icon for Get Link in dashboard viewer:

To add the custom icon in the dashboard viewer through its banner, use the ‘beforeDashboardIconRendered’ event as shown in the following code snippet:

 

HTML

<style>

            .e-dbrd-banner-customIcon{           // here the new class for custom icon either through font icon or your icon image.

                      font-family: 'dashboardviewer_font'; //Or your own font if you prefer.

                      color: #6d6e70;

                    padding: 11px;

                   width: 40px;

                  height: 40px;

                  cursor: pointer;

                float: right;

                 margin-right: 2px;

                color: red;

          }

          .e-dbrd-banner-customIcon::before{

              content: 'II';

              font-size: 18px;

          }

 

    </style>

<script type="text/javascript">

 

    $(function (e) {

        $("#dashboard").ejDashboardViewer({

            Serviceurl: "", // service URL

            dashboardPath: "", // Dashboard file path

 

            beforeDashboardIconRendered: function (args) {

                var headerIcons=args.iconsinformation;

                headerIcons.push(({classname : "e-dbrd-banner-customIcon e-dbrd-hoverable e-dbrd-bannerIcon",removeClass:"e-dbrd-banner-icons e-dbrd-hoverable",name: "", role: ""}));  // add a new custom icon in the Dashboard banner

                     } ,

                onBannerIconClick: CustomIcon 

        });

    });

</script>

 

 

The following screenshot illustrates the result of the above code snippet:

 

 

 

 

 

 

 

 

  1. To show the customized link text in Get Link dialog:

 

Add the following code snippet to change the link text which will appear in the Get Link dialog.

 

<script>

function CustomIcon(args){

    if($(args.target).hasClass("e-dbrd-banner-customIcons")){    

        var dashboardObj = $("#dashboard").data("ejDashboardViewer");

        dashboardObj.openGetLinkDialog();

        $('#' + dashboardObj._id).find('.e-share-text').val("test link");  // add your custom link in the highlighted text. Which appear on the Dialog popup. 

    }

}

</script>

 

 

Get Link pop-up with modified text can be shown as:

 

 

 

  1. To remove the Copy button in the Get Link dialog:

 

Follow the steps to hide the copy button in Get Link pop-up.

 

Dashboard Embedded using Dashboard Platform SDK:

In Index.html file,

<style> 

      .e-share-copy-btn 

            { 

                display: none !important; // hide the link icon 

            } 

</style> 

 

  

 

 

 

 

 

 

The following screenshot illustrates the result of the above code snippet:

 

 

Dashboard in Dashboard Server:

 

Add the following code snippet in the Index.cshtml of the Dashboard Server, which is available at the below location:

 

C:\Syncfusion\Dashboard Server\DashboardServer.Web\Views\FileRender\Index.cshtml 

 

<style> 

# get_item_link .get-link-body #item-link-copy{ 

        display: none !important; 

        } 

# get_item_link .get-link-body #item-link{ 

         width: 97% !important; 

         border-radius: 4px !important;  

        } 

</style>

 

 

 

 

 

 

 

 

 

 

The following screenshot illustrates the result of the above code snippet:

 

 

 

 

 

 

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