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

Circular Gauge inside Navigation Drawer Subpage

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>




4 Replies

DD Dharanidharan Dharmasivam Syncfusion Team 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. 



DD Dharanidharan Dharmasivam Syncfusion Team 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. 



PR Prash January 26, 2017 01:43 AM UTC

Much appreciated. Thank you.


AT Anandaraj T Syncfusion Team 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 


Loader.
Live Chat Icon For mobile
Up arrow icon