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

k-layer size in Angular

3 Answers 133 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Jong
Top achievements
Rank 1
Veteran
Jong asked on 15 Jan 2021, 06:28 PM

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);
}

 

3 Answers, 1 is accepted

Sort by
0
Jong
Top achievements
Rank 1
Veteran
answered on 16 Jan 2021, 03:42 PM

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>
0
Jong
Top achievements
Rank 1
Veteran
answered on 18 Jan 2021, 04:47 PM

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? 

0
Nikolay
Telerik team
answered on 19 Jan 2021, 11:35 AM

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

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:

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

Regards,
Nikolay
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Diagram
Asked by
Jong
Top achievements
Rank 1
Veteran
Answers by
Jong
Top achievements
Rank 1
Veteran
Nikolay
Telerik team
Share this question
or