JQxTree save state??

[DundeeParticipant]

There is any possibility for saving the state of a tree….like the grid ?

[DimitarParticipant]

Hello Dundee,

Unfortunately, saving a tree’s state is not supported.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[DundeeParticipant]

is there any plan to add this functionnality on tree….and probably other widget??

[DimitarParticipant]

Hi Dundee,

Unfortunately, we do have plans to implement this feature for jqxTree.

As for other widgets:

• jqxGrid has a save/load state functionality;
• other widgets, such as jqxTabs and jqxNavigationBar can use cookies to save or load the selected item.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[jean-fredericParticipant]

Hello,

We did achive this function. But, we have a small “performance” issue. Well, this is working good, but, each time the Tree is shown, we iterate through all “open” branch to open them. But since there is an event on “expand” (wich is asynchronous), we fire that event each time we open a branch.

So, Im looking for a solution for not “firing” the updateDatabase each time we refresh the tree. I was trying to figure if it was possible to use “click” event instead of “expand” event.

Le me show you.

We have this function on the

On the page loading (where the tree is) , we call that function.

function showPagesForCurrentSite() {
$(‘#jqxTree-pages’).jqxTree({ theme: getTheme(),toggleMode:’click’ });
updateTreeSource();
bindTreeRightClickEvent();
bindTreeExpand();
bindTreeCollapse();
}

each time, we want to only refresh the tree, we call updateTreeSource();

Now, the function wich expend all “open page” :
(this return from the database, a list of all open page for the current user/site)

function expandPages()
{
var obj =
{
‘siteId’: $(‘#userSite’).val()
}

var array= [];

var jqXHR = $.ajax({
url: ‘/api/UserProfileOpenPageForCurrentSiteApi/GetAllOpenPages’,
data: obj,
async: false
});

array = jqXHR.responseText;

var items = $(‘#jqxTree-pages’).jqxTree(‘getItems’);
for (var i = 0; i < items.length; i++) {
if (array.indexOf(items[i].id) != -1)
{
$(‘#jqxTree-pages’).jqxTree(‘expandItem’, items[i]);
}
};
}

function updateTreeSource()
{
// prepare the data
var source =
{
datatype: “xml”,
datafields: [
{ name: ‘id’, map: ‘id’ },
{ name: ‘Ordre’, map: ‘Ordre’ },
{ name: ‘label’, map: ‘label’ },
{ name: ‘parentid’, map: ‘parentid’ },
{ name: ‘expanded’, map: ‘expanded’ },
],
root: “ArrayOfPagesDto”,
record: “PagesDto”,
id: ‘id’,
url: “/api/AllPages”,
async: false
};
var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();
var records = dataAdapter.getRecordsHierarchy(‘id’, ‘parentid’, ‘items’, [{ name: ‘label’, map: ‘label’ }]);
$(‘#jqxTree-pages’).jqxTree({ source: records });
expandPages();
}

function bindTreeRightClickEvent()
{
var contextMenu = $(“#jqxMenu”).jqxMenu({ width: ‘120px’, theme: getTheme(), height: ’83px’, autoOpenPopup: false, mode: ‘popup’ });
var clickedItem = null;

var attachContextMenu = function () {
// open the context menu when the user presses the mouse right button.
$(“#jqxTree-pages li”).on(‘mousedown’, function (event) {
var target = $(event.target).parents(‘li:first’)[0];
var rightClick = isRightClick(event);
if (rightClick && target != null) {
$(“#jqxTree-pages”).jqxTree(‘selectItem’, target);
var scrollTop = $(window).scrollTop();
var scrollLeft = $(window).scrollLeft();
contextMenu.jqxMenu(‘open’, parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);
return false;
}
});
}
attachContextMenu();
$(“#jqxMenu”).on(‘itemclick’, function (event) {
var item = $.trim($(event.args).text());
switch (item) {
case “Open”:
var selectedItem = $(‘#jqxTree-pages’).jqxTree(‘selectedItem’);
alert(‘Page Id:’ + selectedItem.id);
break;
}
});

// disable the default browser’s context menu.
$(document).on(‘contextmenu’, function (e) {
if ($(e.target).parents(‘.jqx-tree’).length > 0) {
return false;
}
return true;
});

function isRightClick(event) {
var rightclick;
if (!event) var event = window.event;
if (event.which) rightclick = (event.which == 3);
else if (event.button) rightclick = (event.button == 2);
return rightclick;
}

$(“#jqxTree”).on(‘itemclick’, function (event) {
var id = event.args.id;
var custom;
var recursion = function (object) {
for (var i = 0; i < object.length; i++) {
if (id == object[i].id) {
custom = object[i].custom;
break;
} else if (object[i].items) {
recursion(object[i].items);
};
};
};
recursion(records);
$(“#eventLog”).text(“Id: ” + event.args.id + “, Text: ” + $(event.args).text() + “, Custom: ” + custom);
});
}

function bindTreeExpand() {
$(‘#jqxTree-pages’).on(‘expand’, function (event) {
var args = event.args;
var item = $(‘#jqxTree-pages’).jqxTree(‘getItem’, args.element);

// Add an open page if it doesn’t exist already;
var obj =
{
‘Site’: parseInt($(“#userSite”).val()),
‘AD’: $(“#userAD”).val(),
‘PageId’: parseInt(item.id),
‘Open’: true,
}
updateUserProfileOpenPage(obj);
});
}

function bindTreeCollapse() {
$(‘#jqxTree-pages’).on(‘collapse’, function (event) {
var args = event.args;
var item = $(‘#jqxTree-pages’).jqxTree(‘getItem’, args.element);

// Add an open page if it doesn’t exist already;
var obj =
{
‘Site’: parseInt($(“#userSite”).val()),
‘AD’: $(“#userAD”).val(),
‘PageId’: parseInt(item.id),
‘Open’: false,
}
updateUserProfileOpenPage(obj);
});
}

function updateUserProfileOpenPage(obj) {
$.ajax({
url: “/api/UserProfileOpenPageApi/UpdateUserProfileOpenPage”,
type: “post”,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
data: JSON.stringify(obj),
async: false
});
}

Jean-Frédéric
Canam Group

[jean-fredericParticipant]

Maybe a solution ??

I receive a list of xml like this :

<ArrayOfPagesDto xmlns:i=”http://www.w3.org/2001/XMLSchema-instance” xmlns=”http://schemas.datacontract.org/2004/07/Octopus_v2.Dto”>
<PagesDto>
<Order>1</Order>
<id>125</id>
<label>Home</label>
<langues i:nil=”true”></langues>
<parentid>0</parentid>
</PagesDto>
<PagesDto>
<Order>1</Order>
<id>137</id>
<label>À propos</label>
<langues i:nil=”true”></langues>
<parentid>125</parentid>
</PagesDto>
<PagesDto>
<Order>1</Order>
<id>153</id>
<label>Bénéfices</label>
<langues i:nil=”true”></langues>
<parentid>151</parentid>
</PagesDto>

…

</ArrayOfPagesDto>

I could receive a parameter that say the page need to be open or not. So, I would not have to iterate thru all tree item and “open them” manually. This way, I would not “fire” the expand event.

But, HOW, can I tell the tree to open the item ? I did try that approach in the past (with the param bool expanded, but as soon as there is a param named expanded, even if true or false, it will expand the tree).

Thanks

Jean-Frederic
Canam Group

[jean-fredericParticipant]

I got the solution :

I discovered that when a dataAdapter contain a properties “expanded” wich may containt anything, it will expand the tree.
Since I return a list of object (PagesDTO), if I name a propertie “expanded” with true of false, it will expand ALL tree level, wich I dont want.

So, here is my Jedi Trick to bypass that.

I didnt wanted to have a “server-side” load with recursive proc. So i decided to use the client computer to manipulate the data. I added a properties “state” (string) wich will containt the word “expanded” if the tree need to be open.

Then, when building the dataAdapter, will iterate thru all of it and If I see a “state==expanded”, I will ADD a new properties wich will be called “expanded”.

So now, I expand my tree on the LOADING. I dont trigger my “expand” event while I expand my tree AND , there is not “visual glitch”, like a tree that is closed and open after that.

Here is my example :

function showPagesForCurrentSite() {
$(‘#jqxTree-pages’).jqxTree({ theme: getTheme(),toggleMode:’click’ });
updateTreeSource();
bindTreeRightClickEvent();
bindTreeExpand();
bindTreeCollapse();
}

function updateTreeSource()
{
// prepare the data
var source =
{
datatype: “xml”,
datafields: [
{ name: ‘id’, map: ‘id’ },
{ name: ‘Ordre’, map: ‘Ordre’ },
{ name: ‘label’, map: ‘label’ },
{ name: ‘parentid’, map: ‘parentid’ },
{ name: ‘state’, map: ‘state’ },
],
root: “ArrayOfPagesDto”,
record: “PagesDto”,
id: ‘id’,
url: “/api/AllPages”,
async: false
};

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

dataAdapter.dataBind();

var length = dataAdapter.records.length;

for (var i = 0; i < length; i++) {
if (dataAdapter.records[i].state == “expanded”)
dataAdapter.records[i].expanded = true;
/*this is the MAGIC, only records wich have the state expanded will have the propertie “expanded” */
}
var records = dataAdapter.getRecordsHierarchy(‘id’, ‘parentid’, ‘items’, [{ name: ‘label’, map: ‘label’ }]);

$(‘#jqxTree-pages’).jqxTree({ source: records });
}

function bindTreeRightClickEvent()
{
var contextMenu = $(“#jqxMenu”).jqxMenu({ width: ‘120px’, theme: getTheme(), height: ’83px’, autoOpenPopup: false, mode: ‘popup’ });
var clickedItem = null;

var attachContextMenu = function () {
// open the context menu when the user presses the mouse right button.
$(“#jqxTree-pages li”).on(‘mousedown’, function (event) {
var target = $(event.target).parents(‘li:first’)[0];
var rightClick = isRightClick(event);
if (rightClick && target != null) {
$(“#jqxTree-pages”).jqxTree(‘selectItem’, target);
var scrollTop = $(window).scrollTop();
var scrollLeft = $(window).scrollLeft();
contextMenu.jqxMenu(‘open’, parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);
return false;
}
});
}
attachContextMenu();
$(“#jqxMenu”).on(‘itemclick’, function (event) {
var item = $.trim($(event.args).text());
switch (item) {
case “Open”:
var selectedItem = $(‘#jqxTree-pages’).jqxTree(‘selectedItem’);
alert(‘Page Id:’ + selectedItem.id);
break;
case “Add Item”:
var selectedItem = $(‘#jqxTree-pages’).jqxTree(‘selectedItem’);
if (selectedItem != null) {
$(‘#jqxTree-pages’).jqxTree(‘addTo’, { label: ‘Item’ }, selectedItem.element);
attachContextMenu();
}
break;
case “Remove Item”:
var selectedItem = $(‘#jqxTree-pages’).jqxTree(‘selectedItem’);
if (selectedItem != null) {
$(‘#jqxTree-pages’).jqxTree(‘removeItem’, selectedItem.element);
attachContextMenu();
}
break;
}
});

// disable the default browser’s context menu.
$(document).on(‘contextmenu’, function (e) {
if ($(e.target).parents(‘.jqx-tree’).length > 0) {
return false;
}
return true;
});

function isRightClick(event) {
var rightclick;
if (!event) var event = window.event;
if (event.which) rightclick = (event.which == 3);
else if (event.button) rightclick = (event.button == 2);
return rightclick;
}

$(“#jqxTree”).on(‘itemclick’, function (event) {
var id = event.args.id;
var custom;
var recursion = function (object) {
for (var i = 0; i < object.length; i++) {
if (id == object[i].id) {
custom = object[i].custom;
break;
} else if (object[i].items) {
recursion(object[i].items);
};
};
};
recursion(records);
$(“#eventLog”).text(“Id: ” + event.args.id + “, Text: ” + $(event.args).text() + “, Custom: ” + custom);
});
}

function bindTreeExpand() {

$(‘#jqxTree-pages’).on(‘expand’, function (event) {
var args = event.args;
var item = $(‘#jqxTree-pages’).jqxTree(‘getItem’, args.element);

// Add an open page if it doesn’t exist already;
var obj =
{
‘Site’: parseInt($(“#userSite”).val()),
‘AD’: $(“#userAD”).val(),
‘PageId’: parseInt(item.id),
‘Open’: true,
}
updateUserProfileOpenPage(obj);
});
}

function bindTreeCollapse() {
$(‘#jqxTree-pages’).on(‘collapse’, function (event) {
var args = event.args;
var item = $(‘#jqxTree-pages’).jqxTree(‘getItem’, args.element);

// Add an open page if it doesn’t exist already;
var obj =
{
‘Site’: parseInt($(“#userSite”).val()),
‘AD’: $(“#userAD”).val(),
‘PageId’: parseInt(item.id),
‘Open’: false,
}
updateUserProfileOpenPage(obj);
});
}

function updateUserProfileOpenPage(obj) {
$.ajax({
url: “/api/UserProfileOpenPageApi/UpdateUserProfileOpenPage”,
type: “post”,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
data: JSON.stringify(obj),
async: false
});
}

[manichandanaParticipant]

Hi Team,
I just want to know how to persist the tree data in jqxtree.
As soon as I am refreshing the page my contents in the tree are being lost.is there any way that I could persist the data within the tree .

I am using the example from jqxtree -> settings and not able to find a way to store the data.

Please find my code below.

========================================================================================================================================================<!DOCTYPE html>
<html lang=”en”>
<head>
<meta name=”keywords” content=”jQuery Tree, Tree Widget, TreeView” />
<meta name=”description” content=”The jqxTree displays a hierarchical collection of items. You
can populate it from ‘UL’ or by using its ‘source’ property.” />
<title id=’Description’>The jqxTree displays a hierarchical collection of items. You
can populate it from ‘UL’ or by using its ‘source’ property.</title>
<link rel=”stylesheet” href=”jqx.base.css” type=”text/css” />
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>
<script type=”text/javascript” src=”jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”demos.js”></script>
<script type=”text/javascript” src=”jqxcore.js”></script>
<script type=”text/javascript” src=”jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqxpanel.js”></script>
<script type=”text/javascript” src=”jqxtree.js”></script>
<script type=”text/javascript” src=”jqxcheckbox.js”></script>
<script type=”text/javascript” src=”jqxfileupload.js”></script>
<script type=”text/javascript” src=”jqxmenu.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
// Create jqxTree
$(‘#jqxTree’).jqxTree({ height: ‘450px’, width: ‘300px’});
// Create and initialize Buttons
$(‘#Add’).jqxButton({ height: ’25px’, width: ‘100px’});
$(‘#AddBefore’).jqxButton({ height: ’25px’, width: ‘100px’});
$(‘#AddAfter’).jqxButton({ height: ’25px’, width: ‘100px’});
$(‘#Update’).jqxButton({ height: ’25px’, width: ‘100px’});
$(‘#Remove’).jqxButton({ height: ’25px’, width: ‘100px’});
$(‘#Disable’).jqxButton({ height: ’25px’, width: ‘100px’});
$(‘#EnableAll’).jqxButton({ height: ’25px’, width: ‘100px’});
$(‘#Expand’).jqxButton({ height: ’25px’, width: ‘100px’});
$(‘#Collapse’).jqxButton({ height: ’25px’, width: ‘100px’});
$(‘#ExpandAll’).jqxButton({ height: ’25px’, width: ‘100px’});
$(‘#CollapseAll’).jqxButton({ height: ’25px’, width: ‘100px’});
$(‘#Next’).jqxButton({ height: ’25px’, width: ‘100px’});
$(‘#Previous’).jqxButton({ height: ’25px’, width: ‘100px’});

// Add
$(‘#Add’).click(function () {
var selectedItem = $(‘#jqxTree’).jqxTree(‘selectedItem’);
if (selectedItem != null) {
// adds an item with label: ‘item’ as a child of the selected item. The last parameter determines whether to refresh the Tree or not.
// If you want to use the ‘addTo’ method in a loop, set the last parameter to false and call the ‘render’ method after the loop.
$(‘#jqxTree’).jqxTree(‘addTo’, { label: ‘Item’ }, selectedItem.element, false);
// update the tree.
$(‘#jqxTree’).jqxTree(‘render’);
}
else {
$(‘#jqxTree’).jqxTree(‘addTo’, { label: ‘Item’ }, null, false);
// update the tree.
$(‘#jqxTree’).jqxTree(‘render’);
}
});
// Add Before
$(‘#AddBefore’).click(function () {
var selectedItem = $(‘#jqxTree’).jqxTree(‘selectedItem’);
if (selectedItem != null) {
$(‘#jqxTree’).jqxTree(‘addBefore’, { label: ‘Item’ }, selectedItem.element, false);
// update the tree.
$(‘#jqxTree’).jqxTree(‘render’);
}
});
// Update
$(‘#Update’).click(function () {
var selectedItem = $(‘#jqxTree’).jqxTree(‘selectedItem’);
if (selectedItem != null) {
var item_name = prompt(“Please enter the name of the folder”, “Name”);
alert(item_name);
$(‘#jqxTree’).jqxTree(‘updateItem’, { label: item_name }, selectedItem.element);
// update the tree.
$(‘#jqxTree’).jqxTree(‘render’);
}
});
// Add After
$(‘#AddAfter’).click(function () {
var selectedItem = $(‘#jqxTree’).jqxTree(‘selectedItem’);
if (selectedItem != null) {
$(‘#jqxTree’).jqxTree(‘addAfter’, { label: ‘Item’ }, selectedItem.element, false);
// update the tree.
$(‘#jqxTree’).jqxTree(‘render’);
}
});
// Remove
$(‘#Remove’).click(function () {
var selectedItem = $(‘#jqxTree’).jqxTree(‘selectedItem’);
if (selectedItem != null) {
// removes the selected item. The last parameter determines whether to refresh the Tree or not.
// If you want to use the ‘removeItem’ method in a loop, set the last parameter to false and call the ‘render’ method after the loop.
$(‘#jqxTree’).jqxTree(‘removeItem’, selectedItem.element, false);
// update the tree.
$(‘#jqxTree’).jqxTree(‘render’);
}
});
// Disable
$(‘#Disable’).click(function () {
var selectedItem = $(‘#jqxTree’).jqxTree(‘selectedItem’);
if (selectedItem != null) {
$(‘#jqxTree’).jqxTree(‘disableItem’, selectedItem.element);
}
});
// Expand
$(‘#Expand’).click(function () {
var selectedItem = $(‘#jqxTree’).jqxTree(‘selectedItem’);
if (selectedItem != null) {
$(‘#jqxTree’).jqxTree(‘expandItem’, selectedItem.element);
}
});
// Expand
$(‘#Collapse’).click(function () {
var selectedItem = $(‘#jqxTree’).jqxTree(‘selectedItem’);
if (selectedItem != null) {
$(‘#jqxTree’).jqxTree(‘collapseItem’, selectedItem.element);
}
});
// Expand All
$(‘#ExpandAll’).click(function () {
$(‘#jqxTree’).jqxTree(‘expandAll’);
});
// Collapse All
$(‘#CollapseAll’).click(function () {
$(‘#jqxTree’).jqxTree(‘collapseAll’);
});
// Enable All
$(‘#EnableAll’).click(function () {
$(‘#jqxTree’).jqxTree(‘enableAll’);
});
// Select Next Item
$(‘#Next’).click(function () {
var selectedItem = $(“#jqxTree”).jqxTree(‘selectedItem’);
var nextItem = $(“#jqxTree”).jqxTree(‘getNextItem’, selectedItem.element);
if (nextItem != null) {
$(“#jqxTree”).jqxTree(‘selectItem’, nextItem.element);
$(“#jqxTree”).jqxTree(‘ensureVisible’, nextItem.element);
}
});
// Select Previous Item
$(‘#Previous’).click(function () {
var selectedItem = $(“#jqxTree”).jqxTree(‘selectedItem’);
var prevItem = $(“#jqxTree”).jqxTree(‘getPrevItem’, selectedItem.element);
if (prevItem != null) {
$(“#jqxTree”).jqxTree(‘selectItem’, prevItem.element);
$(“#jqxTree”).jqxTree(‘ensureVisible’, prevItem.element);
}
});

//select upload button
$(‘#jqxFileUpload’).click(function () {
var selectedItem = $(“#jqxTree”).jqxTree(‘selectedItem’);
$(‘#jqxFileUpload’).jqxFileUpload({ width: 300, uploadUrl: ‘sample.php’, fileInputName: ‘selectedItem’ });
$(‘#jqxFileUpload’).jqxFileUpload(‘render’);
});

//jqx tree creation
$(‘#jqxTree’).jqxTree(‘selectItem’, $(“#jqxTree”).find(‘li:first’)[0]);
$(‘#jqxTree’).css(‘visibility’, ‘visible’);
var contextMenu = $(“#jqxMenu”).jqxMenu({ width: ‘120px’, height: ’56px’, autoOpenPopup: false, mode: ‘popup’ });

var attachContextMenu = function () {
// open the context menu when the user presses the mouse right button.
$(“#jqxTree li”).on(‘mousedown’, function (event) {
var target = $(event.target).parents(‘li:first’)[0];
var rightClick = isRightClick(event);
if (rightClick && target != null) {

var scrollTop = $(window).scrollTop();
var scrollLeft = $(window).scrollLeft();
contextMenu.jqxMenu(‘open’, parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);
return false;
}
});
}

attachContextMenu();
$(“#jqxMenu”).on(‘itemclick’, function (event) {
//var item = $.trim($(event.args).text()); //this is to add a new item–>
var item = “Add Item”;
switch (item) {
case “Add Item”:
var selectedItem = $(‘#jqxTree’).jqxTree(‘selectedItem’);
if (selectedItem != null) {
$(‘#jqxTree’).jqxTree(‘addTo’, { label: ‘Item’ }, selectedItem.element);
attachContextMenu();
}
break;
}
});
// disable the default browser’s context menu.
$(document).on(‘contextmenu’, function (e) {
if ($(e.target).parents(‘.jqx-tree’).length > 0) {
return false;
}
return true;
});
function isRightClick(event) {
var rightclick;
rightclick = (event.which == 3);
return rightclick;
}
});
</script>
<style>

</style>
</head>
<body class=’default’>

<div id=’jqxWidget’>
<div style=’float: left;’>
<div id=’jqxTree’ style=’visibility: hidden; float: left; margin-left: 20px;’>

<li id=’home’>Create Folder

</div>
<div style=’margin-left: 60px; float: left;’>
<div style=’margin-top: 10px;’>
<input type=”button” id=’Add’ value=”Add” />
</div>
<div style=’margin-top: 10px;’>
<input type=”button” id=’AddAfter’ value=”Add After” />
</div>
<div style=’margin-top: 10px;’>
<input type=”button” id=’AddBefore’ value=”Add Before” />
</div>
<div style=’margin-top: 10px;’>
<input type=”button” id=’Update’ value=”Rename” />
</div>
<div style=’margin-top: 10px;’>
<input type=”button” id=’Remove’ value=”Remove” />
</div>
<div style=’margin-top: 10px;’>
<input type=”button” id=’Disable’ value=”Disable” />
</div>
<div style=’margin-top: 10px;’>
<input type=”button” id=’Expand’ value=”Expand” />
</div>
<div style=’margin-top: 10px;’>
<input type=”button” id=’Collapse’ value=”Collapse” />
</div>
<div style=’margin-top: 10px;’>
<input type=”button” id=’ExpandAll’ value=”Expand All” />
</div>
<div style=’margin-top: 10px;’>
<input type=”button” id=’CollapseAll’ value=”Collapse All” />
</div>
<div style=’margin-top: 10px;’>
<input type=”button” id=’EnableAll’ value=”Enable All” />
</div>
<div style=’margin-top: 10px;’>
<input type=”button” id=’Next’ value=”Next Item” />
</div>
<div style=’margin-top: 10px;’>
<input type=”button” id=’Previous’ value=”Previous Item” />
</div>

<div style=’margin-top: 10px;’>
<input type=”button” id=’jqxFileUpload’ value=”File Upload” />
</div>

<div id=’jqxMenu’>

• Add Item

</div>
</div>
</div>
</div>
</body>
</html>
=====================================================================================================================================================
Thanks,
Chandana

[DimitarParticipant]

Hi Chandana,

You can try getting an array of all jqxTree items with the getItems method then save a stringified version of it in your database. When you open your page again, get the saved items from your database and construct a source for the jqxTree to be initialized.

Another possibility is to use a jqxTreeGrid with one column instead. You will then be able to make use of the data adapter’s addrow, deleterow and updaterow callback functions and create a CRUD application, as shown in the following tutorial: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/phpintegration/php-server-side-grid-crud.htm (it is for jqxGrid, but the approach is the same for jqxTreeGrid).

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[manichandanaParticipant]

Hi Dimitar,

Thanks for the response,but I just want to know how can I build the source from the tree as my jqxtree is a dynamic one , any suggestion in regards to this would be grateful.

Regards,
Chandana

[DimitarParticipant]

Hi Chandana,

Please refer to the following example: http://jsfiddle.net/Dimitar_jQWidgets/rqw6nwe8/. In your case, you can store a stringified version of duplicateTreeSource in your database and on page refresh load the new jqxTree from it. We hope this helps solve your issue.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[manichandanaParticipant]

Hi Dimitar,
Many thanks for the info.The problem has been solved now.

Regards,
Chandana

[manichandanaParticipant]

Hi Dimitar,

I just got a doubt about the compatibility of the JQXTree,when I am trying to launch my jqxtree application in IE8 its crashing,is there a way to make it work fine in IE8 and its former versions.Even when I tried to launch the demo application from JQWidgets official Site ,its crashing in the explorer.Could you please let me know whether the jqxtree is compatible with the recent versions of explorer especially IE8.

Thanks and Regards,
Chandana

[DimitarParticipant]

Hi Chandana,

Thank you for your feedback. We confirm that there is currently an issue with jqxTree in Internet Explorer 8 and 7. The widget works as expected in Internet Explorer 9, 10 and 11.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts