This is a migrated thread and some comments may be shown as answers.

How to Custom TreeList Built-in Command

5 Answers 324 Views
TreeList
This is a migrated thread and some comments may be shown as answers.
f
Top achievements
Rank 1
f asked on 22 Jul 2015, 08:19 PM

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: "(555) 924-9726", parentId: null },

...]}};

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

5 Answers, 1 is accepted

Sort by
0
Nikolay Rusev
Telerik team
answered on 24 Jul 2015, 12:40 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
f
Top achievements
Rank 1
answered on 24 Jul 2015, 01:58 PM

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?

0
Nikolay Rusev
Telerik team
answered on 28 Jul 2015, 07:03 AM

Hello,

 

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

 

Regards,
Nikolay Rusev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
f
Top achievements
Rank 1
answered on 28 Jul 2015, 11:16 PM

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,

0
Nikolay Rusev
Telerik team
answered on 30 Jul 2015, 10:41 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
TreeList
Asked by
f
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
f
Top achievements
Rank 1
Share this question
or