KendoUI Grid Toolbar button with icon only


In my post about KendoUI Grid and locally edited JSON, I presented a way of displaying a button in the toolbar without text by playing with the styles and using one jQuery command for finding which buttons.
This method requires:

  1. In the definition of the button set test to an empty string (“”).
  2. Add a class mark-up to imageClass for selecting wich buttons should not have text.
  3. Remove extra padding with a jQuery command after the initialization of the Grid.

Even that I get what I want, the fact of having the text set to an empty string and the extra jQuery instruction might be considered some sort of ugly solution.
Here I introduce a way of getting the same using templates.

Use template in KendoUI Grid buttons for displaying icon and no text

Define a CSS style that fixes the extra padding in the original style definition of the buttons.

.ob-icon-only {
    padding-right: 2px;
}

Define the button in the toolbar as:

{
    name:"foobar",
    text:"Foo Bar",
    imageClass:"k-icon k-i-custom",
    template:$("#toolbar-icon-only").html()
}

and add in the HTML of your page:

<script type="text/x-kendo-template" id="toolbar-icon-only">
    <a class="k-button k-button-icontext ob-icon-only k-grid-#= name #" href="\#">
        <span class="#= imageClass #"></span>
    </a>
</script>

Magically the template is applied to the button and it does not contain the text defined in the button of the toolbar. NOTE: In opposition to the alternative method, defining text does not affect the final result.

Conclusion, this is an alternative way of getting the same result and I’m not sure if this is better, cleaner, faster… choose whichever you prefer.

Advertisements

11 thoughts on “KendoUI Grid Toolbar button with icon only

  1. Hi onabai,

    I am new to kendogrid and your posts are really really useful to me. I have a question regarding toolbar. I need to add custom find button on toolbar (thanks to you now I know how to add button on toolbar) and when I click on find button a popup window should open. I know how to do a popup window for edit button inside the grid but I am not sure how to do for find button which is on toolbar. Can you please guide me about this. Is there any onclick option in toolboor so that when we click button ,control will be directed to a function? Thank you very much in advance

    • I’m not sure if I correctly understood your question.
      Is it on how to define a “custom” button (one that is not edit, delete,…) or is if there is a standard find button?
      To the latter just to say that no, there is not such button, you have to define your own meaning that you have to define you own button with the text/icon that you want for displaying in the toolbar and then bind it to your own code that as far as I understand should create a popup windows, display a form for defining the search condition and finally ask the datasource to search those records.

  2. Thank you for your reply. To be clear I wanted to create my own find button with it own functionality. I will try to do what you have suggested.

    • Not sure if I understand the question. If you, in the toolbar, define something like { name:”foobar”, text:”Foo Bar” } then it displays only the text (i.e. Foo Bar). This works for no-predefined buttons.

      • http://prntscr.com/46cwkv

        For the built in buttons

        remove the icon for save and cancel

        toolbar: [
        {
        name: “save”,
        text: ” Save Changes”,
        imgClass: ” ”
        },{
        name: “cancel”,
        text: ” Cancel Changes”,
        imgClass: ” ”
        },{
        template: $(“#spacer”).html()
        },{
        name: “survey”,
        text: ” Send Survey Email”,
        },{
        name: “survey”,
        text: ” Send Manager Email”,
        },{
        template: $(“#spacer”).html()
        },{
        name: “decision”,
        text: ” Decision Selected as:”,
        },{
        template: $(“#tools”).html()
        }
        ],

      • Hello David,

        You could achieve this by setting the iconClass property (which is currently not documented) of the commands to an empty string (or some other class different than the default one). Here is a runnable example, which demonstrates the approach.

        http://dojo.telerik.com/AWuy

        I wish you a great day!

        Regards,
        Dimiter Madjarov
        Telerik

  3. I also wrote a some php code to compile less into css to do dynamic themeing in kendo using a modified bootstrap template

    http://davidobrien.me

    use the colorpicker in the upper right

    I’ll start my own blog and dump all the stuff i’ve learned and all my tricks i’ve invented over the last two years 🙂

  4. Awesome,thanks for the post, just what i needed to add a custom button to the toolbar without having to create a template for the entire toolbar, while still using the default add, create, and destroy buttons, and hook my custom button up to Angular with ng-clilck.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s