Inserting a background grid into the diagram

[Siarhei]

 

Hi, I'm trying to insert a grid in the background of a diagram and have found some suggestions on how to do it, but the problem with these solutions is that when I try to remove a specific element, the other element disappears.

 

Suggested solution: image in Kendo UI for jQuery | Telerik Forums or Untitled | Kendo UI Dojo (telerik.com)

The problem is this insert 

diagram.mainLayer.drawingElement.insertAt(grid, 0)

 As far as I understand, this breaks the sequence and removes the previous element.

 

Does anyone know how to avoid this behavior or another solution to insert grid?

PS: The grid is only needed for positioning.

 

[Nikolay]

Hi Siarhei,

You can just use CSS and apply a background to the diagram div element. Please check the following article:

• https://docs.telerik.com/kendo-ui/knowledge-base/diagram-background

Dojo demo: https://dojo.telerik.com/OCOpaviZ

If this does not satisfy the requirement can you please share a Dojo demo where the problem is demonstrated?

Regards,

Nikolay

[Siarhei]

Hi Nikolay,

Thank you for your reply!

I got your idea and example, it works well, but I need a grid on the diagram to position my shapes, and I'm also not sure if the css will behave well when we resize/scale the diagram.

For example, I can add a grid like shape - http://dojo.telerik.com/EJoCeWIJ, but this approach has many disadvantages: I have to disable this shape editable and connections, also I have to redraw the css cursor style to "default" to not confuse the user; this solution does not cover the whole canvas and I have to set the value explicitly, in this example it is 0 to 1000; it will take time to draw many paths.

Here is another example http://dojo.telerik.com/iHOSacEZ/3, It works better, but the issue when you delete shape makes this approach impossible to use.

Or maybe it is possible with css, but so far I have no idea how to draw a grid that will work when scaling and resizing the diagram.

Do you have any ideas, could you share if so?

Thanks!

[Georgi Denchev]

Hi, Siarhei,

You could use the second approach(drawing the grid onto the diagram) in a slightly different manner.

Add an "empty" dataitem at the top of the diagram data:

var data = [{grid:true},{
          firstName: "Antonio",
          lastName: "Moreno",

In the visual function of the diagram, check if you're currently drawing the "empty" item:

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

          if(dataItem.grid) {

If you're, draw the grid group like you previously did. The diagram.Path class does not have moveTo and lineTo methods so you have to use the regular Path commands.

          if(dataItem.grid) {
            var max = 100 * GRID_SIZE; 
            var min = - max;

            for (var i = -100; i < 100; i++) {
              let currentSize = i * GRID_SIZE;
              
              g.append(new dataviz.diagram.Path({
                stroke: {
                  color: "#eeeeee"
                },
                data: "M " + min + " " + currentSize + " L " + max + " " + currentSize
              }));
              g.append(new dataviz.diagram.Path({
                stroke: {
                  color: "#eeeeee"
                },
                data: "M " + currentSize + " " + min + " L " + currentSize + " " + max
              }));
            }
            return g;
          }

Lastly, bring the first shape into view, instead of all of them. Otherwise the diagram will be very zoomed out.

diagram.bringIntoView(diagram.shapes[1]);

Since the Grid is now a "shape" and created before the diagram is initialized, the other shapes will have the correct index when you remove them.

Dojo

https://dojo.telerik.com/@gdenchev/EVIwovER 

Best Regards,

Georgi