To perform drag drop from component art grid to component art tree, following code can be used:
<ComponentArt:Grid RunningMode="Client" AllowMultipleSelect="false" AllowEditing="false" KeyboardEnabled="false" EditOnClickSelectedItem="false" ItemDraggingEnabled="true" runat="server" ID="Jobs" EmptyGridText="Record not found"
SearchOnKeyPress="true" SearchTextCssClass="left-align" ShowSearchBox="true" ExternalDropTargets="tt"
HeaderCssClass="GridHeader" GroupingPageSize="1000" PagerStyle="Slider" PageSize="1000"
FooterCssClass="GridFooter" ShowFooter="false"
ShowHeader="True" GroupingNotificationTextCssClass="GridHeaderText" AllowPaging="false"
SliderPopupClientTemplateId="SliderTemplate" LoadingPanelClientTemplateId="LoadingFeedbackTemplate"
PreExpandOnGroup="true" CssClass="Grid" SliderGripWidth="10" SliderWidth="150"
SliderPopupOffsetX="20" PagerButtonHeight="22" PagerButtonWidth="41" PagerImagesFolderUrl="~/template/resources/Grid/Pager/"
>:
<Levels> <ComponentArt:GridLevel RowCssClass="Row" DataCellCssClass="DataCell" HeadingCellCssClass="HeadingCell"
HeadingRowCssClass="HeadingRow" HeadingTextCssClass="HeadingCellText" SelectedRowCssClass="SelectedRow"
GroupHeadingCssClass="GroupHeading" SortAscendingImageUrl="~/template/resources/Grid/Images/asc.gif"
SortDescendingImageUrl="~/template/resources/Grid/Images/desc.gif" SortImageWidth="7"
SortImageHeight="4"> <Columns> <ComponentArt:GridColumn Visible="false" DataField="JobId" HeadingText="Job ID" AllowSorting="true"
SortedDataCellCssClass="SortedDataCell" />
<ComponentArt:GridColumn Visible="false" DataField="ResponsesCount" HeadingText="Responses" AllowSorting="true"
SortedDataCellCssClass="SortedDataCell" /> <ComponentArt:GridColumn Visible="false" DataField="Reference" HeadingText="Reference" AllowSorting="true"
SortedDataCellCssClass="SortedDataCell" /> <ComponentArt:GridColumn DataField="JobTitle" HeadingText="Job Title" AllowSorting="true"
SortedDataCellCssClass="SortedDataCell" /> <ComponentArt:GridColumn DataField="JobType" HeadingText="Job Type" AllowSorting="true"
SortedDataCellCssClass="SortedDataCell" /> <ComponentArt:GridColumn DataField="StartDate" HeadingText="Start Date" AllowSorting="true"
SortedDataCellCssClass="SortedDataCell" /> <ComponentArt:GridColumn DataCellServerTemplateId="ViewResume" HeadingText="Applications Received"
AllowSorting="true" SortedDataCellCssClass="SortedDataCell" />
<ComponentArt:GridColumn Width="100" AllowGrouping="False" HeadingText="View Job"
Align="center" DataCellServerTemplateId="ViewJob" AllowSorting="False" AllowEditing="False"
AllowReordering="False" />
<ComponentArt:GridColumn Width="60" AllowGrouping="False" HeadingText="View Notes"
Align="center" DataCellServerTemplateId="ViewNotes" AllowSorting="False" AllowEditing="False"
AllowReordering="False" />
<ComponentArt:GridColumn Width="60" AllowGrouping="False" HeadingText="Print" Align="center"
DataCellServerTemplateId="PrintJob" AllowSorting="False" AllowEditing="False"
AllowReordering="False" />
<ComponentArt:GridColumn Width="60" AllowGrouping="False" HeadingText="Delete" Align="center"
DataCellServerTemplateId="Delete" AllowSorting="False" AllowEditing="False" AllowReordering="False" />
</Columns>
</ComponentArt:GridLevel>
</Levels>
<ClientEvents>
<ItemExternalDrop EventHandler="myHandler" />
</ClientEvents>
<ClientTemplates>
<ComponentArt:ClientTemplate ID="SliderTemplate" runat="server">
<table cellspacing="0" cellpadding="0">
<tr>
<td colspan="2">
<div class="pagingnumberRelative">
<div class="pagingnumberAbsolute">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
Page <b>## DataItem.PageIndex + 1 ##</b> of <b>## Recruiters.PageCount ##</b>
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</ComponentArt:ClientTemplate>
<ComponentArt:ClientTemplate ID="LoadingFeedbackTemplate" runat="server" Visible="false">
<table cellspacing="0" cellpadding="0" border="0" style="margin-top: 100px; margin-left: auto;
margin-right: auto;">
<tr>
<td style="font-size: 10px;">
Loading...
</td>
<td>
<img alt="" height="16" src="~/template/resources/Grid/Images/spinner.gif" width="16" />
</td>
</tr>
</table>
</ComponentArt:ClientTemplate>
</ClientTemplates>
<ServerTemplates>
<ComponentArt:GridServerTemplate ID="ViewJob" runat="server">
<Template>
<asp:LinkButton ID="lnk_viewdetails" CommandName="viewjob" runat="server">
<image title="View Job Details" src="/template/resources/images/icon_03.png"></image>
</asp:LinkButton>
</Template>
</ComponentArt:GridServerTemplate>
<ComponentArt:GridServerTemplate ID="ViewNotes" runat="server">
<Template>
<asp:LinkButton runat="server" CommandArgument='<%# Container.DataItem["JobId"] %>'
CommandName="viewnote" ID="viewnote" ToolTip="Edit / View">
<image title="View / Edit" src="/template/resources/images/edit.png"></image>
</asp:LinkButton>
</Template>
</ComponentArt:GridServerTemplate>
<ComponentArt:GridServerTemplate ID="PrintJob" runat="server">
<Template>
<a href="#" onclick="openPopup('<%# Container.DataItem["JobId"] %>');">
<img id="imagePrint" src="../Template/resources/Grid/Images/printicon.png" /></a>
</Template>
</ComponentArt:GridServerTemplate>
<ComponentArt:GridServerTemplate ID="Delete" runat="server">
<Template>
<asp:LinkButton runat="server" CommandName="Delete" ID="Delete" OnClientClick="return confirm('Are you sure you want to delete this record?')"
ToolTip="Delete">
<mg title="Delete" src="/template/resources/images/icon_07.png" />
</asp:LinkButton>
</Template>
</ComponentArt:GridServerTemplate>
<ComponentArt:GridServerTemplate ID="ViewResume" runat="server">
<Template>
<a href='<%# "JobResponse.aspx?jr="+ Container.DataItem["Reference"] %>'>
<%# Container.DataItem["ResponsesCount"]%></a>
</Template>
</ComponentArt:GridServerTemplate>
</ServerTemplates>
</ComponentArt:Grid>
Tree View
<ComponentArt:TreeView ID="tt" DragAndDropAcrossTreesEnabled="True"
runat="server" KeyboardEnabled="False" >
<Nodes>
<ComponentArt:TreeViewNode AutoPostBackOnNodeMove="false" AutoTheming="true"
DragAndDropEnabled="true"
DraggingAcrossTreesEnabled="true"
NodeEditingEnabled="false"
KeyboardEnabled="false"
ShowLines="true"
EnableViewState="true" runat="server" DroppingAcrossTreesEnabled="True"
DroppingEnabled="True" Text="Candidates Tree">
</ComponentArt:TreeViewNode>
</Nodes>
</ComponentArt:TreeView>
Javascript Code:
function myHandler(sender, eventArgs) {
var draggedItem = eventArgs.get_item();
var targetControl = eventArgs.get_targetControl();
var target = eventArgs.get_target();
// perform logic
if (!(target == null)) {
var targetNodes = target.get_nodes();
newNode = new ComponentArt.Web.UI.TreeViewNode();
newNode.set_text(draggedItem.getMember('JobTitle').get_value());
newNode.set_id(draggedItem.getMember('JobId').get_value());
targetNodes.add(newNode);
target.set_expanded(true);
targetControl.Render();
sender.deleteItem(draggedItem);
sender.Render();
}
}
<ComponentArt:Grid RunningMode="Client" AllowMultipleSelect="false" AllowEditing="false" KeyboardEnabled="false" EditOnClickSelectedItem="false" ItemDraggingEnabled="true" runat="server" ID="Jobs" EmptyGridText="Record not found"
SearchOnKeyPress="true" SearchTextCssClass="left-align" ShowSearchBox="true" ExternalDropTargets="tt"
HeaderCssClass="GridHeader" GroupingPageSize="1000" PagerStyle="Slider" PageSize="1000"
FooterCssClass="GridFooter" ShowFooter="false"
ShowHeader="True" GroupingNotificationTextCssClass="GridHeaderText" AllowPaging="false"
SliderPopupClientTemplateId="SliderTemplate" LoadingPanelClientTemplateId="LoadingFeedbackTemplate"
PreExpandOnGroup="true" CssClass="Grid" SliderGripWidth="10" SliderWidth="150"
SliderPopupOffsetX="20" PagerButtonHeight="22" PagerButtonWidth="41" PagerImagesFolderUrl="~/template/resources/Grid/Pager/"
>:
<Levels> <ComponentArt:GridLevel RowCssClass="Row" DataCellCssClass="DataCell" HeadingCellCssClass="HeadingCell"
HeadingRowCssClass="HeadingRow" HeadingTextCssClass="HeadingCellText" SelectedRowCssClass="SelectedRow"
GroupHeadingCssClass="GroupHeading" SortAscendingImageUrl="~/template/resources/Grid/Images/asc.gif"
SortDescendingImageUrl="~/template/resources/Grid/Images/desc.gif" SortImageWidth="7"
SortImageHeight="4"> <Columns> <ComponentArt:GridColumn Visible="false" DataField="JobId" HeadingText="Job ID" AllowSorting="true"
SortedDataCellCssClass="SortedDataCell" />
<ComponentArt:GridColumn Visible="false" DataField="ResponsesCount" HeadingText="Responses" AllowSorting="true"
SortedDataCellCssClass="SortedDataCell" /> <ComponentArt:GridColumn Visible="false" DataField="Reference" HeadingText="Reference" AllowSorting="true"
SortedDataCellCssClass="SortedDataCell" /> <ComponentArt:GridColumn DataField="JobTitle" HeadingText="Job Title" AllowSorting="true"
SortedDataCellCssClass="SortedDataCell" /> <ComponentArt:GridColumn DataField="JobType" HeadingText="Job Type" AllowSorting="true"
SortedDataCellCssClass="SortedDataCell" /> <ComponentArt:GridColumn DataField="StartDate" HeadingText="Start Date" AllowSorting="true"
SortedDataCellCssClass="SortedDataCell" /> <ComponentArt:GridColumn DataCellServerTemplateId="ViewResume" HeadingText="Applications Received"
AllowSorting="true" SortedDataCellCssClass="SortedDataCell" />
<ComponentArt:GridColumn Width="100" AllowGrouping="False" HeadingText="View Job"
Align="center" DataCellServerTemplateId="ViewJob" AllowSorting="False" AllowEditing="False"
AllowReordering="False" />
<ComponentArt:GridColumn Width="60" AllowGrouping="False" HeadingText="View Notes"
Align="center" DataCellServerTemplateId="ViewNotes" AllowSorting="False" AllowEditing="False"
AllowReordering="False" />
<ComponentArt:GridColumn Width="60" AllowGrouping="False" HeadingText="Print" Align="center"
DataCellServerTemplateId="PrintJob" AllowSorting="False" AllowEditing="False"
AllowReordering="False" />
<ComponentArt:GridColumn Width="60" AllowGrouping="False" HeadingText="Delete" Align="center"
DataCellServerTemplateId="Delete" AllowSorting="False" AllowEditing="False" AllowReordering="False" />
</Columns>
</ComponentArt:GridLevel>
</Levels>
<ClientEvents>
<ItemExternalDrop EventHandler="myHandler" />
</ClientEvents>
<ClientTemplates>
<ComponentArt:ClientTemplate ID="SliderTemplate" runat="server">
<table cellspacing="0" cellpadding="0">
<tr>
<td colspan="2">
<div class="pagingnumberRelative">
<div class="pagingnumberAbsolute">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
Page <b>## DataItem.PageIndex + 1 ##</b> of <b>## Recruiters.PageCount ##</b>
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</ComponentArt:ClientTemplate>
<ComponentArt:ClientTemplate ID="LoadingFeedbackTemplate" runat="server" Visible="false">
<table cellspacing="0" cellpadding="0" border="0" style="margin-top: 100px; margin-left: auto;
margin-right: auto;">
<tr>
<td style="font-size: 10px;">
Loading...
</td>
<td>
<img alt="" height="16" src="~/template/resources/Grid/Images/spinner.gif" width="16" />
</td>
</tr>
</table>
</ComponentArt:ClientTemplate>
</ClientTemplates>
<ServerTemplates>
<ComponentArt:GridServerTemplate ID="ViewJob" runat="server">
<Template>
<asp:LinkButton ID="lnk_viewdetails" CommandName="viewjob" runat="server">
<image title="View Job Details" src="/template/resources/images/icon_03.png"></image>
</asp:LinkButton>
</Template>
</ComponentArt:GridServerTemplate>
<ComponentArt:GridServerTemplate ID="ViewNotes" runat="server">
<Template>
<asp:LinkButton runat="server" CommandArgument='<%# Container.DataItem["JobId"] %>'
CommandName="viewnote" ID="viewnote" ToolTip="Edit / View">
<image title="View / Edit" src="/template/resources/images/edit.png"></image>
</asp:LinkButton>
</Template>
</ComponentArt:GridServerTemplate>
<ComponentArt:GridServerTemplate ID="PrintJob" runat="server">
<Template>
<a href="#" onclick="openPopup('<%# Container.DataItem["JobId"] %>');">
<img id="imagePrint" src="../Template/resources/Grid/Images/printicon.png" /></a>
</Template>
</ComponentArt:GridServerTemplate>
<ComponentArt:GridServerTemplate ID="Delete" runat="server">
<Template>
<asp:LinkButton runat="server" CommandName="Delete" ID="Delete" OnClientClick="return confirm('Are you sure you want to delete this record?')"
ToolTip="Delete">
<mg title="Delete" src="/template/resources/images/icon_07.png" />
</asp:LinkButton>
</Template>
</ComponentArt:GridServerTemplate>
<ComponentArt:GridServerTemplate ID="ViewResume" runat="server">
<Template>
<a href='<%# "JobResponse.aspx?jr="+ Container.DataItem["Reference"] %>'>
<%# Container.DataItem["ResponsesCount"]%></a>
</Template>
</ComponentArt:GridServerTemplate>
</ServerTemplates>
</ComponentArt:Grid>
Tree View
<ComponentArt:TreeView ID="tt" DragAndDropAcrossTreesEnabled="True"
runat="server" KeyboardEnabled="False" >
<Nodes>
<ComponentArt:TreeViewNode AutoPostBackOnNodeMove="false" AutoTheming="true"
DragAndDropEnabled="true"
DraggingAcrossTreesEnabled="true"
NodeEditingEnabled="false"
KeyboardEnabled="false"
ShowLines="true"
EnableViewState="true" runat="server" DroppingAcrossTreesEnabled="True"
DroppingEnabled="True" Text="Candidates Tree">
</ComponentArt:TreeViewNode>
</Nodes>
</ComponentArt:TreeView>
Javascript Code:
function myHandler(sender, eventArgs) {
var draggedItem = eventArgs.get_item();
var targetControl = eventArgs.get_targetControl();
var target = eventArgs.get_target();
// perform logic
if (!(target == null)) {
var targetNodes = target.get_nodes();
newNode = new ComponentArt.Web.UI.TreeViewNode();
newNode.set_text(draggedItem.getMember('JobTitle').get_value());
newNode.set_id(draggedItem.getMember('JobId').get_value());
targetNodes.add(newNode);
target.set_expanded(true);
targetControl.Render();
sender.deleteItem(draggedItem);
sender.Render();
}
}