jQWidgets Forums
jQuery UI Widgets › Forums › ASP .NET MVC › Binding jqTree to viewModel
Tagged: jqxree ViewModel
This topic contains 5 replies, has 2 voices, and was last updated by RobWarning 8 years, 5 months ago.
-
Author
-
Hi,
Using the JQTree in a MVC project.
I have a model:{
public class TreeModel
{
public List<TreeNode> TreeNodeList { get; set; }
}public class TreeNode
{
public string label { get; set; }
public string value { get; set; }
public string html { get; set; }
public string id { get; set; }
public bool disabled { get; set; }
public bool check { get; set; }
public bool selected { get; set; }
public List<TreeNode> items { get; set; }
public string iconUrl { get; set; }
public Size iconsize { get; set; }
}
}And in my JQWidgetsController :
public ActionResult DropDownTree()
{
TreeModel model = new Models.TreeModel();
model.TreeNodeList = new List<TreeNode>();TreeNode node1 = new TreeNode();
node1.label = “Node1Label”;
node1.value = “Node1Value”;
node1.id = “1”;
node1.items = new List<TreeNode>();
model.TreeNodeList.Add(node1);TreeNode node2 = new TreeNode();
node2.label = “Node2Label”;
node2.value = “Node2Value”;
node2.id = “2”;
node2.items = new List<TreeNode>();
model.TreeNodeList.Add(node2);TreeNode node3 = new TreeNode();
node3.label = “SubNode1-1”;
node3.value = “Node3value”;
node3.id = “3”;
node3.items = new List<TreeNode>();
node1.items.Add(node3);TreeNode node4 = new TreeNode();
node4.label = “SubNode1-2”;
node4.value = “Node4value”;
node4.id = “4”;
node4.items = new List<TreeNode>();
node1.items.Add(node4);TreeNode node5 = new TreeNode();
node5.label = “SubNode1-3”;
node5.value = “Node5value”;
node5.id = “5”;
node5.items = new List<TreeNode>();
node1.items.Add(node5);return View(model);
}and this is my view:
@model jQwidgetsExample.Controllers.JQWidgetsController
@{
Layout = null;
}<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width” />
<title>DropDownTree</title>
@Styles.Render(“~/Content/css”)
@Scripts.Render(“~/bundles/modernizr”)
@Scripts.Render(“~/bundles/jquery”)
@Scripts.Render(“~/bundles/bootstrap”)
@Scripts.Render(“~/bundles/jqwidgets”)<script>
$(document).ready(function () {$(“#dropDownButton”).jqxDropDownButton({ width: 150, height: 25 })
// create jqxTree
$(‘#jqxTree’).jqxTree({ height: ‘400px’, hasThreeStates: true, checkboxes: true, width: ‘330px’ });
// Next line not working!!
$(‘#jqxTree’).jqxTree({ source: model.TreeNodeList });
$(‘#jqxTree’).css(‘visibility’, ‘visible’);
$(“#jqxTree”).jqxTree(‘selectItem’, $(“#home”)[0]);
});
</script>
</head>
<body class=’default’>
<div id=’jqxWidget’>
<div id=”dropDownButton”>
<div style=’float: left;’>
<div id=’jqxTree’ style=’visibility: hidden; float: left; margin-left: 20px;’>
</div>
</div>
</div>
</div>
</body>
</html>The DropDownTree renders OK, with just static li items it works fine.
But how should I bind the viewmodel to the Tree now?
I have tested various things but no joy jet. please help.thanks
Rob
Hi Rob,
The Tree’s source could be a JSON object like that:
` var source = [
{
icon: “../../images/mailIcon.png”, label: “Mail”, expanded: true, items: [
{ icon: “../../images/calendarIcon.png”, label: “Calendar” },
{ icon: “../../images/contactsIcon.png”, label: “Contacts”, selected: true }
]
},
{
icon: “../../images/folder.png”, label: “Inbox”, expanded: true, items: [
{ icon: “../../images/folder.png”, label: “Admin” },
{ icon: “../../images/folder.png”, label: “Corporate” },
{ icon: “../../images/folder.png”, label: “Finance” },
{ icon: “../../images/folder.png”, label: “Other” },
]
},`This means that model.TreeNodeList is Invalid data source and to data bind to it, you should turn it into JSON.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Dear Peter,
I am struggling now for hours but still no joy.
Just some questions:
1. is it necessaire to use the jqxDatadapter? I just want to display the items. not add or edit them.
2. I did try to translate the modeldata to Json in my view this way:
<script>
$(document).ready(function () {
$(“#dropDownButton”).jqxDropDownButton({ width: 150, height: 25 });
// create jqxTree
$(‘#jqxTree’).jqxTree({ height: ‘400px’, hasThreeStates: true, checkboxes: true, width: ‘330px’ });
var tsource=@Html.Raw(Json.Encode(Model.TreeNodeList));
$(‘#jqxTree’).jqxTree({source: tsource});
})
</script>
Why this is not working?
3. I did try to make a separate Json call as described in https://msdn.microsoft.com/en-us/library/system.web.mvc.jsonresult(v=vs.118).aspx
I added an actionresult in my controller that’s returning: Json(DepartementList, JsonRequestBehavior.AllowGet);
Then in my view:
<script>
$(document).ready(function () {
$(“#dropDownButton”).jqxDropDownButton({ width: 150, height: 25 });
// create jqxTree
$(‘#jqxTree’).jqxTree({ height: ‘400px’, hasThreeStates: true, checkboxes: true, width: ‘330px’ });
var actionUrl = @Url.Action(“DepartementTree”, “JQWidgetsController”);
$.getJSON(actionUrl,displayData);
})function displayData(responce){
$(‘#jqxTree’).jqxTree({source: responce});
}
</script>
But I don’t get beyond the getJson action call.
4. Is there not somewhere a complete MVC 5 example of a controller and a view with a jqxTree?? I am not the first one to using this..thanks for helping.
Rob
Hi RobWarning,
The source should be a JSON and exactly in the format I wrote in the previous post. Example with this is available http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtree/defaultfunctionality.htm?light. It does not matter whether its ASP .NET MVC5 or some other technology, the important part is to initialize the Tree correctly as in the JS samples.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/the link fell off: http://www.c-sharpcorner.com/article/using-treeview-with-asp-net-mvc-4/
-
AuthorPosts
You must be logged in to reply to this topic.