Solved

MVC 3 Kendoui Treeview JSON?

Posted on 2013-01-09
4
3,892 Views
Last Modified: 2013-01-24
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
Comment
Question by:pointeman
  • 2
  • 2
4 Comments
 
LVL 74

Expert Comment

by:käµfm³d 👽
ID: 38761395
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
 
LVL 74

Accepted Solution

by:
käµfm³d   👽 earned 500 total points
ID: 38761555
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
 

Author Comment

by:pointeman
ID: 38770929
Thats helping me. Also been trying to get decent support from Telerik, but their trial software support is terrible. Thanks so far...
0
 

Author Closing Comment

by:pointeman
ID: 38817118
thx, I'll post again when I get this thing totally figured out.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now