Display only icons

[Dan]

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

[Mihaela]

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