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><telerik:RadPane ID="LeftPane" runat="Server" Height="100%" MinWidth="283" MaxWidth="283" Width="283"><telerik:RadSlidingZone ID="RadSlidingZoneLeft" Skin="Windows7" runat="server" DockedPaneID="RadSlidingPaneLeft" BorderStyle="None"> <telerik:RadSlidingPane ID="RadSlidingPaneLeft" Skin="Windows7" runat="server" MinWidth="283" MaxWidth="283" Width="283" EnableResize="False" Title="Test" Scrolling="None"> <telerik:RadSplitter runat="server" ID="RadSplitter3" Height="100%" Orientation="Horizontal" MinWidth="283" MaxWidth="283" Width="283" CssClass="BorderLeft"> <telerik:RadPane runat="server" ID="Pane1" BorderStyle="None" MinWidth="283" MaxWidth="283" Width="283"> [...] </telerik:RadPane> <telerik:RadPane runat="server" ID="Pane2" BorderStyle="None" Height="120px" MinWidth="283" MaxWidth="283" Width="283" Scrolling="Y"> [...] </telerik:RadPane> </telerik:RadSplitter> </telerik:RadSlidingPane> </telerik:RadSlidingZone></telerik:RadPane>