Image only Command buttons (once again)

[Shafi]

Hi!

I have bee through a lot of threads regarding this but I'm not able to find a dependable working solution. My case is that

• It is pure JS grid
• The grid is bound to local JS array
• It is not in batch mode
• The toolbar only allows adding new record
• Once a row is added, it is in full edit mode and the command buttons read: Update and Cancel
• Once I press update to save the row, it leaves edit template and the commands read: Edit and Delete

Here is the basic code to create the grid.

var kendoDataSource = new kendo.data.DataSource({
    data: getDataForGrid(),
    pageSize: 5,
    schema: {
        model: {
            id: "ParkingServiceId",
            fields: {
                ParkingServiceId:      { type: 'number', editable: false },
                TerminalId:            { type: 'number', validation: { required: true } },
                ServiceId:             { type: 'number', validation: { required: true } },
                ParkingCardNumber:     { type: 'string' },
                ParkingCardIssueDate:  { type: 'date',   validation: { required: true } },
                ParkingCardExpiryDate: { type: 'date',   validation: { required: true } },
                ParkingCardGroupId:    { type: 'number' },
                ServiceFee:            { type: 'number', validation: { min: 0, required: true }, editable: false }
            }
        }
    }
});

var gridMain = $("#serviceDetailsGrid").kendoGrid({
    dataSource: kendoDataSource,
    pageable: false,
    sortable: false,
    toolbar: ["create"],
    columns:
    [
        { field: "TerminalId",            title: "Terminal",  width: 140, template: getTerminalTitle,     editor: terminalDropDownEditor },
        { field: "ServiceId",             title: "Service",               template: getServiceTitle,      editor: serviceDropDownEditor },
        { field: "ParkingCardIssueDate",  title: "Issued On", width: 152, template: "#= kendo.toString(kendo.parseDate(ParkingCardIssueDate,  'dd-MMM-yyyy'), 'dd-MMM-yyyy') #", format: "{0:dd-MMM-yyyy}" },
        { field: "ParkingCardExpiryDate", title: "Expiry",    width: 152, template: "#= kendo.toString(kendo.parseDate(ParkingCardExpiryDate, 'dd-MMM-yyyy'), 'dd-MMM-yyyy') #", format: "{0:dd-MMM-yyyy}" },
        { field: "ParkingCardGroupId",    title: "Area",      width: 100, template: getTerminalAreaTitle, editor: terminalAreaDropDownEditor },
        { field: "ParkingCardNumber",     title: "Card #",    width: 120 },
        { field: "ServiceFee",            title: "Fee",       width: 100 },
        { command: [{ name: "edit" }, { name: "destroy" }], title: " ", width: "100px" }
    ],
    editable: "inline",
    cancel: function () { $('#serviceDetailsGrid').data('kendoGrid').dataSource.cancelChanges(); },
    dataBound: function () {
        var innerContentU = $(".k-grid-update").html();
        if (innerContentU) {
            $(".k-grid-update").html(innerContentU.replace("Update", ""));
        }

        var innerContentC = $(".k-grid-cancel").html();
        if (innerContentC) {
            $(".k-grid-cancel").html(innerContentC.replace("Cancel", ""));
        }

        var innerContentD = $(".k-grid-delete").html();
        if (innerContentD) {
            $(".k-grid-delete").html(innerContentD.replace("Delete", ""));
        }

        var innerContentE = $(".k-grid-edit").html();
        if (innerContentE) {
            $(".k-grid-edit").html(innerContentE.replace("Edit", ""));
        }
    }
}).data("kendoGrid");

I still see UPDATE, CANCEL, DELETE, and EDIT text. I have tried the following:

• http://www.telerik.com/forums/how-to-show-image-only-button-for-destroy-command-button#nZn3GJ0jUUmKUCnHtaZp5Q
• http://www.telerik.com/forums/image-only-on-command-buttons#-HlVbGjcFUKCnJ9Elngmew
• https://onabai.wordpress.com/2012/09/05/kendoui-grid-toolbar-button-with-icon-only/

 

[Shafi]

I have the following style applied as well:

<style type="text/css">
    /* centres the image */
    .k-grid .k-button-icontext .k-icon {
        margin: 0;
        vertical-align: middle;
    }
    /* changes default width of the button */
    .k-grid tbody .k-button {
        -moz-min-width: 22px;
        -ms-min-width: 22px;
        -o-min-width: 22px;
        -webkit-min-width: 22px;
        min-width: 22px;
        width: 22px;
    }
</style>

[Iliana Dyankova]

Hi Shafi,

To achieve the expected outcome you could use the columns.command.text options. For your convenience I prepared an example based on the provided configuration.

Regards,
Iliana Nikolova
Telerik by Progress

 

 

[Shafi]

Hi!

Your example works nicely. I'm using the Material Theme. The look and feel there. I have a sample: http://dojo.telerik.com/@DoomerDGR8/Axiqe

Is there a way to properly layout the command column buttons tightly and in a single row and images aligned center?

[Iliana Dyankova]

Hi Shafi,

This outcome can be achieved by using additional CSS. For example decrease the buttons padding (updated dojo).

Regards,
Iliana Nikolova
Telerik by Progress

 

 

[Shafi]

Ok. I think I see the issue now.

http://dojo.telerik.com/@DoomerDGR8/inIxa

Check this updated Dojo. If you remove bootstrap, all is well. Now how do I fix this? Once bootstrap is in, all quick CSS fixes fail. I thought it was noramilze.css was the issue but that file inclusion/exclusion didn't make difference. Only bootstrap.css.

[Shafi]

Ok. I think I see the issue now.

http://dojo.telerik.com/@DoomerDGR8/inIxa

Check this updated Dojo. If you remove bootstrap, all is well. Now how do I fix this? Once bootstrap is in, all quick CSS fixes fail. I thought it was noramilze.css was the issue but that file inclusion/exclusion didn't make . Only bootstrap.css.

[Iliana Dyankova]

Hi Shafi,

Changing the buttons padding seems to fix the issue - take a look at this dojo and let me know if I am missing something.

Regards,
Iliana Nikolova
Telerik by Progress

 

 

[Shafi]

That worked. Thank you.

[Shafi]

Is it this simple for a HtmlHelper MVC grid as well?

[Iliana Dyankova]

Hi Shafi,

Yes, you could use the same approach for Kendo UI Grid for ASP.NET MVC as well.

Regards,
Iliana Nikolova
Telerik by Progress