RadDiagram inside RadOrgChart ItemTemplate

[Bartłomiej]

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 ?

[Slav]

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

[Bartłomiej]

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

[Bartłomiej]

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

[Slav]

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

[Bartłomiej]

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