
<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