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

Loading Shapes and Connections is separated

3 Answers 68 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Jan
Top achievements
Rank 1
Jan asked on 02 Jun 2017, 06:57 AM

Hi there,

I have two questions concerning the MVC Diagram. First, why is there a different loading approach for shapes and connections? It seems as sometimes, my datasource is too slow to read both quick enough, so I have only shapes, but no connections... Is there any possibility to show errors / loading progress?

 

See my code listed below. The datasource controller methods are normal Json(List<T>.ToDataSourceResult()) calls...

@(Html.Kendo().Diagram<DiagramEditNodeVm, DiagramEditEdgeVm>()
  .Name("DAA")
  .HtmlAttributes(new { style = "height: 700px; width:1400px" })
  .Layout(l => l
      .Type(DiagramLayoutType.Tree)
      .Subtype(DiagramLayoutSubtype.Down)
      .HorizontalSeparation(50)
      .VerticalSeparation(50)
  )
  .ShapeDefaults(sd => sd
    .Visual("visualTemplate")
    .Content(c => c
        .FontSize(12)
      )
  )
  .ConnectionDefaults(cd => cd
    .Stroke(s => s
          .Color("#586477")
          .Width(2)
      )
  )
  .Events(events => events
    .Edit("onEdit")
  )
  .DataSource(d => d
      .ShapeDataSource()
      .Model(m =>
      {
          m.Id(n => n.Id);
          m.Field(n => n.Id).Editable(false);
          m.Field(n => n.Title);
          m.Field(n => n.StatusBit).Editable(false);
          //m.Field(s => s.ChildList).Editable(false);
          //m.Field(s => s.ParentList).Editable(false);
          //m.Field(s => s.MdeConnectionList).Editable(false);
          //m.Field(s => s.AttributeList).Editable(false);
      })
      .Read("ReadNodes", "Diagram", new
      {
          id= ViewContext.RouteData.Values["id"] != null ?
            Int32.Parse(ViewContext.RouteData.Values["id"].ToString())
            : 0
      })
      .Create("CreateNode", "Diagram")
      .Destroy("DeleteNode", "Diagram")
      .Update("UpdateNode", "Diagram")
  )
  .ConnectionsDataSource(d => d
      .Model(m =>
      {
          m.Id(e => e.Id);
          m.Field(e => e.Id).Editable(false);
          m.From(e => e.ParentNodeId);
          m.To(e => e.ChildNodeId);
          //m.FromX(c => c.FromPointX);
          //m.FromY(c => c.FromPointY);
          //m.ToX(c => c.ToPointX);
          //m.ToY(c => c.ToPointY);
      })
      .Read("ReadEdges", "Diagram", new
      {
          id = ViewContext.RouteData.Values["id"] != null ?
            Int32.Parse(ViewContext.RouteData.Values["id"].ToString())
            : 0
      })
      .Create("CreateEdge", "Diagram")
      .Destroy("DeleteEdge", "Diagram")
      .Update("UpdateEdge", "Diagram")
  )
)

3 Answers, 1 is accepted

Sort by
0
Accepted
Alex Hajigeorgieva
Telerik team
answered on 06 Jun 2017, 08:11 AM
Hi Jan,

Please find my answers to your questions below:

1) Why is there a different loading approach for the Shapes and Connections in the Kendo UI Diagram?

The Kendo UI Diagram Shape and Connections are fundamentally different and when they exist as separate data, then we load them in a different manner.

To speed things up, you may

- Fetch the root item and lazy load the children with the help of the load() method as shown in the overview articles here:

http://docs.telerik.com/kendo-ui/framework/hierarchicaldatasource/overview#bind-hierarchicaldatasource-to-remote-service
http://docs.telerik.com/kendo-ui/framework/hierarchicaldatasource/custom-binding#configuration-Fetch

- Change the model and use the automatic connections as shown here:

http://demos.telerik.com/aspnet-mvc/diagram/index

2) Is there any possibility to show errors/loading progress?

Yes, you may use the loading mask(kendo.ui.progress) that we have. Start it when needed, then add an event handler to the dataBound event of the Kendo UI Diagram and stop it at this point.

I hope this helps.

Regards,
Alex Hajigeorgieva
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
0
Jan
Top achievements
Rank 1
answered on 09 Jun 2017, 05:48 AM

Okay thanks, I will try that!

 

One question remains though... in an EditorTemplate for the Shape Editing, how can i debug the values inserted for each shape? No method is called serverside...

0
Accepted
Alex Hajigeorgieva
Telerik team
answered on 09 Jun 2017, 02:24 PM
Hi Jan,

How about adding an event handler to the edit or save events?

edit: http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram#events-edit
save: http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram#events-save

Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
Tags
Diagram
Asked by
Jan
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Jan
Top achievements
Rank 1
Share this question
or