jQWidgets Forums

Tagged: jqxtree, model is incorrect after deleting node.

This topic contains 14 replies, has 3 voices, and was last updated by Jazz 11 years, 11 months ago.

Viewing 15 posts - 1 through 15 (of 15 total)

Author

jqxtree, model is incorrect after deleting node. Posts

June 20, 2013 at 9:06 am jqxtree, model is incorrect after deleting node. #23482

Sacrifice

Member

Hi jqwidget team.

I found some problem after deleting node on jqxtree.

please take a look in my simple code. there are 5 nodes showing on jqxtree. where I add new node by click buttom “Get all Items” , model is added correctly but when I remove some node. model is not deleted as It should be. It seems like I have to add new node if I want to refresh model.

please help me.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../../scripts/knockout-2.2.1.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var Menu = function (id, name, items) {
                this.value = id;
                this.label = name;
                this.items = ko.observableArray(items);
                this.dataroot = ko.observable("");
            }
            var viewModel = {
                people: [
                    new Menu(1, "Account"),
                    new Menu(2, "Agent"),
                    new Menu(3, "Customer"),
                    new Menu(4, "Claim"),
                    new Menu(5, "Report")
                ],
                id: ko.observable(""),
                value: ko.observable(""),
                label: ko.observable(""),
                parentId: ko.observable(""),
                level: ko.observable(""),
                additem: ko.observable("")
            };
            $('#jqxTree').on('select', function (event) {
                var args = event.args;
                var item = $('#jqxTree').jqxTree('getItem', args.element);
                if (item) {
                    viewModel.id(item.id);
                    viewModel.value(item.value);
                    viewModel.label(item.label);
                    viewModel.parentId(item.parentId);
                    viewModel.level(item.level);
                }
            });
            $("#jqxTree").on('dragStart', function (event) {
                $("#Event").text("Drag Start: " + event.args.label);
            });
            $("#jqxTree").on('dragEnd', function (event) {
                $("#Event").text("Drag End");
            });
            // Create and initialize Buttons
            $('#Add, #Remove, #Get').jqxButton({ height: '25px', width: '100px' });
            // Add 
            $('#Add').click(function () {
                var selectedItem = $('#jqxTree').jqxTree('selectedItem');
                if (selectedItem != null)
                    $('#jqxTree').jqxTree('addTo', { label: viewModel.additem() }, selectedItem.element, false);
                else
                    $('#jqxTree').jqxTree('addTo', { label: viewModel.additem() }, null, false);
                $('#jqxTree').jqxTree('render');
            });
            // Remove 
            $('#Remove').click(function () {
                var selectedItem = $('#jqxTree').jqxTree('selectedItem');
                if (selectedItem != null) {
                    $('#jqxTree').jqxTree('removeItem', selectedItem.element, false);
                    $("#jqxTree").jqxTree('selectItem', null);
                    $('#jqxTree').jqxTree('render');
                }
                $('#jqxTree').jqxTree('refresh');
            });
            // Get all Items
            $('#Get').click(function () {
                var items = $('#jqxTree').jqxTree('getItems');
                if (items != null) {
                    $("#Event").text("Menu Data: " + items);
                    alert(items.length);
                    //alert(items[2].label);
                }
            });
            ko.applyBindings(viewModel);
        });
    </script>
</head>
<body>
    <div style='float: left; margin-left: 20px; border: none;' data-bind="jqxTree: { allowDrag: true, allowDrop: true, source: people, height: '540px', width: '350px'}" id="jqxTree"></div>
    <div style='margin-left: 60px; float: left;'>
        <div style='margin-top: 10px;'>
            ID:
            <input type="text" data-bind="value: id" />
        </div>
        <div style='margin-top: 10px;'>
            ParentID:
            <input type="text" data-bind="value: parentId" />
        </div>
        <div style='margin-top: 10px;'>
            ServerID:
            <input type="text" data-bind="value: value" />
        </div>
        <div style='margin-top: 10px;'>
            Label:
            <input type="text" data-bind="value: label" />
        </div>
        <div style='margin-top: 10px;'>
            Level:
            <input type="text" data-bind="value: level" />
        </div>
        <div style='margin-top: 10px;'>
            <input type="button" id='Add' value="Add" />
            <input type="text" data-bind="value: additem" />
        </div>
        <div style='margin-top: 10px;'>
            <input type="button" id='Remove' value="Remove" />
        </div>
        <div style='margin-top: 10px;'>
            <input type="button" id='Get' value="Get all Items" />
        </div>
    </div>
    <div id="Event"></div>
</body>
</html>

June 20, 2013 at 9:09 am jqxtree, model is incorrect after deleting node. #23484

Peter Stoev

Keymaster

Hi,

I do not see a code for deleting an item from the model.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

June 20, 2013 at 10:11 am jqxtree, model is incorrect after deleting node. #23488

Sacrifice

Member

Hi,

Im Sorry, I wrote wrong.

“Add” is for adding an item. input some text into the next textbox.
“Remove” is for removing an item which is selected.
“Get all Items” for alert model.legth and display all model on the right side.

please add an item. then click button “Get all Items” you will see item.length is correct.
but if you click “Remove” and then click “Get all Items” again. you will see item.length is incorrect untill you add new item again

The problem is after delete an item. Your function $(‘#jqxTree’).jqxTree(‘getItems’); does not get total item correctly.

June 20, 2013 at 10:16 am jqxtree, model is incorrect after deleting node. #23489

Peter Stoev

Keymaster

Hi,

Why don’t you use viewModel.people().length?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

June 20, 2013 at 11:23 am jqxtree, model is incorrect after deleting node. #23496

Sacrifice

Member

Hi,

Thank you for keep talking with me.

Im just realized that items on jqxtree is not related to my model. it is just loaded on the first time.

I know when I use command $(‘#jqxTree’).jqxTree(‘addTo’, { label: “Select” }, selectedItem.element, false);
or $(‘#jqxTree’).jqxTree(‘removeItem’, selectedItem.element, false); my model is not changed following by jqxtree item.

so, I have no choice except using $(‘#jqxTree’).jqxTree(‘getItems’); to refresh jqxtree item correctly.

please help me to fine a way out.

here is my new example.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
			var data = [
                {
                    "id": "5",
                    "parentid": "1",
                    "text": "White Hot Chocolate",
                    "value": "$2.3"
                }, {
                    "text": "Chocolate Beverage",
                    "id": "1",
                    "parentid": "-1",
                    "value": "$2.3"
                }, {
                    "id": "6",
                    "text": "Espresso Beverage",
                    "parentid": "-1",
                    "value": "$2.3"
                }, {
                    "id": "11",
                    "text": "Pumpkin Spice Latte",
                    "parentid": "6",
                    "value": "$2.3"
                    }, {
                    "id": "12",
                    "text": "Frappuccino",
                    "parentid": "-1"
                }, {
                    "id": "13",
                    "text": "Caffe Vanilla Frappuccino",
                    "parentid": "12",
                    "value": "$2.3"
                    }, {
                    "id": "15",
                    "text": "450 calories",
                    "parentid": "13",
                    "value": "$2.3"
                }, {
                    "id": "16",
                    "text": "16g fat",
                    "parentid": "13",
                    "value": "$2.3"
                    }, {
                    "id": "17",
                    "text": "13g protein",
                    "parentid": "13",
                    "value": "$2.3"
                }, {
                    "id": "14",
                    "text": "Caffe Vanilla Frappuccino Light",
                    "parentid": "12",
                    "value": "$2.3"
                    }]
                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'id' },
                        { name: 'parentid' },
                        { name: 'text' },
                        { name: 'value' }
                    ],
                    id: 'id',
                    localdata: data
                };
				
				var dataAdapter = new $.jqx.dataAdapter(source);
                dataAdapter.dataBind();
                var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);
				
                $('#jqxTree').jqxTree({ allowDrag: true, allowDrop: true, source: records, height: '540px', width: '350px' });
			
            $('#jqxTree').on('select', function (event) {
                var args = event.args;
                var item = $('#jqxTree').jqxTree('getItem', args.element);
                if (item) {
					$("#id").val(item.id);
					$("#value").val(item.value);
					$("#label").val(item.label);
					$("#parentId").val(item.parentId);
					$("#level").val(item.level);
                }
            });
            $("#jqxTree").on('dragStart', function (event) {
                $("#Event").text("Drag Start: " + event.args.label);
            });
            $("#jqxTree").on('dragEnd', function (event) {
                $("#Event").text("Drag End");
            });
            // Create and initialize Buttons
            $('#Add, #Get').jqxButton({ height: '25px', width: '180px' });
			$('#Remove').jqxButton({ height: '30px', width: '300px' });
            // Add 
            $('#Add').click(function () {
                var selectedItem = $('#jqxTree').jqxTree('selectedItem');
                if (selectedItem != null)
                    $('#jqxTree').jqxTree('addTo', { label: "Select" }, selectedItem.element, false);
                else
                    $('#jqxTree').jqxTree('addTo', { label: "Unselect" }, null, false);
                $('#jqxTree').jqxTree('render');
            });
            // Remove 
            $('#Remove').click(function () {
                var selectedItem = $('#jqxTree').jqxTree('selectedItem');
                if (selectedItem != null) {
                    $('#jqxTree').jqxTree('removeItem', selectedItem.element, false);
                    $("#jqxTree").jqxTree('selectItem', null);
                    $('#jqxTree').jqxTree('render');
                }
            });
            // Get all Items
            $('#Get').click(function () {
                var items = $('#jqxTree').jqxTree('getItems');
                if (items != null) {
                    $("#Event").text(items);
                    alert('MyData:' + data.length + ', jqxTreeitem:' + items.length);
                }
            });
			
			$('#jqxTree').jqxTree('expandAll');
        });
    </script>
</head>
<body>
    <div style='float: left; margin-left: 20px; border: none;' id="jqxTree"></div>
    <div style='margin-left: 60px; float: left;'>
        <div style='margin-top: 10px;'>
            ID:
            <input type="text" id="id" />
        </div>
        <div style='margin-top: 10px;'>
            ParentID:
            <input type="text" id="parentId" />
        </div>
        <div style='margin-top: 10px;'>
            Value:
            <input type="text" id="value" />
        </div>
        <div style='margin-top: 10px;'>
            Label:
            <input type="text" id="label" />
        </div>
        <div style='margin-top: 10px;'>
            Level:
            <input type="text" id="level" />
        </div>
        <div style='margin-top: 10px;'>
            <input type="button" id='Add' value="Add Item to jqxTree" />
        </div>
        <div style='margin-top: 10px;'>
            <input type="button" id='Remove' value="REMOVE SELECTED ITEM!!" />
        </div>
        <div style='margin-top: 10px;'>
            <input type="button" id='Get' value="Get all DATA in jqxTree" />
        </div>
    </div>
    <div id="Event"></div>
</body>
</html>

June 26, 2013 at 3:55 am jqxtree, model is incorrect after deleting node. #23853

Sacrifice

Member

Hi Peter Stove

Im still looking forward to getting answer from you. Im quite sure. This is a bug.

I have tested by using on jqwidget 2.9. the result is still same, getting incorrect items.

Please give me your advice.

Thank you.

June 26, 2013 at 4:33 am jqxtree, model is incorrect after deleting node. #23855

Peter Stoev

Keymaster

Hi,

1. The following sample shows how to use jqxTree with KO: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxknockout/tree.htm?web.

2. The jqxTree’s addTo, removeItem, etc. methods will not update your KO model as these are not exposed as observables.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

June 26, 2013 at 5:12 am jqxtree, model is incorrect after deleting node. #23859

Sacrifice

Member

Please use my secord simple code above for your test.

There is no ko model on this code. There is just only jqx command on it.

I use jqx command

$(‘#jqxTree’).jqxTree(‘addTo’, { label: “Select” }, selectedItem.element, false); to add item into jqxtree

and command

$(‘#jqxTree’).jqxTree(‘removeItem’, selectedItem.element, false); to remove item out.

after adding item. the command $(‘#jqxTree’).jqxTree(‘getItems’); works well. it gets items correctly.

but

after remove item. the command $(‘#jqxTree’).jqxTree(‘getItems’); works wrong. it gets incorrect items like not refreshed. please see the item total amount, that included a deleted items.

If I got correct items by $(‘#jqxTree’).jqxTree(‘getItems’) after adding item, it should be correct after removing item as well.

Anyway, thank you very much for your response.

June 26, 2013 at 7:45 am jqxtree, model is incorrect after deleting node. #23867

Peter Stoev

Keymaster

Hi,

“addTo” and “removeItem” will not synchronize the Tree Items with your KO Model.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

June 26, 2013 at 12:16 pm jqxtree, model is incorrect after deleting node. #23896

Sacrifice

Member

You don’t understand my point. I said, there is no ko model in my code. and I have already known that it doesnt synchronize with ko model.

Tree Items is wrong. It is not the ko model.

please take a look at code below. I have to fix it by myself. It should be correct since I get items by using your function $(‘#jqxTree’).jqxTree(‘getItems’);

                    var deletelist = new Array();
                    deletelist[0] = selectedItem.id;
                    var level_p = 0;
                    var check_p = false;
                    for (var i = 0; i < items.length; i++) {
                        if (check_p == false) {
                            if (selectedItem.id == items[i].id) {
                                check_p = true;
                                level_p = items[i].level;
                            }
                        } else {
                            if (items[i].level == level_p) {
                                break;
                            }
                            deletelist[deletelist.length] = items[i].id;
                        }
                    }
                    var itempp = $('#jqxTree').jqxTree('getItems');
                    for (var i = 0; i < deletelist.length; i++) {
                        var indexp = itempp.indexOf(deletelist[i]);
                        itempp.remove(indexp);
                    }

June 27, 2013 at 6:32 am jqxtree, model is incorrect after deleting node. #23965

Peter Stoev

Keymaster

Hi,

Correct me if I understand it wrong. The issue is that “getItems” returns wrong results after removing items?

Looking forward to your reply.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

July 4, 2013 at 4:08 am jqxtree, model is incorrect after deleting node. #24444

Sacrifice

Member

Hi,

The issue is that “getItems” returns wrong results after removing items?

Yes it is, thank you’re already get it this issue just like this topic

http://www.jqwidgets.com/community/topic/removing-items-from-jqxtree/#post-10274

Thank you.

July 8, 2013 at 6:06 am jqxtree, model is incorrect after deleting node. #24674

Jazz

Participant

I can confirm this as well as I just hit this exact same problem.

I have a tree list that gets updated with new items and has items removed. I also have a ‘counter’ that displays the number of items in the tree. (we’re processing inbound document queues).

I get the number of items like so:

var itemCount = $('#doclist').jqxTree('getItems').length;

After removing an item from the tree and executing the above line of code again, the value does not change. Further investigation shows that the array of items returned by getItems() still contains the items that I removed with removeItem() even though the items are removed from the list correctly.

Jamie

July 8, 2013 at 6:08 am jqxtree, model is incorrect after deleting node. #24676

Peter Stoev

Keymaster

Hi,

There is no such issue in the current version(jQWidgets 2.9.2). All items are removed correctly and getItems method returns correct results.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

July 8, 2013 at 6:43 am jqxtree, model is incorrect after deleting node. #24682

Jazz

Participant

Ah ha! Didn’t realise I was still on 2.8.3 on this system.