MVC3 JSON Telerik MVC TreeView Javascript

Question

I am trying to bind data from json. In the controller, I am sending

......
public JsonResult LoadTree()
........
return Json(jn, JsonRequestBehavior.AllowGet);

In debug I get the values in jn (47 items, each has two enteries (text and value).

In the view, I am using the following script:

function onDataBinding(e) {
    var url = 'CourseCases/LoadTree';
    var result;
    $.ajax({
        url: url,
        data: {},
        contentType: "application/json",
        success: function (data) {
            alert(data);
            var treeview = $("#TreeView").data("tTreeView");
            treeview.bindTo(data);
        }
    });
}

It does not work, alert shows object, object; and the treeview is blank! Any idea why? Thanks in advance.

Darin Dimitrov · Accepted Answer · 2012-05-22 15:36:16Z

1

Actually the properties that you are sending should be called Value and Text instead of value and text. Here's an example that works fine for me.

Controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult LoadTree()
    {
        var jn = new[] 
        {
            new { Value = "1", Text = "Item 1" },
            new { Value = "2", Text = "Item 2" },
            new { Value = "3", Text = "Item 3" },
        };
        return Json(jn, JsonRequestBehavior.AllowGet);
    }
}

View (~/Views/Home/Index.cshtml):

<script type="text/javascript">
    function onDataBinding(e) {
        var url = '@Url.Action("LoadTree")';
        var result;
        $.ajax({
            url: url,
            data: { },
            success: function (data) {
                var treeview = $("#TreeView").data("tTreeView");
                treeview.bindTo(data);
            }
        });
    }    
</script>

@(Html
    .Telerik()
    .TreeView()
    .Name("TreeView")
    .ClientEvents(events =>
    {
        events.OnDataBinding("onDataBinding");
    })
)

answered May 22, 2012 at 15:36

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hncl Over a year ago

Thank you Darin for your assistance.

Tz_ · Accepted Answer · 2012-05-21 22:10:35Z

0

Probably you should call treeview.bindTo in the callback method of $.post directly. I guess with the current code you might bind the treeview to jsonObject == jn before jn == content is ensured in the callback. If you alert you add a big delay and it gives the AJAX post enough time to complete and run the callback.

answered May 21, 2012 at 22:10

Tz_

2,95920 silver badges13 bronze badges

1 Comment

hncl Over a year ago

Thanks, the problem is I see the json data when I debug the program in the controller, but when I have alert in the view it is null!!

Collectives™ on Stack Overflow

MVC3 JSON Telerik MVC TreeView Javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related