Accessing data on TreeView Events

[Andrea Perazzolo]

Hi,

I am trying to use the ClientSideEvents of the TreeView, specifically the Drag  Drop events to block certains nodes from being dragged and other from being dropped to.

I configured the events, but I don't understand how to use the "args" parameter to access the data associated with the current node dragged.

I tried to show the objects in the debug window but don't understand how to retrieve for example the Id or Value of the current node object.

Could you provide me an example on how to do this?

I noticed that there is the entire TreeView Model on the args.model field, with the all datasource specified, but don't find the current node (I think is somewhere in the args.target field)

    Thanks for all

   Andrea Perazzolo

[Andrea Perazzolo]

Sorry to bother, but I am really in difficulty.

In the application that I am developing, I have 2 TreeView Which I move items from One to another.

When I finish I need to Send the data of the second Tree back to the controller to save it.

Now I have seen in another example you provided to get the data from an array given by method getCheckedItems()

I am not able to find a method that gives me all the items and not only the checked (i dont't use the checkboxex).

I tried to look at the datasource property, but even after i remove some elements from a tree, it contains the original values when I created the tree.

Sorry to ask, but there are examples on how  to create every method but not on how to use them

      Thanks

    Andrea Perazzolo

[Harikrishnan P]

Hi Andrea,

Currently, we do not have inbuilt functionality to prevent drag or drop on certain nodes. But we can achieve this requirement using the “HtmlAttribute” property. This property is used to add HTML attributes to the <li> element of the tree nodes. Using this property we can add a property to the nodes to which we need to prevent the drag or drop. Then, in the create event we can remove the “e-draggable” or “e-droppable” class accordingly from the tree nodes.

We have prepared a sample to exhibit this behavior and it can be downloaded from the following location.

Sample : Prevent Drag or drop

Query: I noticed that there is the entire TreeView Model on the args.model field, with the all datasource specified, but don't find the current node

You can find the element dragged, in the “nodeDrop” event. In the above attached sample we have showcased how to retrieve the element text from the event argument.

Query: I have 2 TreeView Which I move items from One to another. When I finish I need to Send the data of the second Tree back to the controller to save it. I tried to look at the datasource property, but even after i remove some elements from a tree, it contains the original values when I created the tree.

Currently, in our Treeview, when a tree node is drag and dropped into another treeview the Model will not be updated to reflect the new data source. We can only get the “ID” and “value” of the current dragged node alone.

We have logged this (“Maintain the updated data source in the model after drag and drop”) as a new feature in our database. We will implement this feature in any of our upcoming releases. We usually have an interval of at least three months between releases. The feature implementation would also greatly depend on the factors such as product design, code compatibility and complexity. We will update this thread when this feature has been implemented.

Please let us know if you have further queries.

Regards,

HariKrishnan

[Andrea Perazzolo]

Hi Andrea,

Currently, we do not have inbuilt functionality to prevent drag or drop on certain nodes. But we can achieve this requirement using the “HtmlAttribute” property. This property is used to add HTML attributes to the <li> element of the tree nodes. Using this property we can add a property to the nodes to which we need to prevent the drag or drop. Then, in the create event we can remove the “e-draggable” or “e-droppable” class accordingly from the tree nodes.

We have prepared a sample to exhibit this behavior and it can be downloaded from the following location.

Sample : Prevent Drag or drop

Query: I noticed that there is the entire TreeView Model on the args.model field, with the all datasource specified, but don't find the current node

You can find the element dragged, in the “nodeDrop” event. In the above attached sample we have showcased how to retrieve the element text from the event argument.

Query: I have 2 TreeView Which I move items from One to another. When I finish I need to Send the data of the second Tree back to the controller to save it. I tried to look at the datasource property, but even after i remove some elements from a tree, it contains the original values when I created the tree.

Currently, in our Treeview, when a tree node is drag and dropped into another treeview the Model will not be updated to reflect the new data source. We can only get the “ID” and “value” of the current dragged node alone.

We have logged this (“Maintain the updated data source in the model after drag and drop”) as a new feature in our database. We will implement this feature in any of our upcoming releases. We usually have an interval of at least three months between releases. The feature implementation would also greatly depend on the factors such as product design, code compatibility and complexity. We will update this thread when this feature has been implemented.

Please let us know if you have further queries.

Regards,

HariKrishnan

Hi,

Thanks for the answer.For the last question, There is a way to scan the new tree structure of the tree after I have finished to drag and drop?

I notiiced that there is an _ilList field that contains the html of the subtree.

The only way to get the tree structure seems to navigate the li and get the Ids, and ParentId recursively, build a json structure and send back to the controller.

[Harikrishnan P]

Hi Andrea,

Thanks for your update.

Query: There is a way to scan the new tree structure of the tree after I have finished to drag and drop? I notiiced that there is an _ilList field that contains the html of the subtree.

The “liList” only shows the tree nodes which are initially created. Using this we cannot form a JSON and update the data source.

In the “onNodeDrop” event, we can be able to get the current dropped element. Whenever this event is triggered we can get the newly dropped elements and its closest parent or sibling “li” elements.

We can then pass this new data, and the closest elements in the AJAX request to update the data source in the controller. Please refer the below code,

  

[Script]

 

   function onDrop(args) {

        var newData = [];

        var targetElement = [];

        //Get the dropped element text

        droppedElement = args.dropedElement[0].innerHTML;

        //Get the dropped element ID

        droppedElementId = args.dropedElement.parent().parent().attr("id");

        //Push the dropped element in to a JSON object

        newData.push({ id: droppedElementId, name: droppedElement });

        var childOfDropped = args.dropedElement.parent().parent().find("li");

        //If dropped element has chid element, then push all those elements in the JSON object

        for (var i = 0; i < childOfDropped.length; i++) {

            childId = childOfDropped[i].id;

            childText = $(childOfDropped[i].children).find("a").first()[0].innerHTML;

            newData.push({ id: childId,pid:droppedElementId, name: childText });

        }

 

        //Get the parent or nearest sibling which can be used to save the data

        //Get the parent element text and ID

        if (args.dropedElement.closest("li").parents("li").first().length > 0) {

            parentElementID = $(args.dropedElement.closest("li").parents("li").first()).attr("id");

            parentElementText = args.dropedElement.closest("li").parents("li").first().find("a")[0].innerHTML;

            targetElement.push({ id: parentElementID, name: parentElementText });

        }

 

        //If parent element is not present means, then get the previous sibling using which we can save the data of the newly dropped data

        else if (args.dropedElement.closest("li").prevAll("li").first().length > 0) {

            prevSiblingID = $(args.dropedElement.closest("li").prevAll("li").first()).attr("id");

            prevSiblingText = args.dropedElement.closest("li").prevAll("li").first().find("a").first()[0].innerHTML;

            targetElement.push({ id: prevSiblingID, name: prevSiblingText });

        }

 

        //If the element is dropped as first node, then get the next sibling

        else if (args.dropedElement.closest("li").nextAll("li").first().length > 0) {

            nextSiblingID = $(args.dropedElement.closest("li").nextAll("li").first()).attr("id");

            nextSiblingText = args.dropedElement.closest("li").nextAll("li").first().find("a").first()[0].innerHTML;

            targetElement.push({ id: nextSiblingID, name: nextSiblingText });

        }

}

 

 

We need to traverse like this, using the dropped element to get the ID and text of the “li” elements. Currently, this is the only possible way to form the JSON and update the data source as you have stated.

We have attached a sample in the following location, to showcase this.

Sample Location :  Treeview Sample

Please let us know if you have further queries.

Regards,

HariKrishnan

[Andrea Perazzolo]

Hi Andrea,

Thanks for your update.

Query: There is a way to scan the new tree structure of the tree after I have finished to drag and drop? I notiiced that there is an _ilList field that contains the html of the subtree.

The “liList” only shows the tree nodes which are initially created. Using this we cannot form a JSON and update the data source.

In the “onNodeDrop” event, we can be able to get the current dropped element. Whenever this event is triggered we can get the newly dropped elements and its closest parent or sibling “li” elements.

We can then pass this new data, and the closest elements in the AJAX request to update the data source in the controller. Please refer the below code,

  

[Script]

 

   function onDrop(args) {

        var newData = [];

        var targetElement = [];

        //Get the dropped element text

        droppedElement = args.dropedElement[0].innerHTML;

        //Get the dropped element ID

        droppedElementId = args.dropedElement.parent().parent().attr("id");

        //Push the dropped element in to a JSON object

        newData.push({ id: droppedElementId, name: droppedElement });

        var childOfDropped = args.dropedElement.parent().parent().find("li");

        //If dropped element has chid element, then push all those elements in the JSON object

        for (var i = 0; i < childOfDropped.length; i++) {

            childId = childOfDropped[i].id;

            childText = $(childOfDropped[i].children).find("a").first()[0].innerHTML;

            newData.push({ id: childId,pid:droppedElementId, name: childText });

        }

 

        //Get the parent or nearest sibling which can be used to save the data

        //Get the parent element text and ID

        if (args.dropedElement.closest("li").parents("li").first().length > 0) {

            parentElementID = $(args.dropedElement.closest("li").parents("li").first()).attr("id");

            parentElementText = args.dropedElement.closest("li").parents("li").first().find("a")[0].innerHTML;

            targetElement.push({ id: parentElementID, name: parentElementText });

        }

 

        //If parent element is not present means, then get the previous sibling using which we can save the data of the newly dropped data

        else if (args.dropedElement.closest("li").prevAll("li").first().length > 0) {

            prevSiblingID = $(args.dropedElement.closest("li").prevAll("li").first()).attr("id");

            prevSiblingText = args.dropedElement.closest("li").prevAll("li").first().find("a").first()[0].innerHTML;

            targetElement.push({ id: prevSiblingID, name: prevSiblingText });

        }

 

        //If the element is dropped as first node, then get the next sibling

        else if (args.dropedElement.closest("li").nextAll("li").first().length > 0) {

            nextSiblingID = $(args.dropedElement.closest("li").nextAll("li").first()).attr("id");

            nextSiblingText = args.dropedElement.closest("li").nextAll("li").first().find("a").first()[0].innerHTML;

            targetElement.push({ id: nextSiblingID, name: nextSiblingText });

        }

}

 

 

We need to traverse like this, using the dropped element to get the ID and text of the “li” elements. Currently, this is the only possible way to form the JSON and update the data source as you have stated.

We have attached a sample in the following location, to showcase this.

Sample Location :  Treeview Sample

Please let us know if you have further queries.

Regards,

HariKrishnan

Excuse me, but the Sample attached is not downloadable.

Maybe a broken link

    Thanks

   Andrea Perazzolo

[Andrea Perazzolo]

Hi Andrea,

Currently, we do not have inbuilt functionality to prevent drag or drop on certain nodes. But we can achieve this requirement using the “HtmlAttribute” property. This property is used to add HTML attributes to the <li> element of the tree nodes. Using this property we can add a property to the nodes to which we need to prevent the drag or drop. Then, in the create event we can remove the “e-draggable” or “e-droppable” class accordingly from the tree nodes.

We have prepared a sample to exhibit this behavior and it can be downloaded from the following location.

Sample : Prevent Drag or drop

Query: I noticed that there is the entire TreeView Model on the args.model field, with the all datasource specified, but don't find the current node

You can find the element dragged, in the “nodeDrop” event. In the above attached sample we have showcased how to retrieve the element text from the event argument.

Query: I have 2 TreeView Which I move items from One to another. When I finish I need to Send the data of the second Tree back to the controller to save it. I tried to look at the datasource property, but even after i remove some elements from a tree, it contains the original values when I created the tree.

Currently, in our Treeview, when a tree node is drag and dropped into another treeview the Model will not be updated to reflect the new data source. We can only get the “ID” and “value” of the current dragged node alone.

We have logged this (“Maintain the updated data source in the model after drag and drop”) as a new feature in our database. We will implement this feature in any of our upcoming releases. We usually have an interval of at least three months between releases. The feature implementation would also greatly depend on the factors such as product design, code compatibility and complexity. We will update this thread when this feature has been implemented.

Please let us know if you have further queries.

Regards,

HariKrishnan

Hi, I tried to follow the sample attached using the DataSource for loading the Data, instead of adding directly.

I Added to my structure the Property HtmlAttribute of Type

Dictionary<string,object> and added the values.

Then I Added in the MVC Helper the association of "HtmlAttribute" in the TreeViewField Builder with  that Property name.

The result is that Visual Studio Freezes as usual when it tryies to load all the ej.web.all.min javascript for debugging.

Am I doing anything wrong?

   Thanks

   Andrea Perazzolo

[Harikrishnan P]

Hi Andrea,

Query: Excuse me, but the Sample attached is not downloadable. Maybe a broken link

Sorry about the inconvenience caused.

For your convenience, we have reattached the sample in the following location. Please check with it.

Query: I tried to follow the sample attached using the DataSource for loading the Data, instead of adding directly. The result is that Visual Studio Freezes as usual when it tryies to load all the ej.web.all.min javascript for debugging.

While using data source for the Treeview component, currently we are unable to add the class to the tree nodes, since “HtmlAttributes” property is not working properly in this case. We have logged a defect report for this. Fix for this issue will be available in our next service pack release for ASP.NET MVC which is expected to be rolled out at the end of January month.

As a workaround solution, we need to override the inbuilt function “setAttributes()” as shown below.

[Script]

 

    //this function has been overrided

    ej.TreeView.prototype._setAttributes = function (data, element) {

        for (var key in data) {

            if (key == "data")

                $(element).data("treeNodeDate", data[key]);

            else if (key == "class")

                $(element).addClass(data[key]);

            else

                $(element).attr(key, data[key]);

        }

    }

 

 

We have also showcased this workaround in the following sample.

Sample Location: Treeview Sample

Please let us know if you have further queries.

Regards,

HariKrishnan