How to Custom TreeList Built-in Command

[f]

I am trying TreeList with AngularJS by following the "editing" demo. The built-in command buttons are good, but I need to modify them a little on my program.

For example, I need to add a "confirm" dialog when user clicks the "destroy" button. How do I do it?

As a test, I hard code data into controller, such as

$scope.treelistOptions = {
dataSource: {
data: [
{ id: 1, Name: "Daryl Sweeney", Position: "CEO", Phone: "[phone]", parentId: null },

...]}};

How do I insert a node into ​the above local data when I click the "createChild" button?

[Nikolay Rusev]

Hello,

 

You can handle remove event and show confirm dialog and if the action is cancelled prevent further execution.

 

Example - http://dojo.telerik.com/@rusev/eHAvu

 

 remove: function(e) {
        if (!confirm("Are you sure?")) {
          e.preventDefault();
        }                
}

 

 

Regards,
Nikolay Rusev
Telerik

 

 

[f]

Thank you! It helps, but how do I reference the current removing item? I tried like the following:

remove: function(e, dataItem) {
        if (!confirm("Are you sure to remove "+dataItem.Name+"?")) {
          e.preventDefault();
        }

It does not work, even no "confirm" popup. How do I use "dataItem" correctly?

[Nikolay Rusev]

Hello,

 

e.model holds reference to the data item as stated in the documentation.

 

Regards,
Nikolay Rusev
Telerik

 

 

[f]

Thank you ! it works.

I have a new issue, but couldn't post it. When I click the "new thread" button, it links me to a "purchase" page. I bought Kendo UI professional already. So I have to post it here.

I like the template on "TreeList / Basic usage" demo, but I also want to add "edit" function on it. I tried copying the code from "TreeList / Editing" demo to add a column with buttons:

{ title: "Edit", command: [ "edit", "destroy" ], width: 250, attributes: { style: "text-align: center;"}}

Now, it can be edited, but cannot be saved. There is no action if I click "Update" button.

Is it a bug, or did I miss something?

Thanks,

[Nikolay Rusev]

Hello,

 

We are not sure how your code looks. In order to implement editing i.e CRUD operations you need  to define update, create, destroy methods of the DataSource transport. Those will be called when the user click save, delete of the row, just as in the TreeList editing example.

 

 

Regards,
Nikolay Rusev
Telerik