A summary of the Kendo UI's TreeView node Click event Modification and grid configuration

A select event can be triggered by the Kendo-ui TreeView Node (node), and it can be triggered and triggered only once by clicking on the same node multiple times in succession.

However, the requirements need to be implemented: each time you click on the same node, the Select event is triggered.

This requirement is contrary to Kendo's select event.

Initially wanted to manually trigger select events externally, but the discovery was not possible.

Later, the following configuration was made:

$ ("#treeview"). Kendotreeview ({            dataSource: [                treedata            ],            spritecssclass: "RootFolder",           // Select:onselect,    //Comment Select event              Template: "<span onclick= ' Ontreeviewnodeclick (this); ' >#= Item.text # </span> ",            //---            //other configuration            //---})

The main configuration for implementing this requirement is template. Use the template to wrap up each node with span and give an onclick ()

This causes an event to be triggered every time a node is clicked.

But why not just invoke the Onselect method that was previously written in the onclick?

The reason is that when the Onselect method is invoked when the Select event is triggered, Kendo will give us a custom method E, which has many functions, and he knows the current node-click Configuration, for example, we want to get the ID of the current click node,

So that's e.node.id.

However, when we do not use the event time, and choose to use the onclick of JS to invoke the custom Onselect method, Kendo will not give us the e parameter, kendo do not know what we did.

So I need another click on the custom method, and I give this method the parameter is this. What does this refer to here?

is the span element of the node that we are currently clicking on, and using the DataItem method of kendo, we can get the present node.

It's natural for us to pass the current node to the custom Onselect method instead of the e parameter, because now node knows everything.

function Ontreeviewnodeclick (e) {    var tree=  $ ("#treeview"). Data ("Kendotreeview");    var node=tree.dataitem (e);                               Get current node   and  give OnSelect as Param      onSelect (node,tree);}

The last thing to say is that a grid using the Kendo UI needs attention:

When we use the editing function (I use the inline, the other should also be the same, pending verification)

The core function of our kendo datasource be sure to specify a unique identification field

Schema: {                                model: {                                    ID: "ProductID",   //Here is the key fields                                    : {                                        ProductID: {editable:false, nullable:true}  ,                                        ProductName: {validation: {required:true}},                                        UnitPrice: {type: ' number ', validation: {required:true, min: 1}},                                        discontinued: {type: "Boolean"},                                        UnitsInStock: {type: "number", validation: {min:0, required:true}}                                    }                                }                            }

　　

The key location is already identified in the code, and the configuration of this unique field name must be id! No matter what the name is in our JSON, it must be an ID.

Otherwise editing, there will be a lot of problems, you can try.

A summary of the Kendo UI's TreeView node Click event Modification and grid configuration