RadDiagram inside RadOrgChart ItemTemplate

6 posts, 0 answers
  1. Bartłomiej
    Bartłomiej avatar
    5 posts
    Member since:
    Jun 2014

    Posted 17 Nov 2014 Link to this post

    Hi,

    Because RadOrgChart doesn't support multiple parents I came up with workaround that inserting RadDiagram in RadOrgChart ItemTemplate could do the trick for me but I'm having some trouble with that.
    Is it even possible what I'm trying to achieve, if yes, could you prepare project with a sample ?
  2. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 20 Nov 2014 Link to this post

    Hi Bartłomiej,

    I am not sure what your scenario is, so it will be difficult to prepare a sample that will help you. How are you currently using the RadOrgChart? How will adding a RadDiagram control in each item of the org chart allow you to configure multiple parents for an item?

    That being said, the diagram also exposes a way to specify the template of its shapes (http://www.telerik.com/help/aspnet-ajax/diagram-shape-templates.html), so you could replace the org chart control with a diagram if your scenario allows it.

    Regards,
    Slav
    Telerik
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bartłomiej
    Bartłomiej avatar
    5 posts
    Member since:
    Jun 2014

    Posted 20 Nov 2014 in reply to Slav Link to this post

    Hi Slav,

    I needed to insert it only inside in few items of org chart. I was thinking about building fragment in RadDiagram from point where it splits to the point when it connects to same item and inserting it in RadOrgChart item. This would give me all possibilities of OrgChart like collapse or drilldown and with RadDiagram I would get multiple parents which is required for my project.

    I already started working with only RadDiagram and the only problem I'm facing right now is that Shapes require to have dynamic templates. In each shape I need to put dynamic value of rows, each row should contain different img and different text.

    Regards,
    Bartłomiej
  5. Bartłomiej
    Bartłomiej avatar
    5 posts
    Member since:
    Jun 2014

    Posted 20 Nov 2014 in reply to Slav Link to this post

    Hi Slav,

    I wanted to insert RadDiagram only in few items of RadOrgChart. I thought about generating RadDiagram from point where my OrgChart/diagram splits to the point where it connects and inserting it in RadOrgChart item. With that I would have all possibilities of OrgChart like collapse or drill down and with Diagram I would get multiple parents which my project requires.

    I already stared working only with RadDiagram and my current problem is that each Shape's template needs to have dynamic number of rows. Each row should contain different image and different text.

    Regards,
    Bartłomiej
  6. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 04 Dec 2014 Link to this post

    Hi Bartłomiej,

    Currently it is not possible to insert a RadDiagram in an item of RadOrgChart because of a bug with this scenario. I have reported it to our developers, however I cannot provide a firm estimation when it will be fixed. You can use the following bug report item I logged to follow its status, vote for it or comment it: http://feedback.telerik.com/Project/108/Feedback/Details/145637

    The visual template of a diagram shape allows the insertion of multiple text rows and images, nevertheless this content cannot be changed dynamically with interactions once you define it via the template.

    I updated your Telerik points as a token of gratitude for reporting this issue.

    Regards,
    Slav
    Telerik
  7. Bartłomiej
    Bartłomiej avatar
    5 posts
    Member since:
    Jun 2014

    Posted 05 Dec 2014 Link to this post

    Hi Slav

    I got the same bug you reported to developers but I thought that I did something wrong and that it is not a general issue. It would be nice to have a possibility to insert RadDiagram in another control's template but I managed to do what I needed just using RadDiagram.

    Here are fragments of code which I wrote to achieve different template in each shape:

    C# class
    [Serializable]
    public class Takt
    {
        public string ID { get; set; }
        public List<EQ> EQList { get; set; }
     
    }
     
    public class EQ
    {
        public string image { get; set; }
        public string status { get; set; }
        public string Text { get; set; }
        public string ID { get; set; }
        public string level { get; set; }
    }

    later in code fill List<Takt> and serialize it with JavaScriptSerializer into Hidden Field value
    System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
    hfDiagramData.Value = serializer.Serialize(TaktList);


    On Page
           var visualTemplate = function (data) {
               var dataviz = kendo.dataviz;
     
               var group = new dataviz.diagram.Group({
                   autoSize: true,
     
               });
     
               hfDiagramData = document.getElementById("<%=hfDiagramData.ClientID%>")
               if (hfDiagramData != null)
                   var DiagramData = JSON.parse(hfDiagramData.value);
               if (DiagramData != undefined) {
                   for (var i in DiagramData) {
                       if (DiagramData[i].ID == data.id) {
     
    //data(shape).id should be the same as in DiagramData(TaktList) if you need specific data in specific shape
     
                           var EQList = DiagramData[i].EQList;
                           .
                           .
                           .
                           for (var j = 0; j < EQList.length; j++) {
                               var image = new dataviz.diagram.Image({
                                   source: EQList[j].image,
                                   x: xIN,
                                   y: y,
                                   width: 15,
                                   height: 15
     
                               });
                              group.append(image);
     
                                   var textBlock2 = new dataviz.diagram.TextBlock({
                                       text: EQList[j].Text,
                                       fontSize: 14,
                                       x: xIN + 20,
                                       y: y
                                   });
                               group.append(textBlock2);
                               y = y + 17;
                         }
                     }
                 return group;
                 }
             }

    I hope that this will help someone.

    Regards,
    Bartłomiej

    P.S. Sorry for double post
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017