TreeGrid, how to check / uncheck all child sublevels if the labels are parent

Question

I built a treeGrid with a built-in flag in the "name" column, for example JSON data:

{"id":"1","name":"<input type='checkbox' class='itmchk' ><strong>ECHANGEUR<\/strong>","level":"0","parent":"null","isLeaf":false,"expanded":true,"loaded":true} 

because these flags follow the fields of the tree (I hope I understand well, because I'm French).

I want to check / uncheck the boxes at the sublevel level when I check / uncheck one line, but after reading the messages, I can get the expected result.

Explanation, for example: If I click on the checkbox of the parent row (so that it becomes UNCHECKED), the sublevel rows will become UNCHECKED

I am new to jqGrid, but it is a great tool that I want to learn. Please can you guide me this way? Or can you suggest where I can find examples that I want to do? I searched for documentation, but to no avail.

Thanks so much in advance JiheL

Answer 1

First of all, I recommend not placing HTML snippets inside JSON data. You can use custom formatter to enable checkboxes inside grid cells:

 formatter: function (cellvalue) { return "<input type='checkbox' class='itmchk' ><strong>" + $.jgrid.htmlEncode(cellvalue) + "</strong>"; } 

To control the check / beforeSelectRow you can use the beforeSelectRow grid beforeSelectRow . jqGrid binds an internal click event to the body of the grid. Therefore, an event handler does not exist directly on the event bubble element. This allows you to catch the check / uncheck of any flags inside a single beforeSelectRow . Inside beforeSelectRow you should first check to see if it was a click on the checkbox that you want to control.

The beforeSelectRow has two parameters: rowid and an event object . The target property of the event object will be the DOM element that was clicked by the user. Since you add your own itmchk class to each of these flags, this will be enough to test the class on a click element.

The next problem is that many jqGrid methods that work with TreeGrid, such as getNodeChildren , have record as an input parameter, but instead you only have rowid . jqGrid saves loaded grid elements locally. Thus, the easiest way to get a record from rowid is to use the getLocalRow method.

As a result, the beforeSelectRow callback code may be as follows:

 beforeSelectRow: function (rowid, e) { var $this = $(this), isLeafName = $this.jqGrid("getGridParam", "treeReader").leaf_field, localIdName = $this.jqGrid("getGridParam", "localReader").id, localData, state, setChechedStateOfChildrenItems = function (children) { $.each(children, function () { $("#" + this[localIdName] + " input.itmchk").prop("checked", state); if (!this[isLeafName]) { setChechedStateOfChildrenItems($this.jqGrid("getNodeChildren", this)); } }); }; 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); } } 

It is important to note that child flags will only be checked / unchecked from previously loaded items. Since you load the grid data immediately and use the loaded: true property, this is not a problem for you.

The corresponding demo shows that the code above really works. This is a demo change that I created while answering your previous question.