Template for command button

7 posts, 1 answers
  1. Sergey
    Sergey avatar
    3 posts
    Member since:
    Sep 2015

    Posted 23 Sep 2015 Link to this post

    I want to ask the question about template for command button in TreeList. It seems it it ignored in case of TreeList, although it work fine in Grid (see attached picture).

    columns: [
        { field: "groupName", title: "Group", width: 100 },
        { field: "vesselName", title: "Vessel", width: 100 },
        {
            command: [
                { name: "destroy", text: " ", template: "<a class='k-button k-grid-delete'><span class='glyphicon glyphicon-remove'></span></a>" }
            ],
            title: "Action",
            width: "15px"
        }
    ],

    What I want to achieve by that template is just use another icon from bootstrap styles. Currently to achieve this (as workaround) I have to manipulate with DOM via jQuery, what of course not nice. 
    Does it not supported by design, or there is mistake in my code?

  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 25 Sep 2015 Link to this post

    Hello Sergey,

    The TreeList uses a different markup for the destroy command -  here is an example.

    Regards,
    Alexander Popov
    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. Sergey
    Sergey avatar
    3 posts
    Member since:
    Sep 2015

    Posted 25 Sep 2015 in reply to Alexander Popov Link to this post

    Hello Alexander

     Thanks for answer. But it seems even in your example template attribute is ignored. As there is no word "Delete" in final result, in right panel.

    <button data-command="destroy" class="k-button k-button-icontext k-grid-delete"><span class="k-icon k-delete"></span>Delete</button>

    I also tried to play with it and change template attribute to arbitrary text - and still no effect (of course I pressed Run button after each change). See attached screenshots.
    Either I'm doing smth wrong or template attribute is just ignored during rendering TreeList. 

  5. Answer
    Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 25 Sep 2015 Link to this post

    Hello Sergey,

    I apologize for misleading you. The template should be used as column template, as shown in this updated example.

    Regards,
    Alexander Popov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Sergey
    Sergey avatar
    3 posts
    Member since:
    Sep 2015

    Posted 25 Sep 2015 in reply to Alexander Popov Link to this post

    Now it works.

    Thanks a lot!

  7. Abhijeet
    Abhijeet  avatar
    1 posts
    Member since:
    Oct 2014

    Posted 03 Aug Link to this post

    Hello Alexander,

    Your answer is diffidently helping in case of destroy button, But in my case i am trying to do inline edit for TreeList Control using custom template, like below button

    <button data-command="edit" class="k-button k-button-icontext k-grid-edit"></span> edit</button>

    This button is not showing update & Cancel after clicking on Edit Can you help me.

     

    Thanks,

    Abhijeet

  8. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 05 Aug Link to this post

    Hi Abhijeet,

    I am afraid this replacing the custom Edit button with Update/Cancel buttons is not supported. In case you are trying to apply some different styling I would recommend using CSS instead.

    Regards,
    Alexander Popov
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready