Image only Command buttons (once again)

11 posts, 1 answers
  1. Shafi
    Shafi avatar
    44 posts
    Member since:
    Dec 2014

    Posted 17 Aug Link to this post

    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/

     

  2. Shafi
    Shafi avatar
    44 posts
    Member since:
    Dec 2014

    Posted 17 Aug in reply to Shafi Link to this post

    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>

  3. Kendo UI is VS 2017 Ready
  4. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 19 Aug Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  5. Shafi
    Shafi avatar
    44 posts
    Member since:
    Dec 2014

    Posted 21 Aug in reply to Iliana Nikolova Link to this post

    Hi!

    Your example works nicely. I'm using the Material Theme. The look and feel breaks 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?

  6. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 24 Aug Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  7. Shafi
    Shafi avatar
    44 posts
    Member since:
    Dec 2014

    Posted 24 Aug Link to this post

    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.

  8. Shafi
    Shafi avatar
    44 posts
    Member since:
    Dec 2014

    Posted 25 Aug in reply to Iliana Nikolova Link to this post

    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.

  9. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 26 Aug Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  10. Shafi
    Shafi avatar
    44 posts
    Member since:
    Dec 2014

    Posted 28 Aug in reply to Iliana Nikolova Link to this post

    That worked. Thank you.
  11. Shafi
    Shafi avatar
    44 posts
    Member since:
    Dec 2014

    Posted 30 Aug Link to this post

    Is it this simple for a HtmlHelper MVC grid as well?
  12. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 31 Aug Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready