Kendo ui's treeView node Click Event modification and grid configuration summary, kendotreeview

Kendo ui's treeView node Click Event modification and grid configuration summary, kendotreeview

A select event can be triggered when the treeView node of kendo-ui is clicked. If you click the same node multiple times in a row, this event can be triggered only once.

But it needs to be implemented: this select event is triggered every time you click the same node.

This requirement is contrary to the select event of kendo.

At first, I tried to manually trigger the select event through external sources, but it 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 configurations //---})

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

In this way, an event is triggered every time a node is clicked.

But why not call the previously written onSelect method in onClick directly?

The reason is that when the select event is triggered to call the onSelect method, kendo will give us the e parameter for the custom method. e has many functions and he knows all the configurations of the currently clicked node, for example, if we want to obtain the id of the currently clicked node,

E. node. id.

However, when we do not use event time and use onClick of js to call the custom onSelect method, kendo will not give us the e parameter, and kendo does not know what we have done.

So I need another custom method for clicking, and the parameter I give this method is this. What does this mean here?

It is the span element of the Node currently clicked. You can use the dataItem method of kendo to obtain the current Node.

We pass the current Node to the custom onSelect method, which can naturally Replace the e parameter, because the current 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);}

 

 

Note the following when using the grid of the kendo ui:

When we use the Edit function (the inline I use should be the same for others and need to be verified)

The core function of our kendo dataSource must specify a unique ID field.

Schema: {model: {id: "ProductID", // here is the focus of 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 position has been identified in the Code. The configuration of this unique field name must be id! No matter what the name is in json, it must be id.

Otherwise, many problems may occur during editing. You can try it.