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.

Circular Gauge inside Navigation Drawer Subpage

Thread ID:

Created:

Updated:

Platform:

Replies:

128433 Jan 20,2017 11:17 PM Jan 26,2017 06:14 AM ASP.NET MVC 4
loading
Tags: CircularGauge
Prash
Asked On January 20, 2017 11:17 PM

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 07:51 AM

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 06:11 AM

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 25, 2017 08:43 PM

Much appreciated. Thank you.

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

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.

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.

;