Kendo TreeView dragstart not a function

[Craig]

Hi I'm new to kendo and can't get the dragstart function to work.

I keep getting this error when trying to use the dragstart function
"ReferenceError: treeview is not defined", If I do define "treeview"
I get the error, "TypeError: treeview.data is not a function".

this is the function i used:
treeview.data("kendoTreeView").bind("dragstart", function (e) {
    if ($(e.sourceNode).parentsUntil(".k-treeview", ".k-item").length == 0) 
    {
       e.preventDefault();
    }
});
This is how I implemented the treeView
<div id="treeView">
   @(Html.Kendo().TreeView()
     .Name( "treeview" )
     .DragAndDrop( true )
     .DataTextField( "Title" )
     .LoadOnDemand( true )
     .DataSource( datasource => datasource
       .Read( read => read
         .Action( "PageList", "Home" )
       )
     )
     .Events( events => events
       .DragStart( "dragstart" )
       )
     )
</div>
and this is my controller code:
public class HomeController : Controller
{
  public ActionResult Index()
  {
    var pageList = BusinessLogic.Page.PageInfoList.Get();
      return View( "Index", pageList );
  }
 
  public JsonResult PageList( int? id )
  {
    var pageInfoList = PageInfoList.Get();
    var pageList = from e in pageInfoList
           where
            (
             id.HasValue ? e.ParentPageId == id : e.ParentPageId == null
            )
             select new
             {
              id = e.Id,
              Title = e.Title,
              hasChildren = (pageInfoList.Any
                    ( p => p.ParentPageId == e.Id ))
             };
 
             return Json( pageList, JsonRequestBehavior.AllowGet );
  }
}

Any help would be much appreciated.

I also need help to bind the items that i drag and drop to the new position.

[Vladimir Iliev]

Hi Craig,


From the provided infromation it seems that the issue comes from invalid event handler definition - please check the updated example below:

@(Html.Kendo().TreeView()
    .Name( "treeview" )
    .DragAndDrop( true )
    .DataTextField( "Title" )
    .LoadOnDemand( true )
    .DataSource( datasource => datasource
        .Read( read => read.Action( "PageList", "Home" ))
    )
    .Events(events => events.DragStart( "dragstart" ))
)

<script type="text/javascript">
    function dragstart(e) {
        if ($(e.sourceNode).parentsUntil(".k-treeview", ".k-item").length == 0) {
            e.preventDefault();
        }
    }
</script>

 Kind Regards,
Vladimir Iliev
the Telerik team

[Craig]

sorry about the spam, it was due to your server issues

[Craig]

Thank you Vlad for your help, I fixed my original issue thanks to your help, I can now drag and drop Items in my treeView.

<div id="treeView">

        @(Html.Kendo().TreeView()

        .Name( "treeView" )

        .DataTextField( "Title" )

        .LoadOnDemand( true )

        .HighlightPath( true )

        .DataSource( dataSource => dataSource

            .Read( read => read

                .Action( "PageList", "CMSPage" )

            )

        )

            .Events( events => events

                .Drop( "addData" )

            )

    )

    </div>

I changed my events name to addData and execute it on the .Drop event instead of the .Dragstart.
But how would I implement a change of Id on the .Drop event of my treeView, for instance if I wanted to drag a parent called "Home" into another parent called "Test" and then get the parentId of the Home page to inherent the Id of the Test Page so that Home becomes it's child in my database too, in a csla business object?

My function is empty at the moment.

<script type="text/javascript">

    function addData(e) {

 

    }

</script>

[Craig]

Thank you Vlad for your help, I fixed my original issue thanks to your help, I can now drag and drop Items in my treeView.

<div id="treeView">

        @(Html.Kendo().TreeView()

        .Name( "treeView" )

        .DataTextField( "Title" )

        .LoadOnDemand( true )

        .HighlightPath( true )

        .DataSource( dataSource => dataSource

            .Read( read => read

                .Action( "PageList", "CMSPage" )

            )

        )

            .Events( events => events

                .Drop( "addData" )

            )

    )

</div>

I changed my events name to addData and execute it on the .Drop event instead of the .Dragstart.
But how would I implement a change of Id on the .Drop event of my treeView, for instance if I wanted to drag a parent called "Home" into another parent called "Test" and then get the parentId of the Home page to inherent the Id of the Test Page so that Home becomes it's child in my database too, in a csla business object?

My function is empty at the moment.

<script type="text/javascript">

    function addData(e) {

  

    }

</script>

[Craig]

Thank you Vlad for your help, I fixed my original issue thanks to your help, I can now drag and drop Items in my treeView.

<div id="treeView">

        @(Html.Kendo().TreeView()

        .Name( "treeView" )

        .DataTextField( "Title" )

        .LoadOnDemand( true )

        .HighlightPath( true )

        .DataSource( dataSource => dataSource

            .Read( read => read

                .Action( "PageList", "CMSPage" )

            )

        )

            .Events( events => events

                .Drop( "addData" )

            )

    )

</div>

I changed my events name to addData and execute it on the .Drop event instead of the .Dragstart.
But how would I implement a change of Id on the .Drop event of my treeView, for instance if I wanted to drag a parent called "Home" into another parent called "Test" and then get the parentId of the Home page to inherent the Id of the Test Page so that Home becomes it's child in my database too, in a csla business object?

My function is empty at the moment.

<script type="text/javascript">

    function addData(e) {

  

    }

</script>

[Craig]

Thank you Vlad for your help, I fixed my original issue thanks to your help, I can now drag and drop Items in my treeView.

<div id="treeView">

        @(Html.Kendo().TreeView()

        .Name( "treeView" )

        .DataTextField( "Title" )

        .LoadOnDemand( true )

        .HighlightPath( true )

        .DataSource( dataSource => dataSource

            .Read( read => read

                .Action( "PageList", "CMSPage" )

            )

        )

            .Events( events => events

                .Drop( "addData" )

            )

    )

</div>

How would I implement a change of Id on the .Drop event of my treeView, for instance if I wanted to drag a parent called "Home" into another parent called "Test" and then get the parentId of the Home page to inherent the Id of the Test Page so that Home becomes it's child in my database too, in a csla business object?
I have script using ajax to call the controller to check if we deliver to the supplied postcode.

<script type="text/javascript">

        var url = location.protocol + '//' + location.host

               + "/CMSPage/UpdatePageSortingWeight";

        $.ajax({

            type: "POST",

            url: url,

            data: {

                sortingWeight: sortingweight,

                parentId: parentid,

                id: id

            },

            error: function (msg) {

                alert(msg.responseText);

            },

            success: function (response) {

            }

        })

</script>

But I don't know how to use the controller to change the Id's, this is my controller

[HttpPost]

public JsonResult UpdatePageSortingWeight( int sortingWeight )

{

     // Update sortingweight in the db here

     return Json( true );

}

[Vladimir Iliev]

Hi Craig,

 
Basically you can use the drop event arguments sourceNode and destinationNode, get their dataItem and send their texts or ids to the server side using jQuery ajax - please check the example below (you can use it as a baseline):

drop event handler:

function onDrop(e) {
    var treeView = $("#treeview-left").data("kendoTreeView");
    var sourceNode = treeView.dataItem(e.sourceNode);
    var destinationNode = treeView.dataItem(e.destinationNode);

    if (sourceNode && destinationNode) {
        //create ajax request to save the changes on the server
        $.ajax({
            url: "/TreeView/SaveChanges?sourceNode=" + sourceNode.text + "&destinationNode=" + destinationNode.text
        })
    }
}

example controller action:

public ActionResult SaveChanges(string sourceNode, string destinationNode)
{
    //...execute your custom logic

Kind Regards,
Vladimir Iliev
the Telerik team

[Craig]

Thank you very much I will try and implement that.

[Craig]

Hi Vlad, do you by any chance know how the DragAndDrop works? for instance if I have a list of 6 items and I take the last item and drop it after the first item, will the e.dropPosition be "before" the item that was second or will it be after the item that is first, originally i thought if you're dropping anything from the bottom of the item list towards the top it will take the "before" dropPosition and if your taking anything from the top of the item list towards the bottom it will take the "after" dropPosition, but further testing proved that this is not the case because on some occasions if you take an item from the bottom of the item list towards the top it takes the "after" dropPostion and vice versa. can you please clarify?

[Vladimir Iliev]

Hi Craig,

 
Basically if a node is available after the drop target and it's different from the current node than the "before" drop position will be used. 

Kind Regards,
Vladimir Iliev
the Telerik team