RadTreeList Drag and Drop

[Mohamed Salah Al-Din]

Dear Sir,
    I need an example of using drag and drop items but without using detailed template with a simple radtreelist, because i tried to implement it but i faced some problems with the interface.with scrolling and treelist height = 100% and width=100%, but when i drag a row it shows the height of the selected row = 100% also. please i need your help in this issue.

<telerik:RadTreeList ID="rtl_Category" runat="server" SkinID="Default_RadTreeList_Skin" AllowPaging="false" Width="100%" Height="100%" EnableNoRecordsTemplate="true" Dir='<%$ Resources:Common,res_Direction %>'
        DataKeyNames="ID" ClientDataKeyNames="ID,ParentCategory.ID" ParentDataKeyNames="ParentCategory.ID" AutoGenerateColumns="False" OnNeedDataSource="rtl_Category_NeedDataSource" >
        <ClientSettings AllowItemsDragDrop="true">
            <ClientEvents OnItemDropping="itemDropping" OnItemDragging="itemDragging" OnTreeListCreated="function(sender) { treeList2 = sender; }"  />
            <Selecting AllowItemSelection="True"  />
            <Scrolling AllowScroll="true" UseStaticHeaders="true" ></Scrolling>
        </ClientSettings>
        <Columns>
            <telerik:TreeListBoundColumn DataField="ID" HeaderText="ID" UniqueName="ID"
                ReadOnly="true" />
            <telerik:TreeListBoundColumn DataField="Title" HeaderText="Title" UniqueName="Title"/>
            <telerik:TreeListBoundColumn DataField="Description" HeaderText="Description" UniqueName="Description" />
            <telerik:TreeListDateTimeColumn DataField="CreatedOn" HeaderText="CreatedOn" UniqueName="CreatedOn"/>
            <telerik:TreeListBoundColumn DataField="CreatedBy.UserName" HeaderText="CreatedBy" UniqueName="CreatedBy" />
            <telerik:TreeListBoundColumn DataField="ParentCategory.ID" HeaderText="Parent" UniqueName="ParentCategory" Visible="false"/>
        </Columns>
        <NoRecordsTemplate>
            <table width="100%" cellpadding="0" cellspacing="0" border="0" style="height: 40px;
                border-collapse: collapse; border: solid 1px #dddddd;">
                <tr>
                    <td align="center" valign="middle">
                        <asp:Label ID="lbl_GRD_NoRecords" runat="server" Text="No Records Found"></asp:Label>
                    </td>
                </tr>
            </table>
        </NoRecordsTemplate>
    </telerik:RadTreeList>

[Shinu]

Hello Mohamed,

Take a look at the following demo.
TreeList / Items Drag and Drop.

Thanks,
Shinu.

[Mohamed Salah Al-Din]

Dear Shinu,
    First thanks for your replay, i want to tell you that i already know that demo http://demos.telerik.com/aspnet-ajax/treelist/examples/itemsdragdrop/defaultcs.aspx, but this one uses DetailedTemplate, which specify width and height to the item.but in my case i want more simple one without detailed template and with scrolling and the treelist width and height = 100%.

becuase i tried to emplement this case but it caused the dragged item to have height of 100% as well as the treelist, that's way i think this is an error in the control it self.

Best Regards,    
 Mohamed Salah Al-Din

[Daniel]

Hello Mohamed,

Please try the following code and see if this helps:

<script type="text/javascript">
    function itemDragging(sender, args)
    {
        if (args.get_draggedContainer().style.height.indexOf("%") != -1)
            args.get_draggedContainer().style.height = "";
    }
</script>

Kind regards,
Daniel
the Telerik team