KendoUI Grid Toolbar


Continuing with the tutorial about KendoUI Grid with locally edited JSON data (see here for the first part), I will show you how to customize the toolbar for showing only icon (without text). This is something not officially supported but can be easily done.

Basic Toolbar actions

KendoUI grid predefines 4 actions in the toolbar:

  • Create
  • Cancel
  • Save
  • Destroy

Even when it seems that destroy does nothing since the official way of removing a row is adding a remove button on each row (something that visually I don’t like).
Getting the Toolbar displayed is as simple as adding toolbar: [ “create”, “cancel”, “save”, “destroy” ] as a configuration option into KendoUI Grid initialization.

$("#stocks_tbl").kendoGrid({
    dataSource:stocksDataSource,
    columns:[
        { field:"symbol", title:"Symbol" },
        { field:"price", title:"Price", attributes:{class:"ob-right"}, format:"{0:c2}" },
        { field:"shares", title:"Shares", attributes:{class:"ob-right"}, format:"{0:n2}" },
        { field:"total", title:"Total", attributes:{class:"ob-right"}, format:"{0:c2}" }
    ],
    toolbar: [
        "create", "cancel", "save", "destroy"
    ],
    editable:true,
    navigatable:true,
    pageable:{
        input:true,
        numeric:true
    }
}).data("kendoGrid");

Getting…

Adding custom actions to the toolbar

Pretty straightforward, add new entries to toolbar array toolbar: [ “create”, “cancel”, “save”, “destroy”, “edit”], but this shows a button without an icon (and actually no action associated).
Instead of just adding the label, lets add an object with additional properties…

toolbar: [
    "create", "cancel", "save", "destroy",
    {
        name: "foobar",
        text: "Foo Bar",
        imageClass:"k-icon k-i-custom"

    }
]

I have defined an action named foobar which text is Foo Bar and is displayed with an icon on the left identified from KendoUI sprite file as k-i-custom.
NOTE: See this for a list of (some) KendoUI icons. The complete list is in your styles/kendo.*.css files.
Now, you should see:

Removing text from custom action

Oops! seems pretty basic but KendoUI guys still do not support it. Don’t worry! It’s easily achievable…
Leave text empty:

toolbar: [
    "create", "cancel", "save", "destroy",
    {
        name: "foobar",
        text: "",
        imageClass:"k-icon k-i-custom"

    }
]

And you get…

Ummm! something is wrong. If you pay some close attention to it, you will see that the button is wider (than needed). KendoUI defines extra padding between text and right border of the button since they do not expect to remove the text.
Let’s fix it by adding to imageClass one extra value ob-icon-only but this is added to the icon and not the container that is actually the one adding extra padding, so I cannot to fix it just in CSS with something like:

.ob-icon-only {
    padding-right: 0;
}

What I’m going to do is finding the parent node of the icons that have ob-icon-only class and fix its style.

$("#stocks_tbl").kendoGrid({
    dataSource:stocksDataSource,
    columns:[
        { field:"symbol", title:"Symbol" },
        { field:"price", title:"Price", attributes:{class:"ob-right"}, format:"{0:c2}" },
        { field:"shares", title:"Shares", attributes:{class:"ob-right"}, format:"{0:n2}" },
        { field:"total", title:"Total", attributes:{class:"ob-right"}, format:"{0:c2}" }
    ],
    toolbar:[
        "create", "cancel", "save", "destroy",
        {
            name:"foobar",
            text:"",
            imageClass:"k-icon ob-icon-only k-i-custom"

        }
    ],
    editable:true,
    navigatable:true,
    pageable:{
        input:true,
        numeric:true
    }
}).data("kendoGrid");
$(".ob-icon-only", "#stocks_tbl").parent().css("padding-right", 2);

Where I set the padding-right to 2.
Finally getting…

Next post show adding custom functions to our KendoUI Grid for managing bound data locally in memory.

Advertisements

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