Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4271
  • Last Modified:

MVC 3 Kendoui Treeview JSON?

Having issues getting Kendoui Treeview to load from the Home controller. I'm ASP.NET veteran and not fully understanding MVC and JSON. The goal is to eventually load a local sqlce, but for now just happy getting a hardcoded array to work. Help!

[Home controller]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace KendouiTreeviewJsonMvc3.Controllers
{  

    public class HomeController : Controller
    {
        [AcceptVerbs(HttpVerbs.Get)]
        public JsonResult Index() //Filter
        {
            var myData = new[] { new { first = "Jan'e", last = "Doe" }, new { first = "John", last = "Doe" } };
            return Json(myData, JsonRequestBehavior.AllowGet);
        }

        //public ActionResult Index()
        //{
        //    ViewBag.Message = "Welcome to ASP.NET MVC!";

        //    return View();
        //}

        public ActionResult About()
        {
            return View();
        }
    }
}

[View]
@{
    ViewBag.Title = "Home Page";
}

<h2>@ViewBag.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>.
   
    <br/>
    <br/>
   
    < <div>
          <a href="@Url.Content("index.htm")" style="font-size:20em"> Kendoui Treeview </a>
      </div>
</p>

<br/>
    <br/>



    <script type="text/javascript" src="../../Scripts/kendo/2012.3.1114/jquery.min.js"></script>
    <script type="text/javascript" >
        $(document).ready(function () {
            $.getJSON("Home/" + parent.accountID + "/" + parent.username + "/" + "tree.json", function (data) {

                var treeview = $("#treeview").kendoTreeView({
                    dragAndDrop: true,
                    dataSource: kendo.observableHierarchy(data),
                    dragstart: function (e) {
                        if (e.sourceNode.childNodes.length > 1) {
                            e.preventDefault();
                        }
                    }
                }).data("kendoTreeView");

                $(".k-treeview").data("kendoTreeView").bind("dragstart", function (e) {
                    if (e.sourceNode.childNodes.length > 1) {
                        e.preventDefault();
                    }
                });
                $("#removeNode").click(function () {
                    var selectedNode = treeview.data("kendoTreeView").select();

                    treeview.remove(selectedNode);
                });
                $("#appendNodeToSelected").click(function () {
                    var selectedNode = treeview.data("kendoTreeView").select();

                    if (selectedNode.length == 0) {
                        selectedNode = null;
                    }

                    var nodeText = prompt("Please enter desired Node name", "Default");

                    if (nodeText == null) {
                        return;
                    }

                    treeview.append({
                        text: nodeText
                    }, selectedNode);
                });
            });
        });
       
        </script>
0
pointeman
Asked:
pointeman
  • 2
  • 2
1 Solution
 
käµfm³d 👽Commented:
Where is parent defined in your Javascript? Also, you're executing a JQuery select against the class treeview, but you don't have anything in your HTML that has this id.
0
 
käµfm³d 👽Commented:
I played around with this for a bit, taking many of my cues from the examples that come with Kendo (e.g. examples/web/treeview/dragdrop.html; I used the OpenSource version for testing), and perhaps this will get you started:

Markup
@{
    ViewBag.Title = "Home Page";
}

<h2>@ViewBag.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>.
    
    <br />
    <br />

    <div>
        <a href="@Url.Content("index.htm")" style="font-size:20em">Kendoui Treeview </a>
    </div>
    <div id="treeview-left">
    </div>

    <div id="treeview-right">
    </div>
</p>

<br />
<br />


<script src="/Scripts/jquery.min.js"></script>
<script src="/Scripts/kendo.web.min.js"></script>
@*<script type="text/javascript" src="../../Scripts/kendo/2012.3.1114/jquery.min.js"></script>*@
<script type="text/javascript">
    $(document).ready(function () {
        var right = $("#treeview-right").kendoTreeView({
            dragAndDrop: true,
            dataSource: [
                {
                    text: "People"
                }
            ]
        });

        $.getJSON("/Home", function (data) {

            var treeview = $("#treeview-left").kendoTreeView({
                dragAndDrop: true,
                dataSource: data,
                //dragstart: function (e) {
                //    if (e.sourceNode.childNodes.length > 1) {
                //        e.preventDefault();
                //    }
                //}
            }).data("kendoTreeView");

            //$(".k-treeview").data("kendoTreeView").bind("dragstart", function (e) {
            //    if (e.sourceNode.childNodes.length > 1) {
            //        e.preventDefault();
            //    }
            //});
            //$("#removeNode").click(function () {
            //    var selectedNode = treeview.data("kendoTreeView").select();

            //    treeview.remove(selectedNode);
            //});
            //$("#appendNodeToSelected").click(function () {
            //    var selectedNode = treeview.data("kendoTreeView").select();

            //    if (selectedNode.length == 0) {
            //        selectedNode = null;
            //    }

            //    var nodeText = prompt("Please enter desired Node name", "Default");

            //    if (nodeText == null) {
            //        return;
            //    }

            //    treeview.append({
            //        text: nodeText
            //    }, selectedNode);
            //});
        });
    });

</script>

Open in new window


Code-behind
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace _27990506.Controllers
{

    public class HomeController : Controller
    {
        [AcceptVerbs(HttpVerbs.Get)]
        public JsonResult Index() //Filter
        {
            var myData = new[] { new { text = "People", expanded = true, items = new[] { new { text = "Jan'e Doe" }, new { text = "John Doe" } } } };
            return Json(myData, JsonRequestBehavior.AllowGet);
        }

        //public ActionResult Index()
        //{
        //    ViewBag.Message = "Welcome to ASP.NET MVC!";

        //    return View();
        //}

        public ActionResult About()
        {
            return View();
        }
    }
}

Open in new window


Again, taking my cues from the example, it seems Kendo expects certain identifiers to be used (e.g. "text"). You basically need to mimic the structure Kendo expects on the C# side of things. In the example above, you can see that I changed the structure of the Json you were returning. I also combined the first and last names into one field. This is just what I inferred from the example. There may be a way to keep the structure as you had it, but the Kendo example doesn't really hint at that.

Be sure tho change your paths to the relevant Kendo scripts within the markup. I added these to my project manually, so the path is absolute for testing purposes.
0
 
pointemanAuthor Commented:
Thats helping me. Also been trying to get decent support from Telerik, but their trial software support is terrible. Thanks so far...
0
 
pointemanAuthor Commented:
thx, I'll post again when I get this thing totally figured out.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now