Drag and Drag from RadTreeView inside user control to RadEditor don't work well.
I was able to do drag and drop but all items from tree view always paste at the beginning not on the cursor. This works w/o a problem when my treeview is in the same page with the editor. Also I cant do drag and drop to both textbox and radEditor, and lastly how can I do double click to paste items to both controls? My InsertNode don't work well.
Any help would be greatly appreciated.
Here's my code:
My User Control
<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="ucTreeView.ascx.vb" Inherits="MyPage.ucTreeView" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<
telerik:RadTreeView
ID
=
"RadTreeView1"
runat
=
"server"
EnableDragAndDrop
=
"true"
OnClientNodeDragging
=
"OnClientNodeDragging"
OnClientNodeDropping
=
"OnClientNodeDropping"
OnClientNodeDragStart
=
"OnClientNodeDragStart" OnClientDoubleClick="InsertNode"
>
<
Nodes
>
<
telerik:RadTreeNode
runat
=
"server"
Text
=
"Root RadTreeNode1"
>
<
Nodes
>
<
telerik:RadTreeNode
runat
=
"server"
Text
=
"Child RadTreeNode 1"
>
</
telerik:RadTreeNode
>
<
telerik:RadTreeNode
runat
=
"server"
Text
=
"Child RadTreeNode 2"
>
</
telerik:RadTreeNode
>
</
Nodes
>
</
telerik:RadTreeNode
>
<
telerik:RadTreeNode
runat
=
"server"
Text
=
"Root RadTreeNode2"
>
<
Nodes
>
<
telerik:RadTreeNode
runat
=
"server"
Text
=
"Child RadTreeNode 1"
>
</
telerik:RadTreeNode
>
</
Nodes
>
</
telerik:RadTreeNode
>
<
telerik:RadTreeNode
runat
=
"server"
Text
=
"Root RadTreeNode3"
>
</
telerik:RadTreeNode
>
</
Nodes
>
</
telerik:RadTreeView
>
My Page:
<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/MyPage/HomePage.master" CodeBehind="DragDrop1.aspx.vb" Inherits="Mypage.DragDrop1" %>
<%@ Register Src="~/MyPage/ucTreeView.ascx" TagName="ucTreeView" TagPrefix="ucTV" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<
asp:Content
ID
=
"Content1"
ContentPlaceHolderID
=
"MasterHeadArea"
runat
=
"server"
>
<
style
type
=
"text/css"
>
.TelerikModalOverlay
{
z-index: 100000 !important;
}
</
style
>
<
telerik:RadCodeBlock
ID
=
"RadCodeBlock1"
runat
=
"server"
>
<
script
type
=
"text/javascript"
>
function OnClientLoad(editor) {
var tree = document.getElementById("ctl00_BodyContentPlaceHolder_UcTreeView1_RadTreeView1");
makeUnselectable(tree.get_element());
}
function OnClientNodeDragStart() {
setOverlayVisible(true);
}
function OnClientNodeDropping(sender, args) {
var editor = $find("<%=RadEditor1.ClientID%>");
var event = args.get_domEvent();
document.body.style.cursor = "default";
var result = isMouseOverEditor(editor, event);
if (result) {
var itemValue = args.get_sourceNode().get_text();
editor.setFocus();
editor.pasteHtml(itemValue);
setOverlayVisible(false);
}
setOverlayVisible(false);
droppedOnInput(args);
}
function OnClientNodeDragging(sender, args) {
var editor = editor = $find("<%=RadEditor1.ClientID%>");
var event = args.get_domEvent();
if (isMouseOverEditor(editor, event)) {
document.body.style.cursor = "hand";
}
else {
var target = args.get_htmlElement();
if (target.tagName == "INPUT" || target.tagName == "TEXTAREA") {
target.style.cursor = "hand";
} else {
document.body.style.cursor = "no-drop";
}
}
}
function droppedOnInput(args) {
var target = args.get_htmlElement();
alert(target.tagName);
if (target.tagName == "INPUT") {
target.style.cursor = "INPUT";
target.value += args.get_sourceNode().get_text();
args.set_cancel(true);
return true;
}
}
function insertNode(sender, args) {
var target = args.get_htmlElement();
if (target.tagName == "INPUT") {
var obj = $find("<%=TextBox1.ClientID%>");
var string = args.get_sourceNode().get_text();
if (typeof (document.selection) != 'undefined') {
if (obj.createTextRange && obj.caretPos) {
var caretPos = obj.caretPos;
caretPos.text =
caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?
string + ' ' : string;
}
else {
obj.value = string;
}
}
else
if (typeof (obj.selectionStart) != 'undefined') {
var start = obj.selectionStart;
obj.value = obj.value.substr(0, start)
+ string
+ obj.value.substr(obj.selectionEnd, obj.value.length);
start += string.length;
obj.setSelectionRange(start, start);
}
else
obj.value += string;
obj.focus();
} else {
var obj = $find("<%=RadEditor1.ClientID%>");
var string = args.get_sourceNode().get_text();
obj.setFocus();
obj.pasteHtml(string);
}
}
/* ================== Utility methods needed for the Drag/Drop ===============================*/
//Make all treeview nodes unselectable to prevent selection in editor being lost
function makeUnselectable(element) {
var nodes = element.getElementsByTagName("*");
for (var index = 0; index <
nodes.length
; index++) {
var
elem
=
nodes
[index];
elem.setAttribute("unselectable", "on");
}
}
//Create and display an overlay to prevent the editor content area from capturing mouse events
var
shimId
=
null
;
function setOverlayVisible(toShow) {
if (!shimId) {
var
div
=
document
.createElement("DIV");
document.body.appendChild(div);
shimId
=
new
Telerik.Web.UI.ModalExtender(div);
}
if (toShow) shimId.show();
else shimId.hide();
}
//Check if the image is over the editor or not
function isMouseOverEditor(editor, events) {
var
editorFrame
= editor.get_contentAreaElement();
var editorRect = $telerik.getBounds(editorFrame);
var
mouseX
=
events
.offsetX;
var
mouseY
=
events
.offsetY;
if (mouseX < (editorRect.x + editorRect.width) &&
mouseX > editorRect.x &&
mouseY < (editorRect.y + editorRect.height) &&
mouseY > editorRect.y) {
return true;
}
return false;
}
</
script
>
</
telerik:RadCodeBlock
>
</
asp:Content
>
<
asp:Content
ID
=
"Content2"
ContentPlaceHolderID
=
"ContentPlaceHolder1"
runat
=
"server"
>
</
asp:Content
>
<
asp:Content
ID
=
"Content3"
ContentPlaceHolderID
=
"BodyContentPlaceHolder"
runat
=
"server"
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
>
</
telerik:RadScriptManager
>
<
ucTV:ucTreeView
id
=
"UcTreeView1"
runat
=
"server"
>
</
ucTV:ucTreeView
>
<
asp:TextBox
ID
=
"TextBox1"
runat
=
"server"
Width
=
"312px"
></
asp:TextBox
>
<
br
/>
<
br
/>
<
telerik:RadEditor
ID
=
"RadEditor1"
OnClientLoad
=
"OnClientLoad"
runat
=
"server"
>
</
telerik:RadEditor
>
</
asp:Content
>
Thanks,
Ryan
Bericht: Object reference not set to an instance of an object.
[NullReferenceException: Object reference not set to an instance of an object.]
Telerik.Web.UI.Editor.DialogControls.ImageManagerDialog.OnLoad(EventArgs e) +232
System.Web.UI.Control.LoadRecursive() +74
System.Web.UI.Control.LoadRecursive() +146
System.Web.UI.Control.LoadRecursive() +146
System.Web.UI.Control.LoadRecursive() +146
System.Web.UI.Control.LoadRecursive() +146
System.Web.UI.Control.LoadRecursive() +146
System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +2207
Hello,
I have a RadGrid that binds to a collection of custom object. In my application users can insert/update the rows of the grid and the changes will not be persisted to the database until they click on a save button. Each row has a key column containing the key value (ProviderLanguageID) assigned to each of the object when data is persisted to DB.
The grid's markup is like this:
<
telerik:RadGrid
ID
=
"grdProviderLanguage"
runat
=
"server"
AutoGenerateColumns
=
"False"
Height
=
"140px"
Width
=
"360px"
OnNeedDataSource
=
"grdProviderLanguage_NeedDataSource"
oninsertcommand
=
"grdProviderLanguage_InsertCommand"
onitemcommand
=
"grdProviderLanguage_ItemCommand"
CellSpacing
=
"0"
GridLines
=
"None"
onupdatecommand
=
"grdProviderLanguage_UpdateCommand"
onitemdatabound
=
"grdProviderLanguage_ItemDataBound"
>
<
ClientSettings
>
<
Selecting
AllowRowSelect
=
"True"
/>
<
KeyboardNavigationSettings
AllowActiveRowCycle
=
"True"
/>
<
Scrolling
AllowScroll
=
"True"
UseStaticHeaders
=
"True"
/>
</
ClientSettings
>
<
MasterTableView
CommandItemDisplay
=
"Top"
InsertItemDisplay
=
"Top"
EditMode
=
"InPlace"
EnableNoRecordsTemplate
=
"false"
DataKeyNames
=
"ProviderLanguageID"
>
<
CommandItemSettings
AddNewRecordImageUrl
=
"Images/AddNew.png"
AddNewRecordText
=
""
ShowRefreshButton
=
"false"
></
CommandItemSettings
>
<
RowIndicatorColumn
Visible
=
"False"
FilterControlAltText
=
"Filter RowIndicator column"
>
<
HeaderStyle
Width
=
"20px"
></
HeaderStyle
>
</
RowIndicatorColumn
>
<
ExpandCollapseColumn
Visible
=
"False"
FilterControlAltText
=
"Filter ExpandColumn column"
>
<
HeaderStyle
Width
=
"20px"
></
HeaderStyle
>
</
ExpandCollapseColumn
>
<
EditFormSettings
>
<
EditColumn
FilterControlAltText
=
"Filter EditCommandColumn column"
></
EditColumn
>
</
EditFormSettings
>
<
Columns
>
<
telerik:GridTemplateColumn
HeaderText
=
"Language"
UniqueName
=
"ProviderLanguage"
DataField
=
"ProviderLanguageID"
>
<
HeaderStyle
Width
=
"170px"
/>
<
ItemTemplate
>
<
asp:Label
ID
=
"lblLanguageName"
runat
=
"server"
Text='<%# Eval("LanguageObject.LanguageName") %>' />
</
ItemTemplate
>
<
EditItemTemplate
>
<
telerik:RadComboBox
ID
=
"cmbProviderLanguage"
runat
=
"server"
width
=
"130px"
EnableLoadOnDemand
=
"true"
DataValueField
=
"LanguageID"
DataTextField
=
"LAnguageObject.LanguageName"
OnItemsRequested
=
"cmbProviderLanguage_ItemsRequested"
Text='<%# Eval("LanguageObject.LanguageName") %>'>
</
telerik:RadComboBox
>
</
EditItemTemplate
>
</
telerik:GridTemplateColumn
>
<
telerik:GridCheckBoxColumn
HeaderText
=
"Primary"
UniqueName
=
"IsPrimary"
DataField
=
"IsPrimary"
/>
<
telerik:GridEditCommandColumn
ButtonType
=
"LinkButton"
InsertText
=
"Done"
EditText
=
"Edit"
CancelText
=
"Cancel"
UpdateText
=
"Done"
/>
</
Columns
>
</
MasterTableView
>
<
FilterMenu
EnableImageSprites
=
"False"
></
FilterMenu
>
</
telerik:RadGrid
>
When multiple rows are inserted to the grid, and one of the rows is subsequently edited (before saved to DB), the edited row is accessible in UpdateCommand event like this:
Guid editedItemID = new Guid(editedItem.OwnerTableView.DataKeyValues[editedItem.ItemIndex]["ProviderLanguageID"].ToString());
I'm using the key value to locate the actual custom object in the collection stored in the page.
This works if each of the record already has a key. When a new record is created, the key value is empty (Guid.Empty). So we'd have to use different means to locate the custom object. I'm thinking of comparing the SavedOldValues with the saved values to locate the actual object.
I notcied that e.Item.DataItem is null in UpdateCommand event, but not in ItemDataBound event. Is there any way we can access the custom object the row being updated is bound to?
Thanks in advance,
Makoto
<telerik:RadAjaxLoadingPanel id="LoadingPanel" cssclass="loading" transparency="20" Runat="server"> |
</telerik:RadAjaxLoadingPanel> |
<h3>Images <a href="javascript://" class="upload">Upload Image</a></h3> |
<div id="images"> |
<telerik:RadAjaxManager ID="ajaxManager" runat="server"> |
<AjaxSettings> |
<telerik:AjaxSetting AjaxControlID="dlImages"> |
<UpdatedControls> |
<telerik:AjaxUpdatedControl ControlID="ajaxPanelPaging" loadingpanelid="LoadingPanel" /> |
</UpdatedControls> |
</telerik:AjaxSetting> |
<telerik:ajaxsetting ajaxcontrolid="lnkPage"> |
<updatedcontrols> |
<telerik:ajaxupdatedcontrol controlid="ajaxPanelDataList" loadingpanelid="LoadingPanel" /> |
<telerik:ajaxupdatedcontrol controlid="ajaxPanelTabs" /> |
<telerik:AjaxUpdatedControl ControlID="ajaxPanelPaging" loadingpanelid="LoadingPanel" /> |
</updatedcontrols> |
</telerik:ajaxsetting> |
<telerik:ajaxsetting ajaxcontrolid="lnkCategory"> |
<updatedcontrols> |
<telerik:ajaxupdatedcontrol controlid="ajaxPanelDataList" loadingpanelid="LoadingPanel" /> |
<telerik:ajaxupdatedcontrol controlid="ajaxPanelTabs" loadingpanelid="LoadingPanel" /> |
<telerik:AjaxUpdatedControl ControlID="ajaxPanelPaging" loadingpanelid="LoadingPanel" /> |
</updatedcontrols> |
</telerik:ajaxsetting> |
<telerik:ajaxsetting ajaxcontrolid="lnkImageLibrary"> |
<updatedcontrols> |
<telerik:ajaxupdatedcontrol controlid="ajaxPanelDataList" loadingpanelid="LoadingPanel" /> |
<telerik:ajaxupdatedcontrol controlid="ajaxPanelTabs" /> |
<telerik:AjaxUpdatedControl ControlID="ajaxPanelPaging" loadingpanelid="LoadingPanel" /> |
</updatedcontrols> |
</telerik:ajaxsetting> |
</AjaxSettings> |
</telerik:RadAjaxManager> |
<telerik:RadAjaxPanel ID="ajaxPanelTabs" runat="server" > |
<ul class="tabs"> |
<li class="page"><asp:linkbutton id="lnkPage" runat="server" text="Images for this page" /></li> |
<li class="category"><asp:linkbutton id="lnkCategory" runat="server"/></li> |
<li class="library"><asp:linkbutton id="lnkImageLibrary" runat="server" text="Park Image Library"/></li> |
</ul> |
</telerik:RadAjaxPanel> |
<div class="data"> |
<telerik:RadAjaxPanel ID="ajaxPanelDataList" runat="server" LoadingPanelID="LoadingPanel"> |
<asp:datalist id="dlImages" repeatcolumns="6" cellspacing="2" repeatdirection="Horizontal" runat="server"> |
<itemtemplate> |
<div> |
<a rel="lightbox" href="<%=FullSizeURL %>"><asp:image id="imgThumb" runat="server"/></a> |
</div> |
<ul> |
<li><asp:linkbutton runat="server" id="lnkAdd" cssclass="add" title="Add image to this category" commandname="add">Add</asp:linkbutton></li> |
<li class="last"><asp:hyperlink id="lnkView" runat="server" target="_blank" cssclass="view" rel="lightbox" titlre="View this image">View</asp:hyperlink></li> |
</ul> |
</itemtemplate> |
</asp:datalist> |
</telerik:RadAjaxPanel> |
</div> |
<telerik:RadAjaxPanel id="ajaxPanelPaging" visible="true" runat="server"> |
<asp:linkbutton id="lnkFirstPage" runat="server">First Page</asp:linkbutton> |
<asp:repeater id="rptPaging" runat="server"> |
<headertemplate><ul class="verticalpager"></headertemplate> |
<itemtemplate> |
<li><asp:linkbutton id="lnkPageIndex" commandname="page" runat="server" /></li> |
</itemtemplate> |
<footertemplate></ul></footertemplate> |
</asp:repeater> |
</telerik:RadAjaxPanel> |
</div> |
void rptPaging_ItemDataBound(object sender, RepeaterItemEventArgs e) |
{ |
if ((e.Item.ItemType == ListItemType.Item) || (e.Item.ItemType == ListItemType.AlternatingItem)) |
{ |
LinkButton lnkPageIndex = (LinkButton)e.Item.FindControl("lnkPageIndex"); |
lnkPageIndex.Text = (e.Item.ItemIndex + 1).ToString(); |
if (this.CurrentPage == e.Item.ItemIndex) { |
lnkPageIndex.CssClass = "selected"; |
} |
// THIS IS WHERE THE ERROR IS THROWN |
ajaxManager.AjaxSettings.AddAjaxSetting(lnkPageIndex, dlImages, LoadingPanel); |
} |
} |
<
telerik:RadGrid
runat
=
"server"
ID
=
"grdSquareFootage"
SkinID
=
"dgSOS"
OnNeedDataSource
=
"Grid_NeedDataSource"
OnItemDataBound
=
"Grid_ItemDataBound"
OnItemCommand
=
"Grid_ItemCommand"
OnDataBound
=
"Grid_DataBound"
>
<
MasterTableView
EditMode
=
"InPlace"
DataKeyNames
=
"FiscalYear,LocationId,FamilyOfBusinessId"
AllowPaging
=
"true"
AllowSorting
=
"true"
PageSize
=
"10"
>
<
Columns
>
<
telerik:GridEditCommandColumn
UniqueName
=
"UpdateButton"
ButtonType
=
"ImageButton"
EditImageUrl
=
"~/Images/Edit1.gif"
/>
<
telerik:GridButtonColumn
CommandName
=
"Delete"
UniqueName
=
"DeleteButton"
ButtonType
=
"ImageButton"
ImageUrl
=
"~/Images/Delete.gif"
ConfirmText
=
"Deleting this entry cannot be undone."
Text
=
"Delete"
/>
<
telerik:GridNumericColumn
DataField
=
"FiscalYear"
ReadOnly
=
"true"
HeaderText
=
"Year"
ItemStyle-Width
=
"60"
/>
<
telerik:GridNumericColumn
DataField
=
"LocationId"
UniqueName
=
"LocationId"
ReadOnly
=
"true"
HeaderText
=
"Store"
ItemStyle-Width
=
"60"
/>
<
telerik:GridNumericColumn
DataField
=
"FamilyOfBusinessId"
UniqueName
=
"FamilyOfBusinessId"
ReadOnly
=
"true"
HeaderText
=
"FOB"
ItemStyle-Width
=
"60"
/>
<
telerik:GridNumericColumn
DataField
=
"SquareFootage"
ColumnEditorID
=
"squareFootageEditor"
HeaderText
=
"Square Footage"
ItemStyle-Width
=
"60"
/>
</
Columns
>
</
MasterTableView
>
</
telerik:RadGrid
>
<
telerik:RadGrid
SkinID
=
"dgSOS"
runat
=
"server"
Skin
=
"VistaSOS"
AllowMultiRowEdit
=
"True"
AllowSorting
=
"True"
BorderColor
=
"Black"
GridLines
=
"Both"
Height
=
"90%"
>
<
ClientSettings
>
<
Scrolling
UseStaticHeaders
=
"True"
/>
</
ClientSettings
>
<
MasterTableView
AutoGenerateColumns
=
"False"
CommandItemDisplay
=
"None"
CurrentResetPageIndexAction
=
"SetPageIndexToFirst"
>
<
ExpandCollapseColumn
CurrentFilterFunction
=
"NoFilter"
FilterListOptions
=
"VaryByDataType"
Resizable
=
"False"
Visible
=
"False"
/>
<
RowIndicatorColumn
CurrentFilterFunction
=
"NoFilter"
FilterListOptions
=
"VaryByDataType"
Visible
=
"False"
/>
<
PagerStyle
Mode
=
"NextPrevAndNumeric"
NextPageText
=
"Next"
PrevPageText
=
"Previous"
AlwaysVisible
=
"true"
PrevPageImageUrl
=
"~/App_Themes/2011/Grid/PagingPrev.gif"
NextPageImageUrl
=
"~/App_Themes/2011/Grid/PagingNext.gif"
FirstPageImageUrl
=
"~/App_Themes/2011/Grid/PagingFirst.gif"
LastPageImageUrl
=
"~/App_Themes/2011/Grid/PagingLast.gif"
/>
<
HeaderStyle
Font-Bold
=
"False"
Font-Italic
=
"False"
Font-Overline
=
"False"
Font-Strikeout
=
"False"
Font-Underline
=
"False"
Wrap
=
"False"
/>
<
ItemStyle
Wrap
=
"false"
/>
<
AlternatingItemStyle
Wrap
=
"false"
/>
</
MasterTableView
>
</
telerik:RadGrid
>