Hi Prashant,
Thanks for your patience.
As of now we don’t have built in support for rendering canvas element within the Navigation Drawer. Since the circular gauge is rendered as Html5 canvas element, the reported issue occurs. But your requirement can be achieved as an work around. You can use “Ready” event of the ListView to render the canvas element. Find the code snippet below to achieve this.
|
@Html.EJ().NavigationDrawer("navpane").Direction(NavigationDrawerDirection.Left).Type(NavigationDrawerType.Overlay)
.EnableListView(true).TargetId("butdrawer").ContentId("content_container").ListViewSettings(settings =>
{
settings.Width(300).SelectedItemIndex(0).ShowHeader(false).ClientSideEvents(events => { events.MouseUp("headChange").Ready("gaugerender"); }).PersistSelection(true);
})
)
<script type="text/javascript">
function gaugerender(e) {
$("#CoreCircularGauge").ejCircularGauge({
height:"600",
width: "360",
minimum: 0,
maximum: 100,
readOnly:false,
value: 20,
backgroundColor: "blue"
});
}
</script> |
For your reference we have created a sample, you can download it using the below link:
Please let us know if you have any concerns.
Thanks,
Dharani.
