Sunday, June 10, 2012

Drag drop in componentart grid

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/"
                   &gt:                   
                  
                 <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();
         }
     }