Treegrid how to check/uncheck parent node from children nodes

Question

This is a follow-up from the this post. I understand how the parent nodes can select all children nodes. I have a TreeGrid with at least 3 levels of nodes and each of the level 2 nodes have multiple leaf nodes. I can click on the level 2 node to select all the leaf nodes under it, but if I uncheck all the leaf nodes, I want to update the ancestry of the node. So I am looking for a way to not only bubble the events to the children, but also the parents of the checked/unchecked node. Also it would be nice to show the checkbox of the level 2 node grayed out signifying that not all the leafs under the node are selected.

score 0 · Answer 1 · answered Mar 28 '17 at 15:40

After some digging, I found a way to make this work using both the code from the original post and some of my own code. This will keep both the children of the node and the parents of the node in sync when clicking on a checkbox in the jqgrid Tree grid.

   beforeSelectRow: function (rowid, e) { 
            var $this = $(this),
                isLeafName = $this.jqGrid("getGridParam", "treeReader").leaf_field,
                localIdName = $this.jqGrid("getGridParam", "localReader").id,
                localData,
                state,
                parentState,
                parentChildren,
                setChechedStateOfChildrenItems = function (children) {
                    $.each(children, function () {
                        $("#" + this[localIdName] + " input.itmchk").prop("checked", state);
                        updateSelectedNode(row_id, this[localIdName], state);
                        if (!this[isLeafName]) {
                            setChechedStateOfChildrenItems($this.jqGrid("getNodeChildren", this));
                        }
                    });
                },
                setCheckedStateofParentItems = function (parent) {
                    parentChildren = $this.jqGrid("getNodeChildren", parent);
                    var selectedChildren = 0;
                    $.each(parentChildren, function () {
                        if ($("#" + this.id + " input.itmchk").prop("checked")) {
                            selectedChildren += 1;
                        }
                    });
                    if (selectedChildren == 0) {
                        parentState = false;
                    } else {
                        parentState = true;
                    }
                    updateSelectedNode(row_id, parent.id, parentState);
                    $("#" + parent.id + " input.itmchk").prop("checked", parentState);

                    if (parent.parent != null) {
                        setCheckedStateofParentItems($this.jqGrid("getLocalRow", parent.parent), state)
                    }
                }

            if (e.target.nodeName === "INPUT" && $(e.target).hasClass("itmchk")) {
                state = $(e.target).prop("checked");
                localData = $this.jqGrid("getLocalRow", rowid);
                setChechedStateOfChildrenItems($this.jqGrid("getNodeChildren", localData), state);
                setCheckedStateofParentItems($this.jqGrid("getLocalRow", localData.parent), state)
                updateSelectedNode(row_id, localData.id, state); //this does the checkbox we checked
            }
        },

The cell formatter part:

{
        name: 'name', width: 25, index: 'name', label: "ColumnName", labelAlign: "left",
        formatter: function (cellvalue, options, rowObject) {
            var result = "<input type='checkbox' class='itmchk' checked> &nbsp;" + $.jgrid.htmlEncode(cellvalue);
            if (rowObject.selected == false) {
                result = result.replace("checked", "");
            }
            return result;
        }
    }

Treegrid how to check/uncheck parent node from children nodes

1 Answers1