<
telerik:RadGrid
ID
=
"FederationGrid"
runat
=
"server"
OnNeedDataSource
=
"FederationGrid_NeedDataSource"
OnItemCreated
=
"FederationGrid_ItemCreated"
OnItemDataBound
=
"FederationGrid_ItemDataBound"
>
<
MasterTableView
EnableHierarchyExpandAll
=
"true"
AutoGenerateColumns
=
"False"
TableLayout
=
"Fixed"
DataKeyNames
=
"Id"
>
<
Columns
>
<
telerik:GridBoundColumn
DataField
=
"Id"
HeaderText
=
"Federation Name"
UniqueName
=
"FederationId"
>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"Status"
HeaderText
=
"Status"
UniqueName
=
"Status"
>
</
telerik:GridBoundColumn
>
<
telerik:GridButtonColumn
HeaderText
=
"Federation Detail"
Text
=
"Detail"
UniqueName
=
"FederationDetail"
ButtonType
=
"PushButton"
>
</
telerik:GridButtonColumn
>
</
Columns
>
</
MasterTableView
>
</
telerik:RadGrid
>
<
telerik:RadAjaxPanel
ID
=
"RadAjaxPanel"
runat
=
"server"
LoadingPanelID
=
"RadAjaxLoadingPanel"
>
<
telerik:RadDockLayout
runat
=
"server"
ID
=
"RadDockLayout_Federation"
OnSaveDockLayout
=
"RadDockLayout_SaveDockLayout"
OnLoadDockLayout
=
"RadDockLayout_LoadDockLayout"
>
<
telerik:RadDockZone
ID
=
"RadDockZone_Federation"
runat
=
"server"
Orientation
=
"Horizontal"
>
</
telerik:RadDockZone
>
</
telerik:RadDockLayout
>
</
telerik:RadAjaxPanel
>
private
List<DockState> CurrentDockStates
{
get
{
// Store the info about the added docks in the session.
List<DockState> _currentDockStates = (List<DockState>)Session[
"CurrentDockStatesDeployment"
];
if
(Object.Equals(_currentDockStates,
null
))
{
_currentDockStates =
new
List<DockState>();
Session[
"CurrentDockStatesDeployment"
] = _currentDockStates;
}
return
_currentDockStates;
}
set
{
Session[
"CurrentDockStatesDeployment"
] = value;
}
}
protected
void
Page_Load(
object
sender, EventArgs e)
{
}
protected
void
FederationGrid_NeedDataSource(
object
sender, GridNeedDataSourceEventArgs e)
{
this
.federationList = DataModelRequestHandler.GetFederationsAsync(
this
.environment);
FederationGrid.DataSource =
this
.federationList;
}
protected
void
FederationGrid_ItemCreated(
object
sender, GridItemEventArgs e)
{
if
(e.Item
is
GridDataItem)
{
GridDataItem dataitem = (GridDataItem)e.Item;
Button btn = (Button)dataitem[
"FederationDetail"
].Controls[0];
btn.Click +=
new
EventHandler(FederationDetailBtnClick);
}
}
protected
void
FederationGrid_ItemDataBound(
object
sender, GridItemEventArgs e)
{
if
(e.Item
is
GridDataItem)
{
GridDataItem dataitem = (GridDataItem)e.Item;
Button btn = (Button)dataitem[
"FederationDetail"
].Controls[0];
btn.CommandArgument = (e.Item
as
GridDataItem)[
"FederationId"
].Text;
}
}
protected
void
RadDockLayout_LoadDockLayout(
object
sender, DockLayoutEventArgs e)
{
// Populate the event args with the state information. The RadDockLayout control
// will automatically move the docks according that information.
foreach
(DockState state
in
CurrentDockStates)
{
e.Positions[state.UniqueName] = state.DockZoneID;
e.Indices[state.UniqueName] = state.Index;
}
}
protected
void
RadDockLayout_SaveDockLayout(
object
sender, DockLayoutEventArgs e)
{
CurrentDockStates = RadDockLayout_Federation.GetRegisteredDocksState();
}
private
void
FederationDetailBtnClick(
object
sender, EventArgs e)
{
var btnView = (Button)sender;
var FederationId = btnView.CommandArgument;
// Create RadDock
RadDock dock =
this
.CreateRadDock(FederationId);
// Dock it on DockZone
RadDockLayout_Federation.Controls.Add(dock);
dock.Dock(RadDockZone_Federation);
}
private
RadDock CreateRadDock(
string
dockTitle)
{
RadDock dock =
new
RadDock();
dock.DockMode = DockMode.Docked;
dock.UniqueName = Guid.NewGuid().ToString().Replace(
"-"
,
"a"
);
dock.ID =
string
.Format(
"RadDock{0}"
, dock.UniqueName);
dock.Title = dockTitle;
dock.Commands.Add(
new
DockCloseCommand());
dock.Commands.Add(
new
DockExpandCollapseCommand());
return
dock;
}
I am using RadBinaryImage control with SqlDataSource. If the VarBinary field contains a NULL value I am getting this error: “Unable to cast object of type 'System.DBNull' to type 'System.Byte[]' “.
My understanding is that a NULL field should be cast to a null or empty byte[].
Can someone please show me how check if the supplied value is of type DBNull and how to change it to appropriate empty byte array or null in C#?
Now, I can archive the first, second and third requirements. However, I have the problem when I try to load data from JSON. The Images are missing, and the connections also lost. I try to solve the problem by using 'visualTemplate' by setting '<ShapeDefaultsSettings Visual="visualTemplate" />', but it breaks my diagram instead. I have attached my code below.
This is my drag & drop eventfunction
setDropTargetOnDiagram(element) {
$telerik.$(element).kendoDropTarget({
drop:
function
(e) {
var
draggable = e.draggable,
element = e.dropTarget,
diagram = element.getKendoDiagram();
if
(draggable && draggable.hint) {
var
item = draggable.hint.data(
"data"
),
offset = draggable.hintOffset,
point =
new
kendo.dataviz.diagram.Point(offset.left, offset.top),
transformed = diagram.documentToModel(point);
item.id +=
"_"
+ generateUUID();
item.x = transformed.x;
item.y = transformed.y;
var
shape = createCustomShape(item);
diagram.addShape(shape);
}
}
});
}
function
createCustomShape(item) {
var
shape =
new
kendo.dataviz.diagram.Shape(item);
var
image =
new
kendo.dataviz.diagram.Image({
source:
"../Images/Diagram/"
+ item.content.ImageName,
x: 0,
y: 0,
width: item.width,
height: item.height,
stroke: {
width: 0
}
});
var
textBlock =
new
kendo.dataviz.diagram.TextBlock({
text: item.content.CustomText,
color:
"#000"
,
fontSize: 12,
x: item.content.TextX,
y: item.content.TextY
});
shape.visual.append(image);
shape.visual.append(textBlock);
return
shape;
}
<
div
class
=
"dragItem"
data-data
=
'{"id": "StartProcess", "content": {"CustomText":"Start", "TextX":"18", "TextY":"70", "ImageName":"64Play.png"}, "width":"64", "height":"64"}'
>
<
asp:Image
ID
=
"imgPersonal"
runat
=
"server"
ImageUrl
=
"~/Images/Diagram/64Play.png"
/>
</
div
>
function
saveJSON() {
var
json = diagram.save();
var
jsonStr = Sys.Serialization.JavaScriptSerializer.serialize(json);
var
txtDiagramSave= document.getElementById(
"txtDiagramSave"
);
txtDiagramSave.value = js_beautify(jsonStr);
}
function
loadJSON() {
var
txtDiagramSave= document.getElementById(
"txtDiagramSave"
);
diagram.load(Sys.Serialization.JavaScriptSerializer.deserialize(txtDiagramSave.value));
}
{
"shapes"
: [{
"id"
:
"StartProcess_1242084a-6aa2-4320-8b89-accf2cd22f25"
,
"hover"
: {},
"cursor"
:
"pointer"
,
"content"
: {
"align"
:
"center middle"
,
"text"
:
""
,
"CustomText"
:
"Start"
,
"TextX"
:
"18"
,
"TextY"
:
"70"
,
"ImageName"
:
"64Play.png"
},
"selectable"
:
true
,
"serializable"
:
true
,
"enable"
:
true
,
"type"
:
"rectangle"
,
"path"
:
""
,
"autoSize"
:
true
,
"visual"
:
null
,
"x"
: 134,
"y"
: 104,
"minWidth"
: 20,
"minHeight"
: 20,
"width"
: 65,
"height"
: 65,
"editable"
: {
"connect"
:
true
},
"connectors"
: [{
"name"
:
"Top"
,
"description"
:
"Top Connector"
}, {
"name"
:
"Right"
,
"description"
:
"Right Connector"
}, {
"name"
:
"Bottom"
,
"description"
:
"Bottom Connector"
}, {
"name"
:
"Left"
,
"Description"
:
"Left Connector"
}, {
"name"
:
"Auto"
,
"Description"
:
"Auto Connector"
}],
"rotation"
: {
"angle"
: 0
},
"undoable"
:
false
}, {
"id"
:
"Personal_3993f4ff-956e-4d46-a939-18c84fcb4162"
,
"hover"
: {},
"cursor"
:
"pointer"
,
"content"
: {
"align"
:
"center middle"
,
"text"
:
""
,
"CustomText"
:
"Personal"
,
"TextX"
:
"8"
,
"TextY"
:
"70"
,
"ImageName"
:
"64ManPencil.png"
},
"selectable"
:
true
,
"serializable"
:
true
,
"enable"
:
true
,
"type"
:
"rectangle"
,
"path"
:
""
,
"autoSize"
:
true
,
"visual"
:
null
,
"x"
: 295,
"y"
: 99,
"minWidth"
: 20,
"minHeight"
: 20,
"width"
: 65,
"height"
: 65,
"editable"
: {
"connect"
:
true
},
"connectors"
: [{
"name"
:
"Top"
,
"description"
:
"Top Connector"
}, {
"name"
:
"Right"
,
"description"
:
"Right Connector"
}, {
"name"
:
"Bottom"
,
"description"
:
"Bottom Connector"
}, {
"name"
:
"Left"
,
"Description"
:
"Left Connector"
}, {
"name"
:
"Auto"
,
"Description"
:
"Auto Connector"
}],
"rotation"
: {
"angle"
: 0
},
"undoable"
:
false
}],
"connections"
: [{
"from"
: {
"id"
:
"StartProcess_1242084a-6aa2-4320-8b89-accf2cd22f25"
},
"to"
: {
"id"
:
"Personal_3993f4ff-956e-4d46-a939-18c84fcb4162"
},
"id"
:
"h4upyHsjPm"
,
"hover"
: {
"stroke"
: {}
},
"cursor"
:
"pointer"
,
"content"
: {
"align"
:
"center middle"
,
"text"
:
""
,
"color"
:
"#444444"
},
"selectable"
:
true
,
"serializable"
:
true
,
"enable"
:
true
,
"startCap"
:
"none"
,
"endCap"
:
"ArrowEnd"
,
"points"
: [],
"stroke"
: {
"width"
: 2,
"color"
:
"#6c6c6c"
},
"selection"
: {
"handles"
: {
"width"
: 8,
"height"
: 8,
"fill"
: {
"color"
:
"white"
},
"stroke"
: {
"color"
:
"#444444"
}
}
}
}]
}
{
"shapes"
: [{
"id"
:
"StartProcess_1242084a-6aa2-4320-8b89-accf2cd22f25"
,
"hover"
: {
"opacity"
: 0.2
},
"cursor"
:
"pointer"
,
"content"
: {
"align"
:
"center middle"
,
"text"
:
""
,
"color"
:
"#444444"
,
"CustomText"
:
"Start"
,
"TextX"
:
"18"
,
"TextY"
:
"70"
,
"ImageName"
:
"64Play.png"
},
"selectable"
:
true
,
"serializable"
:
true
,
"enable"
:
true
,
"type"
:
"rectangle"
,
"path"
:
""
,
"autoSize"
:
true
,
"visual"
:
null
,
"x"
: 134,
"y"
: 104,
"minWidth"
: 20,
"minHeight"
: 20,
"width"
: 65,
"height"
: 65,
"editable"
: {
"connect"
:
true
},
"connectors"
: [{
"name"
:
"Top"
,
"description"
:
"Top Connector"
}, {
"name"
:
"Right"
,
"description"
:
"Right Connector"
}, {
"name"
:
"Bottom"
,
"description"
:
"Bottom Connector"
}, {
"name"
:
"Left"
,
"Description"
:
"Left Connector"
}, {
"name"
:
"Auto"
,
"Description"
:
"Auto Connector"
}],
"rotation"
: {
"angle"
: 0
},
"stroke"
: {
"width"
: 0
},
"fill"
: {
"color"
:
"#4cc5da"
},
"connectorDefaults"
: {
"fill"
: {
"color"
:
"#444444"
},
"stroke"
: {
"color"
:
"white"
},
"hover"
: {
"fill"
: {
"color"
:
"white"
},
"stroke"
: {
"color"
:
"#444444"
}
}
},
"undoable"
:
false
}, {
"id"
:
"Personal_3993f4ff-956e-4d46-a939-18c84fcb4162"
,
"hover"
: {
"opacity"
: 0.2
},
"cursor"
:
"pointer"
,
"content"
: {
"align"
:
"center middle"
,
"text"
:
""
,
"color"
:
"#444444"
,
"CustomText"
:
"Personal"
,
"TextX"
:
"8"
,
"TextY"
:
"70"
,
"ImageName"
:
"64ManPencil.png"
},
"selectable"
:
true
,
"serializable"
:
true
,
"enable"
:
true
,
"type"
:
"rectangle"
,
"path"
:
""
,
"autoSize"
:
true
,
"visual"
:
null
,
"x"
: 295,
"y"
: 99,
"minWidth"
: 20,
"minHeight"
: 20,
"width"
: 65,
"height"
: 65,
"editable"
: {
"connect"
:
true
},
"connectors"
: [{
"name"
:
"Top"
,
"description"
:
"Top Connector"
}, {
"name"
:
"Right"
,
"description"
:
"Right Connector"
}, {
"name"
:
"Bottom"
,
"description"
:
"Bottom Connector"
}, {
"name"
:
"Left"
,
"Description"
:
"Left Connector"
}, {
"name"
:
"Auto"
,
"Description"
:
"Auto Connector"
}],
"rotation"
: {
"angle"
: 0
},
"stroke"
: {
"width"
: 0
},
"fill"
: {
"color"
:
"#4cc5da"
},
"connectorDefaults"
: {
"fill"
: {
"color"
:
"#444444"
},
"stroke"
: {
"color"
:
"white"
},
"hover"
: {
"fill"
: {
"color"
:
"white"
},
"stroke"
: {
"color"
:
"#444444"
}
}
},
"undoable"
:
false
}],
"connections"
: []
}
function
visualTemplate(options) {
var
diagram = kendo.dataviz.diagram;
var
g =
new
diagram.Group();
var
dataItem = options.dataItem;
g.append(createCustomShape(dataItem));
return
g;
};
<
head
id
=
"Head1"
runat
=
"server"
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
/>
<
title
></
title
>
<
telerik:RadSkinManager
ID
=
"rsm"
runat
=
"server"
Skin
=
"WebBlue"
></
telerik:RadSkinManager
>
<
link
href
=
"~/Styles/Site.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
asp:ContentPlaceHolder
ID
=
"HeadContent"
runat
=
"server"
></
asp:ContentPlaceHolder
>
</
head
>
[NullReferenceException: Der Objektverweis wurde nicht auf eine Objektinstanz festgelegt.]
Telerik.Web.UI.RadSkinManager.Page_PreRender(Object sender, EventArgs e) +67
System.EventHandler.Invoke(Object sender, EventArgs e) +0
System.Web.UI.Control.OnPreRender(EventArgs e) +92
System.Web.UI.Control.PreRenderRecursiveInternal() +83
System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +974
<
telerik:RadTreeList
ID
=
"lstAanbod"
runat
=
"server"
CssClass
=
"_radgrid"
OnNeedDataSource
=
"lstAanbod_NeedDataSource"
DataKeyNames
=
"NR"
ParentDataKeyNames
=
"PARENT_NR"
ClientDataKeyNames
=
"DOSSIER_ID, PROFIEL_ID, GESELECTEERD"
EnableEmbeddedSkins
=
"false"
BorderStyle
=
"None"
GridLines
=
"None"
ShowFooter
=
"true"
AutoGenerateColumns
=
"false"
AllowMultiItemSelection
=
"true"
>
<
ItemStyle
HorizontalAlign
=
"Left"
></
ItemStyle
>
<
Columns
>
<
telerik:TreeListSelectColumn
HeaderStyle-Width
=
"38px"
UniqueName
=
"SelectColumn"
></
telerik:TreeListSelectColumn
>
<
telerik:TreeListBoundColumn
HeaderStyle-Width
=
"10%"
DataField
=
"CODE"
HeaderText
=
"Code"
></
telerik:TreeListBoundColumn
>
<
telerik:TreeListBoundColumn
HeaderStyle-Width
=
"60%"
DataField
=
"TITEL"
HeaderText
=
"Titel"
></
telerik:TreeListBoundColumn
>
<
telerik:TreeListBoundColumn
HeaderStyle-Width
=
"10%"
DataField
=
"NIVEAU"
HeaderText
=
"Niveau"
></
telerik:TreeListBoundColumn
>
<
telerik:TreeListBoundColumn
HeaderStyle-Width
=
"10%"
DataField
=
"DOSSIER_ID"
HeaderText
=
"Niveau"
Visible
=
"false"
></
telerik:TreeListBoundColumn
>
<
telerik:TreeListBoundColumn
HeaderStyle-Width
=
"10%"
DataField
=
"PROFIEL_ID"
HeaderText
=
"Niveau"
Visible
=
"false"
></
telerik:TreeListBoundColumn
>
</
Columns
>
<
ClientSettings
Selecting-AllowItemSelection
=
"true"
Selecting-UseSelectColumnOnly
=
"true"
Selecting-AllowToggleSelection
=
"true"
ClientEvents-OnItemSelected
=
"OnClientNodeSelected"
ClientEvents-OnTreeListCreated
=
"treeListCreated"
></
ClientSettings
>
</
telerik:RadTreeList
>
function
UpdateAllChildren(currNode, nodes, nodecount, checked) {
var
i;
for
(i = 0; i < nodecount; i++) {
if
(checked) {
nodes[i].set_selected(
true
);
}
else
{
nodes[i].set_selected(
false
);
}
}
}
function
treeListCreated(sender, args) {
var
items = sender.get_dataItems();
for
(
var
i = 0; i < items.length; i++) {
var
item = items[i];
if
(item.get_dataKeyValue(
"GESELECTEERD"
) ==
"True"
) {
item.set_selected(
true
);
}
}
}
Unhandled exception at line 808, column 27 in http://localhost:11488/ScriptResource.axd? ...
0x800a138f - Runtime-fout JavaScript: Unable to get property '_selectedIndexes' of undefined or null referenced