Kendo Diagram Datasource - json - json

Question

Goal: Use kendo ui diagram component to draw a department to project workflow
The workflow is structured in the following manner:
Each Department may have multiple Strategies, each Strategy may have multiple Programs and each Program may have multiple projects.
I have a WCF service that when called returns a json string.
The service calls a stored proc that returns XML, in vb.net then I convert that XML into json (using json.net).
service code:
Public Function GetStakeholderRelationshipMatrix(StakeholderId As Integer) As String
Try
conn.Open()
Dim da = New SqlDataAdapter()
sCommand = New SqlCommand("uspGetRelationshipMatrix", conn)
sCommand.CommandType = CommandType.StoredProcedure
sCommand.Parameters.AddWithValue("#StakeholderId", StakeholderId)
xmlDoc.LoadXml(sCommand.ExecuteScalar())
Return JsonConvert.SerializeXmlNode(xmlDoc)
Catch ex As Exception
Return -1
End Try
End Function
XML Data
<Departments>
<Department Id="7" Name="Information Technology Department">
<Strategies Id="21" Name="Increase Revenue">
<Programs Id="45" Name="Program1">
<Projects Id="4" Name="test3" />
</Programs>
<Programs Id="49" Name="Program4">
<Projects Id="2" Name="Test1" />
<Projects Id="3" Name="Test2" />
</Programs>
</Strategies>
</Department>
</Departments>
Json Converted Data:
{"d":"{\"Departments\":{\"Department\":{\"#Id\":\"7\",\"#Name\":\"Information Technology Department\",\"Strategies\":{\"#Id\":\"21\",\"#Name\":\"Increase Revenue\",\"Programs\":[{\"#Id\":\"45\",\"#Name\":\"Program1\",\"Projects\":{\"#Id\":\"4\",\"#Name\":\"test3\"}},{\"#Id\":\"49\",\"#Name\":\"Program4\",\"Projects\":[{\"#Id\":\"2\",\"#Name\":\"Test1\"},{\"#Id\":\"3\",\"#Name\":\"Test2\"}]}]}}}}"}
I am have been unable to bind the data (json) to the diagram component in order to successfully display the workflow. I need help binding the json string to the diagram component.
Kendo code:
<div id="visual"></div>
var dsRelationshipMatrix = new kendo.data.DataSource({
transport: {
read: function (options) {
$.ajax({
url: "wcf service return json string",
contentType: "application/json; charset=utf-8",
dataType: "json",
type: "GET",
success: function (result) {
var obj = $.parseJSON(result.d);
if (obj == null) {
options.success([]);
} else {
options.success(obj);
}
},
error: function (result) {
options.error(result)
}
});
}
},
schema: {
data: function (data) {
return data
}
}
}); //closes data source
function createDiagram() {
$("#visual").kendoDiagram({
dataSource: new kendo.data.HierarchicalDataSource({
data: dsRelationshipMatrix,
schema: {
model: {
children: "Strategies"
}
}
}),
layout: {
type: "layered"
},
shapeDefaults: {
visual: visualTemplate
},
connectionDefaults: {
stroke: {
color: "#979797",
width: 2
}
}
});
var diagram = $("#visual").getKendoDiagram();
diagram.bringIntoView(diagram.shapes);
}

Answer 1

After going through the pain for some time, I got it to work and wanted to share that information with everyone. This might not be the perfect way but it is one of the ways to do it.
The key is going to be the structure of the SQL data (extracted as XML).
In SQL I ended up performing a recursive loop that extracts the data and formats it into XML. So a root node of ROOT encompasses an item (Department - there can only be one department) and each hierarchical category has an items section with an item section as a child of items. Wording the structure is rather difficult so...
SQL:
SELECT
--dStakeholder.StakeholderId AS '#Id',
dStakeholder.FunctionalDepartment as 'item/info' ,
'#1696d3' as 'item/colorScheme',
(SELECT
--dStrategy.StrategyId AS '#Id',
dStrategy.StrategyDescription 'item/info',
'#1696d3' as 'item/colorScheme' ,
(Select
--dPrograms.ProgramId as '#Id',
dPrograms.ProgramDescription 'item/info' ,
'#1696d3' as 'item/colorScheme' ,
(Select
--dHeaders.ProjectId as '#Id',
dHeaders.ProjectName 'item/info',
'#1696d3' as 'item/colorScheme'
from
dbo.ProjectHeaders as dHeaders
inner join (select distinct projectid, programid, departmentid from dbo.ProjectHeaders) as pp
on dHeaders.ProjectId = pp.ProjectId
where pp.ProgramId = dPrograms.ProgramId and pp.departmentid = dStakeholder.Stakeholderid
FOR XML PATH(''), TYPE
) as 'item/items'
from
dbo.ProjectPrograms as dPrograms
inner join (select distinct programid, strategyid , departmentid from dbo.ProjectHeaders) as sp
on dPrograms.ProgramId = sp.ProgramId
where sp.StrategyId = dStrategy.StrategyId and sp.departmentid = dstakeholder.stakeholderid
FOR XML PATH(''), TYPE
) as 'item/items'
FROM
dbo.ProjectStrategies as dStrategy
inner join (select distinct strategyid , departmentid from dbo.ProjectHeaders) as bss
on dStrategy.StrategyId = bss.StrategyId
WHERE
dStakeholder.StakeholderId = bss.DepartmentId
FOR XML PATH(''), TYPE
) as 'item/items'
FROM
dbo.Stakeholders as dStakeholder
FOR XML PATH('root'), type
My data from the sql appears in XML in this manner:
<root>
<item>
<info>ERISA Compliance Services Department</info>
<colorScheme>#1696d3</colorScheme>
<items>
<item>
<info>New Commission</info>
<colorScheme>#1696d3</colorScheme>
<items>
<item>
<info>Program3</info>
<colorScheme>#1696d3</colorScheme>
<items>
<item>
<info>test3</info>
<colorScheme>#1696d3</colorScheme>
</item>
</items>
</item>
</items>
</item>
<item>
<info>SAGA Development</info>
<colorScheme>#1696d3</colorScheme>
<items>
<item>
<info>Program1</info>
<colorScheme>#1696d3</colorScheme>
<items>
<item>
<info>Test1</info>
<colorScheme>#1696d3</colorScheme>
</item>
</items>
</item>
<item>
<info>Program4</info>
<colorScheme>#1696d3</colorScheme>
<items>
<item>
<info>Test2</info>
<colorScheme>#1696d3</colorScheme>
</item>
</items>
</item>
</items>
</item>
</items>
</item>
</root>
Now I go through my xml and grab the important information. Code in VB.net. There is a class for item that just list the properties that I would need.
conn.Open()
Dim dt As New DataTable
Dim da As New SqlDataAdapter("uspGetRelationshipMatrix " + Convert.ToString(StakeholderId), conn)
da.Fill(dt)
Dim sb = New StringBuilder()
If dt.Rows.Count <> 0 Then
For Each row As DataRow In dt.Rows
sb.Append(row.Item("Data"))
Next
End If
conn.Close()
xmlDoc.LoadXml(sb.ToString)
Dim itemList As New List(Of Item)
Dim RootNode As XmlNode
RootNode = xmlDoc.SelectSingleNode("/root")
For Each DeptNode As XmlNode In RootNode.ChildNodes
Dim deptItem As New Item
'check to ensure that is not nothing
Dim info As XmlNode = DeptNode.SelectSingleNode("info")
Dim cs As XmlNode = DeptNode.SelectSingleNode("colorScheme")
deptItem.info = info.InnerText
deptItem.colorScheme = cs.InnerText
'Begin items loop for child nodes
Dim stratItems As XmlNode = DeptNode.SelectSingleNode("items")
For Each stratItemNode As XmlNode In stratItems.ChildNodes
Dim stratItem As New Item
Dim stratinfo As XmlNode = stratItemNode.SelectSingleNode("info")
Dim stratcs As XmlNode = stratItemNode.SelectSingleNode("colorScheme")
stratItem.info = stratinfo.InnerText
stratItem.colorScheme = stratcs.InnerText
'place start loop
Dim progItems As XmlNode = stratItemNode.SelectSingleNode("items")
For Each progItemNode As XmlNode In progItems.ChildNodes
Dim progItem As New Item
Dim proginfo As XmlNode = progItemNode.SelectSingleNode("info")
Dim progcs As XmlNode = progItemNode.SelectSingleNode("colorScheme")
progItem.info = proginfo.InnerText
progItem.colorScheme = progcs.InnerText
'place start loop
Dim projItems As XmlNode = progItemNode.SelectSingleNode("items")
For Each projItemNode As XmlNode In projItems.ChildNodes
Dim projItem As New Item
Dim projinfo As XmlNode = projItemNode.SelectSingleNode("info")
Dim projcs As XmlNode = projItemNode.SelectSingleNode("colorScheme")
projItem.info = projinfo.InnerText
projItem.colorScheme = projcs.InnerText
'place start loop
'place end loop
progItem.items.Add(projItem)
Next
'place end loop
stratItem.items.Add(progItem)
Next
'place end loop
deptItem.items.Add(stratItem)
Next
'end items loop
itemList.Add(deptItem)
Next
I then use newtonsoft json in vb.net in order to present the information as a json string.
Json string:
[ 
{ 
"info":"ERISA Compliance Services Department",
"colorScheme":"#1696d3",
"items":[ 
{ 
"info":"New Commission",
"colorScheme":"#1696d3",
"items":[ 
{ 
"info":"Program3",
"colorScheme":"#1696d3",
"items":[ 
{ 
"info":"test3",
"colorScheme":"#1696d3",
"items":[ 
]
}
]
}
]
},
{ 
"info":"SAGA Development",
"colorScheme":"#1696d3",
"items":[ 
{ 
"info":"Program1",
"colorScheme":"#1696d3",
"items":[ 
{ 
"info":"Test1",
"colorScheme":"#1696d3",
"items":[ 
]
}
]
},
{ 
"info":"Program4",
"colorScheme":"#1696d3",
"items":[ 
{ 
"info":"Test2",
"colorScheme":"#1696d3",
"items":[ 
]
}
]
}
]
}
]
}
]
With the json formatted in this structure, now I just plugged my json to kendo diagram and now you get a visual hierarchical image of flow.