k-layer size in Angular

[Jong]

Hello, I'm using Kendo UI for JQuery Diagram in Angular and I have a problem with the size.

I want the diagram to fit to its container, and I have the container height and width set to 100%.

When first initialized, the height and width of the "k-layer" div is automatically set to always 600px which does not fit to its container.

And when I resize the window manually, this "k-layer" size changes to fit to the container size.

My question is, how can I make this diagram to fit its container when initially loaded?

I tried calling kendo.resize("wrapper") when initially loaded, but this does not work.

FYI, I initialize the diagram in ngAfterViewInit().

Please see the screenshot I attached.

This screenshot shows the initial size is 600px.

And the code below is the code I use to initialize the diagram.

init: function (diagramElement, designerPanelWrapperElement) {
  designerPanelWrapper = designerPanelWrapperElement;
  diagram = diagramElement.kendoDiagram({
    theme: "default",
    dataSource: {
      data: [{
        name: "0",
        items: [{
          name: "0"
        }]
      }],
      schema: {
        model: {
          children: "items"
        }
      }
    },
    shapeDefaults: {
      width: 120,
      height: 120,
      fill: "#8ebc00"
    },
    layout: {
      type: "tree",
      subtype: "right"
    },
    select: function (e) {

    }
  }).getKendoDiagram();

  diagramElement.kendoDropTarget({
    drop: function (e) {
      var item, pos, transformed;
      if (e.draggable.hint) {
        item = e.draggable.hint.data("shape");
        pos = e.draggable.hintOffset;
        pos = new Point(pos.left, pos.top);
        var transformed = diagram.documentToModel(pos);
        item.x = transformed.x;
        item.y = transformed.y;

        diagram.addShape(item);
      }
    }
  });
  kendo.resize(designerPanelWrapper);
}

 

[Jong]

And this only happens if the diagram is in kendo-splitter.

Here is my view.

<kendo-splitter class="height-100">
  <kendo-splitter-pane>
    <div #designerPanelWrapper class="w-100 h-100">
      <div #designerPanel class="w-100 h-100">

      </div>
    </div>
  </kendo-splitter-pane>

  <kendo-splitter-pane [collapsible]="true" size="230px">
  </kendo-splitter-pane>
</kendo-splitter>

[Jong]

I just found out that it works with Kendo UI JQuery kendoSplitter, but not with Angular kendo-splitter.

I tried not to use JQuery as much as possible in my Angular project, but I guess I don't have a choice in some cases..

I wish Kendo UI for Angular had the diagram control.

Do you have any plans for implementing the diagram control for Angular? 

[Nikolay]

Hello Jong,

Dedicated Kendo UI for the Angular Diagram component is not currently available, and I am afraid that providing one is not a part of our immediate plans.

If you have the time, please support the following feature request in our Feedback portal to help us estimate the customer demand, and to prioritize accordingly when updating our RoadMap

• https://feedback.telerik.com/kendo-angular-ui/1360581-diagram-component

Regarding the resize Diagram issue I can suggest rescaling and centering the Diagram:

function centreDiagram() {
        var diagram = $("#diagram").getKendoDiagram();
        diagram.bringIntoView(diagram.shapes);
      }
      
      $(window).on("resize", function () {
         centreDiagram();
    })

This is demonstrated in the following Dojo demo:

• https://dojo.telerik.com/OyuLuPap

Please try this approach and let me know if it helps.

Regards,
Nikolay
Progress Telerik