It is currently 1 October 2020, 4:31 Advanced search

Syncfusion Guages

Questions and answers on how to best use Instant Developer

Syncfusion Guages

Postby rjberry » 31 October 2019, 18:34

Hi All,
I am trying to use the syncfusion guages widget. Either the javascript or .net API.
I have to admit i really dont know where to start in order to use them. Can anyone give me some assistance on getting started?
I know about the custom directory, I have seem the pkms example but I dont know how to make these concept do what I want.
Thanks for the help.
Posts: 19
Joined: 12 November 2013, 13:58

Re: Syncfusion Guages

Postby rjberry » 21 November 2019, 19:30

Hi all,
I have successfully got the syncfusion gauges to work in inde. I am now trying to use the offline version of their package.
I have attached my project. it is doing something odd, If I try to run it in inde it says 'ej' not defined ( this is the pointer to the syncfusion objects)
if I load the solution into Visual Strudio and run it, it runs fine.
I am not sure why. if you want to see it work, comment out the syncfusion line in Desktop.hrm at the bottom of the page. it references a local directory. and uncomment the line above that references a web addres for SF
These direction on what to o came from syncfusion support.
Hope someone can see why it runs in one but not the other. also tried to get the signature control working but no luck yet....
(915.91 KiB) Downloaded 133 times
Posts: 19
Joined: 12 November 2013, 13:58

Re: Syncfusion Guages

Postby antonio.pavan » 22 November 2019, 7:33

Hi rjberry, I've download your project, because I'm also interested in Syncfusion.
Yesterday I've dowloaded Syncfusion Community and I've installed in my PC.
Just few minutes ago, I download your work and give it a try. I've commented and decommented as your note, but I'm not lucky.
I try to investigated: if I discover something I advise you in this post.
Hope we have luck.
Good work.

Posts: 89
Joined: 17 November 2017, 8:19
Location: Limena (PD)

Re: Syncfusion Guages

Postby rjberry » 22 November 2019, 13:20

I apologize, I uploaded the wrong test app. Try this one, I commented the Desktop.htm a little better this time.
I think it has to do with the directory structure under the 'custom' folder. If I choose an image in the image folder in the CSHARP directory (Csharp/images) The image does not show in the middle of the gauge.
So I wonder if, even though the ej2.js does get copied to the CSharp/JScript folder. The way it is referenced in the Desktop.htm' file
Code: Select all
<script src="JScript\ej2.js"></script>

is not correct, so the application cant find the ej2.js file when running.
If you run the built app (with the code above uncommented and the code for the network version commented out) in Visual studio, it works fine. So it appears to be a problem with the way inde runs this code.
I have not published it to a site to test so, not sure if it would still work in that environment. Also note I cant get the image to show even in Visual Studio.
Hope this helps,
(915.95 KiB) Downloaded 124 times
Posts: 19
Joined: 12 November 2013, 13:58

Re: Syncfusion Gauges

Postby ljwilson » 22 November 2019, 22:58

Try this one. I cleaned it up a bit to have only the code being used.
InDe Express 19.5 r11 version
(867.99 KiB) Downloaded 115 times

  1. changed reference to custom folder to use relative path
    Code: Select all
    Very important, especially when you are sharing projects to other people.
  2. Eliminated custom desktop.htm. Sometimes you have to customize desktop.htm, but best to avoid it if possible, since you will then have to check it for each InDe Update. Fortunately for this example we don't have to.
  3. Look at how the custom3.js loads what is needed. Read up on it on page 413 of the Users Guide. I also threw in another technique I use which doesn't depend on delay loading. Part of the ej2 loading issue was timing--not all objects were loaded before used. I put the gauge javascript in its own file so we could make sure it loaded correctly using the method shown below.
    Code: Select all
    function RD3_CustomInit()
      setTimeout('RD3_Glb.LoadJsCssFile("JScript/ej2.js");', 100);
      setTimeout('RD3_Glb.LoadJsCssFile("//");', 100);
      //ljw 2019-11-22 added: timing-independent way of ensuring we have gauge.js loaded when first loading app.
      var myScript = document.createElement('script');
      myScript.src = 'gauge.js';
      myScript.onload = function() {
        console.log('gauge loaded.');
  4. Added a MyClick button which will redraw the gauge with the value you put in the percentage box.
  5. if you can upload the images folder that has the missing warn2.png file then we could get rid of the broken icon. Those images should be in the images custom folder so they will be copied over to the csharp folder when compiled.
  6. And the most import change: corrected the spelling of "gauge." :-)

Posts: 534
Joined: 26 November 2013, 14:15

Re: Syncfusion Gauges

Postby ljwilson » 23 November 2019, 19:15

Further investigation into the missing image "warn2.png" revealed that it is a typo--change the reference in the NewForms Load event from "warn2.png" to "warn2.gif" -- it is a standard inde graphic that will end up in the images folder upon compilation.


I've added another sample, compiled with InDe 13.5 Express, which has the warn2.gif change.
InDe 13.5 Express Version
(864.67 KiB) Downloaded 127 times

Posts: 534
Joined: 26 November 2013, 14:15

Return to Tips & Tricks

Who is online

Users browsing this forum: No registered users and 2 guests