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.
Syncfusion Feedback

Circular Gauge inside Navigation Drawer Subpage

Thread ID:

Created:

Updated:

Platform:

Replies:

128433 Jan 21,2017 04:17 AM UTC Jan 26,2017 11:14 AM UTC ASP.NET MVC 4
loading
Tags: CircularGauge
Prash
Asked On January 21, 2017 04:17 AM UTC

How can I get a circular gauge to display within a Navigation Drawer subpage? The gauge will display and work if I place it outside the subpage however it will not work in the subpage. Example that doesn't work:

<div id="dashboard"  class="subpage">
    @(Html.EJ().CircularGauge("circulargauge"))
    
</div>




Dharanidharan Dharmasivam [Syncfusion]
Replied On January 24, 2017 12:51 PM UTC

Hi Prashant, 

Sorry for inconvenience caused. 

We can able to reproduce the reported issue. We are analyzing on this and we will update you the status on 1/25/2017. 

Thanks, 
Dharani. 


Dharanidharan Dharmasivam [Syncfusion]
Replied On January 25, 2017 11:11 AM UTC

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. 


Prash
Replied On January 26, 2017 01:43 AM UTC

Much appreciated. Thank you.

Anandaraj T [Syncfusion]
Replied On January 26, 2017 11:14 AM UTC

Hi Prashant, 

Most welcome. 

Please let us know if you have any other queries regarding this. We are glad to assist you. 

Regards, 
Anand 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

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

;