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

Issue Setting Shape's Coordinates Based on Fields in Datasource

6 Answers 17 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Kyle
Top achievements
Rank 2
Kyle asked on 07 Nov 2019, 10:06 PM

My goal here is to use a diagram that will save the coordinates of the diagram's shapes to a table in a SQL database.  Then have a datasource that reads from that table and display the shapes in the same position the next time the user accesses that diagram.

I'm trying to test this out by setting up a static list of data in my Controller and accessing that data in the diagram's data source.  In my Kendo Diagram I am using shapesDefaults.visual to set a visual template that then grabs it's x and y values from the item in the data source.

The shapes on the screen then show correctly positioned on the diagram, but everything from the content of the shapes and the area that interacts with the shape are all stacked in the 0,0 position in the top left corner of the diagram.

I've included my code in the attached zip file, as well as a screenshot of the resulting diagram.

What am I missing to get then entire diagram shape, content and interaction ability to position to my coordinates?

6 Answers, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 11 Nov 2019, 01:02 PM

Hello, Kyle,

The Kendo UI Diagram schema model id should be fixed to have the correct behaviour in terms of editing as it is pointing to a non-existing field at present:

schema: {
   model: {
     id: "IDSample",

In addition to that, you should use the bringIntoView() method in the createDiagram function to position the shapes in the view:

        var diagram = $("#diagram").kendoDiagram({
         /* diagram definition */
        }).data("kendoDiagram");

        diagram.bringIntoView(diagram.shapes);

In case you have further questions, please feel free to ask.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Kyle
Top achievements
Rank 2
answered on 11 Nov 2019, 05:20 PM

Hi Alex,

Thanks for the response.  I've corrected the model id and added the bringIntoView() method.  The behavior did change when adding bringIntoView(), but the labels for the shapes are now stacked in the center of the diagram with the shapes themselves being offset from the center by the x and y values.  So, it seems to bring me further from the desired behavior.

I've attached my current code and a screenshot of what I'm seeing.   What am I missing that is causing the shapes content to not follow the x and y coordinates?

0
Alex Hajigeorgieva
Telerik team
answered on 13 Nov 2019, 04:42 PM

Hi, Kyle,

Thank you for the feedback.

If you do not want to center the shapes into the view, then it would be better without calling the bringIntoView() method. I believe that the issue is with the shape content. Instead of using that, you could append the text yourself as part of the visual function and then everything seems to work well. Here is a runnable Dojo:

https://dojo.telerik.com/@bubblemaster/ovAlicIP/4

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Kyle
Top achievements
Rank 2
answered on 14 Nov 2019, 02:58 PM

Hi Alex,

Appending the text to the visual function works well for me to get the text to overlay the shapes.  The one piece I'm missing is being able to interact with the shapes in the position they are displayed.  In order to interact with the shapes in the Dojo, there is an invisible block for each shape located in the top-left (0,0) position.

Is there a way to do this?  I am looking here and can't find the options available to append to the visual function.

Thanks Again!

0
Accepted
Alex Hajigeorgieva
Telerik team
answered on 18 Nov 2019, 12:44 PM

Hello, Kyle,

I see now what you mean.

The reason this is happening is because the shapes are not inline and there is no layout. The shape visual just draws the visual inside the shape but its coordinates are not changed.

We can either pass the shapes as they are to the diagram configuration:

https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram/configuration/shapes.x

Or, we can provide the position of the shape later on:

https://dojo.telerik.com/IcOVEkaw

        dataBound: function(e){
          	var shapes = e.sender.shapes;
            for(var i=0; i< shapes.length;i++){
            	shapes[i].x = shapes[i].dataItem.x;
              shapes[i].y = shapes[i].dataItem.y;
              shapes[i].redraw({
              	x:shapes[i].dataItem.x,
                y:shapes[i].dataItem.y
              });
            }            
          }

I hope this helps.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Kyle
Top achievements
Rank 2
answered on 18 Nov 2019, 08:44 PM
Thanks so much Alex, the last Dojo link got me to where I needed to be!
Tags
Diagram
Asked by
Kyle
Top achievements
Rank 2
Answers by
Alex Hajigeorgieva
Telerik team
Kyle
Top achievements
Rank 2
Share this question
or