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

How to make rectangle in diagram with link clikcable?

7 Answers 317 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
DotMax
Top achievements
Rank 1
DotMax asked on 11 Nov 2015, 03:06 PM

I am in the process of preparing Org Chart in MVC diagram. Everything works fine. I just need to have clickable link for every employee rectangle box in diagram.

Also, Diagram have TextBlock,image and etc. Does it have anything like LinkBlock to have link or href block to redirect to something else? please add some code for the same.

 Can we have a scroll bar for the entire diagram to go left and right and top to bottom. Please add some code snippet to scroll the diagram to see all the people instead of zoom by default.

Here is my rectangle that I need to have clickable link.

 

  g.append(new dataviz.diagram.Rectangle({
            width: 320,
            height: 125,
            stroke: {
                width: 0
            },
            fill: {
                gradient: {
                    type: "linear",
                    stops: [
                        {
                            color: dataItem.ColorScheme,
                            offset: 0,
                            opacity: 0.5
                        }, {
                            color: dataItem.ColorScheme,
                            offset: 1,
                            opacity: 1
                        }
                    ]
                }
            }
        }));​

7 Answers, 1 is accepted

Sort by
0
DotMax
Top achievements
Rank 1
answered on 11 Nov 2015, 10:03 PM

I am still unable to get the horizontal and vertical scrolling bar to see the org chart completely. also, can we have an option to focus on any particular people by default? 

I was able to get the link via Html.Kendo().Diagram().Events(c=>c.Click("onClick"))

 

Please find below the code.

<script>
    function onClick(e) {
     
        location.href('./?id=' + e.item.dataItem.CorpId);      

    }
</script>​

0
DotMax
Top achievements
Rank 1
answered on 12 Nov 2015, 02:48 PM

Scrolling works only with the below example but that should not be the solution. What happens when a manager has 50 reportees under him and how to see all 50 employees under the manager without your binary providing scrolling support. This should be showstopper if your kendo mvc dll doesnt support the scrolling. Also, I am asking for focusing on central diagram position by default after the diagram was rendered. It always shows the left aligned diagram and cant see other employees without the scroll bar.

 

Also, your PDF export doesnt show the employee images if these images have got generated dynamically. Please let me know with the ways to get images on PDF export and other export with dynamic images (not having images in local app folders).

 

Set  overflow: auto of the <div class="chart-wrapper">;
Set width of the aforementioned div;
Set width of the <div id="chart"> to a value higher than it's parent div width size.​

  • Set  overflow: auto of the <div class="chart-wrapper">;
  • Set width of the aforementioned div;
  • Set width of the <div id="chart"> to a value higher than it's parent div width size.
  • Set  overflow: auto of the <div class="chart-wrapper">;
  • Set width of the aforementioned div;
  • Set width of the <div id="chart"> to a value higher than it's parent div width size.
  • Set  overflow: auto of the <div class="chart-wrapper">;
  • Set width of the aforementioned div;
  • Set width of the <div id="chart"> to a value higher than it's parent div width size.
  • Set  overflow: auto of the <div class="chart-wrapper">;
  • Set width of the aforementioned div;
  • Set width of the <div id="chart"> to a value higher than it's parent div width size.
  • Set  overflow: auto of the <div class="chart-wrapper">;
  • Set width of the aforementioned div;
  • Set width of the <div id="chart"> to a value higher than it's parent div width size.
  • Set  overflow: auto of the <div class="chart-wrapper">;
  • Set width of the aforementioned div;
  • Set width of the <div id="chart"> to a value higher than it's parent div width size.
  • 0
    Daniel
    Telerik team
    answered on 13 Nov 2015, 01:54 PM
    Hello,

    Straight to your questions:
    • Links are not supported by the Diagram. Navigating to another page when clicking on an element should be implemented via JavaScript.
    • The diagram supports panning which is activated by holding the ctrl key.
      Showing scrollbars is not supported but can be implemented by setting sufficient size to the diagram element so that all shapes are visible and adding a parent element with overlflow auto/scroll styles. The size needed to display all shapes can be found with the boundingBox method(example).
    • I am not sure if I understand what you mean by dynamic images. If the images are loaded from another domain then please check this documentation topic. If this is not the case then please clarify what you mean.



    Regards,
    Daniel
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
    0
    DotMax
    Top achievements
    Rank 1
    answered on 13 Nov 2015, 05:45 PM

    1) Links are not supported? Thats rally strage, What if some want to see the employee email address link in the Org Chart? Dont you think this will be an issue and basic limitation?

    2) I want you to give us an example with Directory, Manager and 75 employees reporting to manager with scroll bar and default loading should show the director,manager and employees. I should scroll left and right to see other employees. Please provide an example piece of code.

    3) I clearly see this as showstopper without providing some basic needs for Diagram. Panning and zooming doesnt help to see all employees as when we zoom out to see 100 employees their rectangles become very tiny and non readable.

    4) Images are from other domain and PDF export clearly missed the images. You can give a try with example.Also  your demo example Image export is also not working. (its not working in your demo site as well).

    5) I wonder how does Telerik release this tool without thinking of actual Org chart scenarios like scroll bar to see all employees, Links and etc.

    0
    Daniel
    Telerik team
    answered on 17 Nov 2015, 01:14 PM
    Hello again,

    1. If you believe that links should be added as built-in elements then I would suggest to open a feature request in our user voice forum.
    2. The approach to show scrollbars will be the same no matter the number of shapes or the way they are arranged. I updated the example from my previous reply to use data with the specified structure.
    3. Panning allows to see all shapes. Here is a screen cast that demonstrates using panning with the same data.
    4. Thank you for pointing out the issue with the image export demo. It will occur if the demo is requested via the HTTP protocol because the image is request via HTTPS. We will fix it with the next update.
      As for the images during PDF export - which browser are you using? As described in the documentation the images might not be loaded even with CORS headers in IE 9.
    5. As already mentioned all shapes can be seen by panning the diagram. Links are not yet implemented because there hasn't been sufficient interest in such feature.


    Regards,
    Daniel
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
    0
    DotMax
    Top achievements
    Rank 1
    answered on 02 Dec 2015, 03:17 PM

    Thanks for your response and it looks good with scroll bars.I face couple of issues.

    When the diagram renders, I made the scroll bar to central positioned (based on width) to see the Manger - Employee - Reportees.

    Here is the code I use it for the same in creatediagram method.

     var diagram = jQuery("#diagram").getKendoDiagram();
                var bbox = diagram.boundingBox();
                diagram.wrapper.width(bbox.width + bbox.x);
                diagram.wrapper.height(bbox.height + bbox.y);
                diagram.resize();
                var outerDiv = $("#example");
                outerDiv.scrollLeft((diagram.wrapper.width() / 2) - (outerDiv.width()/2));

     

    I also have a click event for all the employees and when I click (in the first click) rectangle was highlighted with another rectangle dot points but it is not firing the click event that I have for the rectangle (you can also see the same behavior in your example), also when I click my scroll bar is always back to left most width (not central aligned). Can you help me on this?

    Second issue is SVG export. I call an api service method each time to get employees image in digram (within the same site but different URLs for image service api call). It renders correctly in the diagram. But When I export to SVG, I dont see images, also when I export a bigger diagram like 75 reportees to an employee, it doesnt show all the nodes, It just shows the default view with some 5 to 6 nodes. Can you help me on this? I have attached the SVG diagram for your reference

    Here is the code I have for SVG export.

       jQuery(".export-svg").click(function () {
                var diagram = jQuery("#diagram").getKendoDiagram();
                diagram.exportSVG().done(function (data) {
                    kendo.saveAs({
                        dataURI: data,
                        fileName: "diagram.svg",
                        proxyURL: "//demos.telerik.com/kendo-ui/service/export"
                    });
                });
            });

    0
    T. Tsonev
    Telerik team
    answered on 04 Dec 2015, 03:39 PM
    Hi,

    I tried to reproduce the scrolling issue in Daniels example, but I'm not quite sure why it doesn't behave as described.
    Can you please send us a link to the modified version?

    As for the SVG export, images need to have CORS headers set up in order to be accessible by the export code.

    Regards,
    T. Tsonev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
    Tags
    Diagram
    Asked by
    DotMax
    Top achievements
    Rank 1
    Answers by
    DotMax
    Top achievements
    Rank 1
    Daniel
    Telerik team
    T. Tsonev
    Telerik team
    Share this question
    or