How to Custom TreeList Built-in Command

6 posts, 0 answers
  1. f
    f avatar
    14 posts
    Member since:
    Jan 2008

    Posted 22 Jul 2015 Link to this post

    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?

  2. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 24 Jul 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. f
    f avatar
    14 posts
    Member since:
    Jan 2008

    Posted 24 Jul 2015 Link to this post

    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?

  5. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 28 Jul 2015 Link to this post

    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!
     
  6. f
    f avatar
    14 posts
    Member since:
    Jan 2008

    Posted 28 Jul 2015 in reply to Nikolay Rusev Link to this post

    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,

  7. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 30 Jul 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready