[Solved] Load on Demand and Drag & Drop together

[Frank Michael]

I am using Load on Demand and Drag & Drop together.
Then I have this phenomenon.

Say, the tree on the db is this:

Node 1
- Node 1.1
- Node 1.2
Node 2
Node 3

When I first open the tree it looks like this:

Node 1
Node 2
Node 3

If  I now drag Node 2 into Node 1 the tree looks like this:

Node 1
Node 3

So far so good.

If I now drag Node 3 into Node 1 then the tree looks like this:

Node 1
- Node 2
- Node 3

But it should look either:

Node 1

Or

Node 1
- Node 1.1
- Node 1.2
- Node 2
- Node 3

If the latter behavior is chosen, then the first drag should result in

Node 1
- Node 1.1
- Node 1.2
- Node 2
Node 3

to be logically consistent.

Athough I prefer that the node is not expanded by dropping.

[Frank Michael]

And I must add, if I start from the initial scenario above and drop Node 2 into Node 1 as I said the tree looks like this:
Node 1
Node 3

When I expand Node 1 it looks like this:
Node 1
- Node 2
Node 3

But it should be:

Node 1
- Node 1.1
- Node 1.2
- Node 2
Node 3

These are all symptoms of the same problem.
Since you do not load again, once you have loaded the subnodes, you must have a flag.
Seemingly this flag is set to "loaded" after a node is dropped into a node. This is wrong. It is not loaded at this point. Not that I know.
Maybe I need to return a list of subnodes of the target node from the AjaxDropAction. But this does not help either.

[Alex Gyoshev]

Hello Frank Michael,

Thank you for this bug report. We have fixed the problem - you can find the modified telerik.treeview.js file attached.

Sincerely yours,
Alex Gyoshev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Rob]

I'm using the 2010 Q2 release of the MVC components.  Is the above attached JS file compatible with the Q2 release?

Thanks,
Rob

[Rob]

I am having the same issue described above with the 2010 Q2 version of the MVC Extensions.  Unfortunately, the attached Javascript file is not compatible with the 2010 Q2 version.  Does anyone have any recommendations of how we can fix the issue in the Q2 version?

Thanks,
Rob

[Hristo Germanov]

Hello Rob,

This issue is fixed in official version of Telerik ASP.NET MVC components. I have made screencast.

Could you please verify that you have updated to the Q2 2010 (2010.2.825) version of the Telerik Components for ASP.NET MVC?

Regards,
Hristo Germanov
the Telerik team

[Rob]

I am definately using 2010 Q2.  I have uninstalled Q1 from my computer and created a new sample project using Q2 and have reproduced the issue.  

From your screencast, it doesn't appear that I've thoroughly explained the issue I'm having.

In my example, there are eight employees.  Their reporting hierarchy is as follows:

Employee 1
--Employee 2
--Employee 3
--Employee 4
Employee 5
--Employee 6
--Employee 7
--Employee 8

When the tree is first loaded, only employees 1 and 5 appear, as the tree is collapsed.  Both nodes 1 and 5 are set to Load On Demand.  If you drag Employee 1 onto Employee 5 before expanding either node, then Employees 6, 7, and 8 do not appear under Employee 5.  Also, the node for Employee 1 can no longer be expanded or collapsed.  This is the same issue described in the original post above.

Thanks,
Rob

[Rob]

I've created a screencast to illustrate the issue

http://screencast.com/t/YjY2OTYx

Thanks,
Rob

[Rob]

In the screencast there's several bits of code.  For convenience, I'm including the important bits here. 

Home Controller

 

 

 

public class HomeController : Controller
{
    private static IList<Employee> Employees = new List<Employee>()
    {
        new Employee() {
            EmployeeId = 1,
            EmployeeName = "Employee 1",
            ParentEmployeeId = null
        },
        new Employee() {
            EmployeeId = 2,
            EmployeeName = "Employee 2",
            ParentEmployeeId = 1
        },
        new Employee() {
            EmployeeId = 3,
            EmployeeName = "Employee 3",
            ParentEmployeeId = 1
        },
        new Employee() {
            EmployeeId = 4,
            EmployeeName = "Employee 4",
            ParentEmployeeId = 1
        },
        new Employee() {
            EmployeeId = 5,
            EmployeeName = "Employee 5",
            ParentEmployeeId = null
        },
        new Employee() {
            EmployeeId = 6,
            EmployeeName = "Employee 6",
            ParentEmployeeId = 5
        },
        new Employee() {
            EmployeeId = 7,
            EmployeeName = "Employee 7",
            ParentEmployeeId = 5
        },
        new Employee() {
            EmployeeId = 8,
            EmployeeName = "Employee 8",
            ParentEmployeeId = 5
        }
    };
    public ActionResult Index()
    {
        ViewData["Message"] = "Welcome to ASP.NET MVC!";

        var emps = from e in Employees where e.ParentEmployeeId == null select e;
        return View(emps.ToList());
    }
    public ActionResult _Index(TreeViewItem node)
    {
        int? parentId = !string.IsNullOrEmpty(node.Value) ? (int?)Convert.ToInt32(node.Value) : null;
        if (parentId == null)
            return null;
        var emps = from e in Employees where e.ParentEmployeeId == parentId select e;
        var nodes = emps.Select(x =>
                    new TreeViewItem
                    {
                        Text = x.EmployeeName,
                        Value = x.EmployeeId.ToString(),
                        LoadOnDemand = true,
                        Enabled = true
                    });
        return new JsonResult { Data = nodes };
    }
}

Employee Model

namespace TelerikMvcApplication1.Models
{
    public class Employee
    {
        public int EmployeeId { get; set; }
        public string EmployeeName { get; set; }
        public int? ParentEmployeeId { get; set; }
    }
}

Home View

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<TelerikMvcApplication1.Models.Employee>>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2><%: ViewData["Message"] %></h2>
    <p>
        To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc<;/a>.
    </p>
    <p>
        <%: Html.Telerik().TreeView()
                .Name("AjaxTreeView")
                .BindTo(Model, (item, employee) =>
                {
                    // bind initial data - can be omitted if there is none
                    item.Text = employee.EmployeeName;
                    item.Value = employee.EmployeeId.ToString();
                    item.LoadOnDemand = true;
                })
                .DataBinding(dataBinding => dataBinding
                        .Ajax().Select("_Index", "Home")
                ).DragAndDrop(true)

        %>
    </p>
</asp:Content>

[Alex Gyoshev]

Hello Rob,

We have reproduced the issue and are already working on its resolution. Things are a bit messy when it gets to drag&drop with enabled load-on-demand -- we strive to address this ASAP.

Regards,
Alex Gyoshev
the Telerik team

[Alex Gyoshev]

Hello Rob,

I think that we managed to resolve the problem. Please find attached the latest build, which contains the fix.

It would be great if you can provide feedback whether it works in your scenario, so that we may resolve any problems before the service pack (due to next week).

Kind regards,
Alex Gyoshev
the Telerik team

[Frank Michael]

Looks good.

However can I control if or if not the target node will be expanded after the drop?

Currently it is always expanded. But this takes so much space, that I will collapse it immediately after - always. So if it is not exanded after drop, or at least if it can be configured, that would be great!

[Frank Michael]

Does anybody understand my question - even if there is no solution?

[Atanas Korchev]

Hello Frank Michael ,

Again I am not sure what you are asking. Please provide a sample project with instructions telling what is wrong and what the requested behavior is.

Regards,
Atanas Korchev
the Telerik team