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. Image for the cookie policy date

How to add expand icon to the dashboard e-panel

Hi,

I am learning the epanel and tried adding another span with an expand icon but it only rendered the same close icon.

I need to have a couple on icons using the same type of icon as e-template-icon e-expand-icon where the icon like close auto hides and shows on the right side of the row. I tried added e-icons e-search but it does not have the same function like close. The search icon shows on the left side and does not auto hide.

I looked thru the syncfusion site but but only found an example to add the close icon. Any help is appreciated. Thanks

I am using the css from the demo site

#dashboard.e-dashboardlayout.e-control .e-panel:hover .e-close-icon {
  display: block;
}

#dashboard.e-dashboardlayout.e-control .e-panel .e-template-icon {
  padding: 10px;
  float: right;
  display: none;
}

#dashboard.e-dashboardlayout.e-control .e-panel .e-close-icon::before {
  content: '\e100';
  font-size: 12px;
  font-family: 'ej-icon';
}

@font-face {
  font-family: 'ej-icon';
  src:
  url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMjdtQ/IAAAEoAAAAVmNtYXDhEOFVAAABiAAAADZnbHlmq8jV4gAAAcgAAAFQaGVhZBSREIsAAADQAAAANmhoZWEIUAQDAAAArAAAACRobXR4CAAAAAAAAYAAAAAIbG9jYQCoAAAAAAHAAAAABm1heHABDQCUAAABCAAAACBuYW1lWD3y/QAAAxgAAAIlcG9zdMl9cHoAAAVAAAAALwABAAAEAAAAAFwEAAAAAAAD8wABAAAAAAAAAAAAAAAAAAAAAgABAAAAAQAAjGeuW18PPPUACwQAAAAAANi/5c0AAAAA2L/lzQAAAAAD8wP0AAAACAACAAAAAAAAAAEAAAACAIgAAQAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA4QDhAAQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACIAAAAEAAQAAQAA4QD//wAA4QD//wAAAAEABAAAAAEAAAAAAAAAqAAAAAEAAAAAA/MD9ACHAAAJAi8GKwEPDR0BHwYJAQ8GHQEfDTsBPwYJAR8GOwE/Di8HCQE/Bj0BLw0rAQ8FA3T+jP6MBQYHBgcHCAcHBwcHBwYGBgUFAwMDAgEBAgMDAwUFAXT+jAUFAwMDAgEBAgMDAwUFBgYGBwcHBwcHBwgGBwYHBQF0AXQFBgcGBwcIBwcHBwcHBgYGBQQEAwMBAQEBAQEDAwQEBf6MAXQFBQMDAwIBAQIDAwMFBQYGBgcHBwcHBwgHBwYHBgPe/owBdAUFAwMDAgEBAgMDAwUFBgYGBwcHBwcHCAcGBwYHBf6M/owFBwYHBgcIBwcHBwcHBgYGBQUDBAICAQECAgQDBQUBdP6MBQUDBAICAQECAgQDBQUGBgYHBwcHBwcIBwYHBgcFAXQBdAYGBgcHBwcHBwcHBwcGBgYFBQMEAgIBAQIDAwMFAAAAEgDeAAEAAAAAAAAAAQAAAAEAAAAAAAEABwABAAEAAAAAAAIABwAIAAEAAAAAAAMABwAPAAEAAAAAAAQABwAWAAEAAAAAAAUACwAdAAEAAAAAAAYABwAoAAEAAAAAAAoALAAvAAEAAAAAAAsAEgBbAAMAAQQJAAAAAgBtAAMAAQQJAAEADgBvAAMAAQQJAAIADgB9AAMAAQQJAAMADgCLAAMAAQQJAAQADgCZAAMAAQQJAAUAFgCnAAMAAQQJAAYADgC9AAMAAQQJAAoAWADLAAMAAQQJAAsAJAEjIGVqLWljb25SZWd1bGFyZWotaWNvbmVqLWljb25WZXJzaW9uIDEuMGVqLWljb25Gb250IGdlbmVyYXRlZCB1c2luZyBTeW5jZnVzaW9uIE1ldHJvIFN0dWRpb3d3dy5zeW5jZnVzaW9uLmNvbQAgAGUAagAtAGkAYwBvAG4AUgBlAGcAdQBsAGEAcgBlAGoALQBpAGMAbwBuAGUAagAtAGkAYwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAGUAagAtAGkAYwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAdQBzAGkAbgBnACAAUwB5AG4AYwBmAHUAcwBpAG8AbgAgAE0AZQB0AHIAbwAgAFMAdAB1AGQAaQBvAHcAdwB3AC4AcwB5AG4AYwBmAHUAcwBpAG8AbgAuAGMAbwBtAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgECAQMABWNsb3NlAAAA) format('truetype');
  font-weight: normal;
  font-style: normal;
}

#dashboard.e-dashboardlayout.e-control .e-panel .e-close-icon {
  position: absolute;
  right: 0;
  top: -4;
  cursor: pointer;
}



I started looking at the unicode at the https://help.syncfusion.com/js/icon/ej-icons


But when I can't figure out how you added icons into the e-panel. I changed the e100 to different unicode but no new icon is rendered


<div id="1" class="e-panel" >
<span id="expand" class="e-template-icon e-expand-icon" >span>
<span id="close" class="e-template-icon e-close-icon" >span>
<div class="e-panel-header">
div>
<div class="e-panel-container">
div>
div>

1 Reply

LD LeoLavanya Dhanaraj Syncfusion Team October 31, 2022 11:41 AM

Hi Comic,


Greetings from Syncfusion support.


Based on your query, we have prepared an Angular Dashboard Layout sample with the latest version. Here, we have added the search and expanded icons in the Dashboard panel header. You can make use of the Syncfusion icons by referring to the below Syncfusion Icons library.


https://ej2.syncfusion.com/react/documentation/appearance/icons/


Check the below mentioned code snippets and sample.


[app.component.html]

<ejs-dashboardlayout id="default_dashboard" columns="5" #default_dashboard  ...>

    <div id="one" class="e-panel" data-row="0" data-col="0" data-sizeX="1" data-sizeY="1">

        <span class="e-icons e-search"></span>

        <span class="e-icons e-expand"></span>

        <span id="close" class="e-template-icon e-close-icon" ... ></span> ...

    </div>  

</ejs-dashboardlayout>

 

[app.component.css]

.e-search:before {

    content: '\e993';

    font-size: 13px;

    margin-left: 10px;

}

.e-expand:before {

    content: '\e556';

    font-size: 13px;

    margin-left: 20px;

}


Sample : https://stackblitz.com/edit/angular-xtsv9h-bxgldr?file=app.component.html,app.component.css


For your reference, we have attached the sample. Kindly check and let us know whether the provided sample meet your requirement. Please get back to us if you need any further assistance.


Regards,

Leo Lavanya Dhanaraj


Loader.
Live Chat Icon For mobile
Up arrow icon