Tree View – using the Json

[HimanshuMember]

hi !
I am sending the data through database using Json .

Controller :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace CommerceSuite.Web.Controllers
{
public class NavigationTreeMenuController : Controller
{

private readonly IMenuItemService _itemService;
public NavigationTreeMenuController(IMenuItemService menuitemService)
{
this._itemService = menuitemService;
}

#region Methods

public ActionResult Index()
{
return PartialView("LeftMenuNavigation");

}

public ActionResult MenuList (MenuItemModel model)
{
return Json(_itemService.GetAllMenuItem(), JsonRequestBehavior.AllowGet);
}

}
}
#endregion


LeftMenuNavigation.cshtml

Navigation

$(document).ready(function () {

var source =
{
datatype: "json",
url:"NavigationTreeMenu/MenuList",

datafields: [
{ name: 'MenuItemId' },
{ name: 'MenuItemParentId' },
{ name: 'MenuItemName' }
],
id: 'id'

};
var dataAdapter = new $.jqx.dataAdapter(source);

dataAdapter.dataBind();
var records = dataAdapter.getRecordsHierarchy('MenuItemId', 'MenuItemParentId','MenuItemName', 'items', [{ name: 'MenuItemName', map: 'label'}]);
$('#jqxWidget').jqxTree({ source: records, width: '300px', theme: 'classic' });
});

When Run the Program the tree View does not Generate.
After Debugging i found that in the records object it contains null.

If any Solution Kindly Provide?

[Peter StoevKeymaster]

Hi Himanshu,

The code below is called before the dataAdapter is filled with records because you are using Ajax for binding:

var records = dataAdapter.getRecordsHierarchy('MenuItemId', 'MenuItemParentId','MenuItemName', 'items', [{ name: 'MenuItemName', map: 'label'}]);
$('#jqxWidget').jqxTree({ source: records, width: '300px', theme: 'classic' });
});

There are 2 options:

1) Set async to false in the source object.
2) Load the Tree in the dataAdapter’s loadComplete callback function which is called when the data is loaded.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[HimanshuMember]

Hi Peter Stove!

The two options you have Provided Both are Working but i am my purpose is not solved yet.

if i Choose First Option : set async to false – then i read a jQwidgets Data Adapter documentation it says that the order of conformation is not guaranteed.

When i Choose the Second option – My tree Render after whole page loaded then it load the tree which is also another problem for me.

So, their is any Solution another than this.

Now, any how tree is rendering now how to call Link of the tree to various page. I need to call ajax Partial Page using Ajax functionality which link will be given on the tree child node.
how i can achieve this?

[Peter StoevKeymaster]

Hi Himanshu,

The order is not guarangeed if “async” is true so setting “async” to false should be ok for you.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[JVMember]

Hello All,

I have an app where the tree can read in json data and the end user can manipulate the labels and shape of the tree. Now I need to query the tree so I can get the new json representation back out. I intend to save the new json data so the user can edit some other time. My question is, how can I get the json image of the tree back out?

Any suggestions would be greatly appreciated.

Regards

[JVMember]

… anybody out there?

[Peter StoevKeymaster]

Hi JV,

There’s no such built-in functionality in jqxTree. You can get the jqxTree’s items via the ‘getItems’ method, loop through them and create JSON representation depending on your application’s logic.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts