Loading Shapes and Connections is separated

4 posts, 2 answers
  1. Jan
    Jan avatar
    30 posts
    Member since:
    Mar 2014

    Posted 02 Jun Link to this post

    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")
      )
    )

  2. Answer
    Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    321 posts

    Posted 06 Jun Link to this post

    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 visualization (charts) and form elements.
  3. Jan
    Jan avatar
    30 posts
    Member since:
    Mar 2014

    Posted 09 Jun in reply to Alex Hajigeorgieva Link to this post

    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...

  4. Answer
    Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    321 posts

    Posted 09 Jun Link to this post

    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 visualization (charts) and form elements.
Back to Top