)
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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to add the custom icon, change the link text and hide the Copy button in GetLink dialog

Platform: Dashboard Platform |
Control: Dashboard SDK |
Published Date: April 6, 2018 |
Last Revised Date: May 7, 2019

Customizing GetLink dialogue window

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:

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:

 

 

 

 

 

 

 

 

Custom icon added dashboard in viewer

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:

 

Change the Get Link text

 

 

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:

Removed the copy button in Get link window

 

 

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:

A screenshot of a cell phone

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.

Up arrow icon

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

Live Chat Icon For mobile
Live Chat Icon