RadTreeList Drag and Drop

4 posts, 1 answers
  1. Mohamed Salah Al-Din
    Mohamed Salah Al-Din avatar
    29 posts
    Member since:
    Aug 2009

    Posted 27 Oct 2011 Link to this post

    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>
                <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"/>
                <table width="100%" cellpadding="0" cellspacing="0" border="0" style="height: 40px;
                    border-collapse: collapse; border: solid 1px #dddddd;">
                        <td align="center" valign="middle">
                            <asp:Label ID="lbl_GRD_NoRecords" runat="server" Text="No Records Found"></asp:Label>

  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 28 Oct 2011 Link to this post

    Hello Mohamed,

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

  3. DevCraft R3 2016 release webinar banner
  4. Mohamed Salah Al-Din
    Mohamed Salah Al-Din avatar
    29 posts
    Member since:
    Aug 2009

    Posted 30 Oct 2011 Link to this post

    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
  5. Answer
    Daniel avatar
    4933 posts

    Posted 03 Nov 2011 Link to this post

    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 = "";

    Kind regards,
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top