This is a migrated thread and some comments may be shown as answers.

Loading Indicator

4 Answers 45 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Bryan
Top achievements
Rank 1
Bryan asked on 02 Jul 2019, 03:08 PM
I have a diagram that's taking a long time to render, and there seems to be no way to set a loading indicator while it's drawing the diagram. I add the progress indicator just before declaration and remove it on the databound event, but the page just looks unresponsive. Is there a way to set the progress and remove when complete? 

4 Answers, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 04 Jul 2019, 08:07 AM
Hi Bryan,

If you would like to show a loading indicator until the data is loaded inside the Kendo UI Diagram, what I can recommend is to enable the kendo.ui.progress just after the initalization of the widget. And, respectively, terminate it in the requestEnd event handler of the Kendo UI DataSource. 

Here is an example of the same:

https://dojo.telerik.com/EqeToZEY

And the relevant code snippets:

$(document).ready(function(){
  createDiagram();
  kendo.ui.progress($("div#diagram"), true);
});

         dataSource: new kendo.data.HierarchicalDataSource({
              requestEnd:function(){
                kendo.ui.progress($("div#diagram"), false);
              },
// . . .

Let me know in case further assistance is required.


Kind regards,
Tsvetomir
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Bryan
Top achievements
Rank 1
answered on 05 Jul 2019, 01:51 PM

Great, thanks, although I still have a bit of an issue. Modified the example to be a little closer to what I need it to do:

 

<!DOCTYPE html>
<html>
  <head>
    <base href="https://demos.telerik.com/kendo-ui/diagram/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.uniform.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.uniform.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2019.2.619/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>


  </head>
  <body>
    <span id="buttonGO">Show Diagram</span>
    <div id="example">
      <div id="diagram"></div>
      <script>
        var data = [{
          firstName: "Antonio",
          lastName: "Moreno",
          image: "antonio.jpg",
          title: "Team Lead",
          colorScheme: "#1696d3",
          items: [{
            firstName: "Elizabeth",
            image: "elizabeth.jpg",
            lastName: "Brown",
            title: "Design Lead",
            colorScheme: "#ef6944",
            items: [{
              firstName: "Ann",
              lastName: "Devon",
              image: "ann.jpg",
              title: "UI Designer",
              colorScheme: "#ef6944"
            }]
          }, {
            firstName: "Diego",
            lastName: "Roel",
            image: "diego.jpg",
            title: "QA Engineer",
            colorScheme: "#ee587b",
            items: [{
              firstName: "Fran",
              lastName: "Wilson",
              image: "fran.jpg",
              title: "QA Intern",
              colorScheme: "#ee587b"
            }]
          }, {
            firstName: "Felipe",
            lastName: "Izquiedro",
            image: "felipe.jpg",
            title: "Senior Developer",
            colorScheme: "#75be16",
            items: [{
              firstName: "Daniel",
              lastName: "Tonini",
              image: "daniel.jpg",
              title: "Developer",
              colorScheme: "#75be16"
            }]
          }]
        }];

        function visualTemplate(options) {
          var dataviz = kendo.dataviz;
          var g = new dataviz.diagram.Group();
          var dataItem = options.dataItem;

          g.append(new dataviz.diagram.Rectangle({
            width: 210,
            height: 75,
            stroke: {
              width: 0
            },
            fill: {
              gradient: {
                type: "linear",
                stops: [{
                  color: dataItem.colorScheme,
                  offset: 0,
                  opacity: 0.5
                }, {
                  color: dataItem.colorScheme,
                  offset: 1,
                  opacity: 1
                }]
              }
            }
          }));

          g.append(new dataviz.diagram.TextBlock({
            text: dataItem.firstName + " " + dataItem.lastName,
            x: 85,
            y: 20,
            fill: "#fff"
          }));

          g.append(new dataviz.diagram.TextBlock({
            text: dataItem.title,
            x: 85,
            y: 40,
            fill: "#fff"
          }));

          g.append(new dataviz.diagram.Image({
            source: "../content/dataviz/diagram/people/" + dataItem.image,
            x: 3,
            y: 3,
            width: 68,
            height: 68
          }));

          return g;
        }

        var ds =  new kendo.data.HierarchicalDataSource({
              transport:{
                read:function(e){
                  setTimeout(function(){
                    e.success(data || []);
                  }, 1000);
                }
              },
              schema: {
                model: {
                  children: "items"
                }
              },
              requestEnd:function(){
                kendo.ui.progress($("div#diagram"), false);
              }
            })
        
        function createDiagram() {
          $("#diagram").kendoDiagram({
dataSource: ds,
            layout: {
              type: "layered"
            },
            shapeDefaults: {
              visual: visualTemplate
            },
            connectionDefaults: {
              stroke: {
                color: "#979797",
                width: 2
              }
            }
          });

          var diagram = $("#diagram").getKendoDiagram();
          diagram.bringIntoView(diagram.shapes);
        }

        $('#buttonGO').bind('click', function() {
           createDiagram();
           kendo.ui.progress($("div#diagram"), true);
        });
        
//        $(document).ready(function(){
  //        createDiagram();
      //    kendo.ui.progress($("div#diagram"), true);
    //    });
      </script>
    </div>


  </body>
</html>

Loads fine on the initial click, but subsequent clicks don't remove the progress indicators. I'm loading the data source initially in a tree, then flipping back and forth depending on what view the user wants to see. So after the initial load, the requestEnd fires out of order with the progress indicator, so it never gets removed. 

0
Accepted
Tsvetomir
Telerik team
answered on 09 Jul 2019, 10:38 AM
Hi Bryan,

Thank you for modifying the provided code snippets.

What actually happens is that the createDiagram() creates a new diagram. However, the data source to which it is bound is not recreated. Therefore, the new diagram is created but the data is bound to the old data source. What you can do is to simply erase the previously loaded data:

$('#buttonGO').bind('click', function() {
  ds.data([]);
  createDiagram();
  kendo.ui.progress($("div#diagram"), true);
});

Here is the updated Dojo:

https://dojo.telerik.com/ITimIYev

It is important to point out that it is recommended to first destroy the existing diagram, empty the inner HTML. And only after that, create a new instance of the diagram. More information could be found here:

https://docs.telerik.com/kendo-ui/intro/widget-basics/destroy


Regards,
Tsvetomir
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Bryan
Top achievements
Rank 1
answered on 09 Jul 2019, 01:22 PM
Works great, Tsvetomir. Thanks very much.
Tags
Diagram
Asked by
Bryan
Top achievements
Rank 1
Answers by
Tsvetomir
Telerik team
Bryan
Top achievements
Rank 1
Share this question
or