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

Display only icons

1 Answer 27 Views
TreeList
This is a migrated thread and some comments may be shown as answers.
Dan
Top achievements
Rank 1
Iron
Veteran
Dan asked on 25 Mar 2021, 09:14 AM

Is there a way to have only icons in the commands of the tree list like there is for Grid?

I manage to do this for Edit, Delete and CreateChild. But I can not do this for Update and Cancel buttons

1 Answer, 1 is accepted

Sort by
0
Mihaela
Telerik team
answered on 30 Mar 2021, 08:10 AM

Hello Dan,

In order to display the command buttons "Update" and "Cancel" with icons only, you could follow the steps below:

  1. Handle the "Edit" event for the Kendo UI TreeList widget:
    @(Html.Kendo().TreeList<Model>()
    ...
    .Events(events =>
      events.Edit("on_edit")
    )
    ...
    )
  2. Get a reference of each button via jQuery:

<script>
        function on_edit(e) {
            var updateBtn = $('.k-button.k-button-icontext.k-grid-update');
            var cancelBtn = $('.k-button.k-button-icontext.k-grid-cancel');
        }
 </script>

     3. Remove the text on the buttons with the jQuery method text() and change/update the icons:

<script>
        function on_edit(e) {
            var updateBtn = $('.k-button.k-button-icontext.k-grid-update');
            var cancelBtn = $('.k-button.k-button-icontext.k-grid-cancel');

            updateBtn.text("");
            updateBtn.kendoButton({
                icon: "edit"
            });
            cancelBtn.text("");
            cancelBtn.kendoButton({
                icon: "cancel"
            });
        }
</script>

In the example above are used the built-in Kendo UI background icons, but you could add them as images or insert custom icons with CSS.

Feel free to let me know if you have any other questions.

 

Regards, Mihaela Lukanova Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
TreeList
Asked by
Dan
Top achievements
Rank 1
Iron
Veteran
Answers by
Mihaela
Telerik team
Share this question
or