Image only on command buttons.

[Phil]

Hi All:

I would like to decrease the size of the edit controls.  I have an edit command as follows:

{ command: [{ name: "edit", text: "", width: 30 }], title: " ", width: 55 },

the width 30 does not seem to do anything.  I would like to only have the image. 
I am using 7/10/2012 version 2012.2.710.340.

Phil

[Jeremy]

Change the width value to "55px" instead of just 55.

[Phil]

Hi:
It did not work.  It is my opinion the width: 30 is the same as width: "30px".
The 55 is the column width, it is the 30 (button width) that i am trying to affect.
Phil
(see attachment)

[Jeremy]

Sorry, then I don't know.   Perhaps use a jQuery selector to alter the width?

[Phil]

Hi:

I have a solution:

columns: [

    { command: [{ name: "edit", template: "<div class='k-button'><span class='k-icon k-edit'></span></div>"}], title: " ", width: 40 },

    ...

    { command: [{ name: "destroy", template: "<div class='k-button'><span class='k-icon k-delete'></span></div>" }], title: " ", width: 40 }

]

I figured out what rendered the button, then placed it in the template.

<style type="text/css">

    .k-grid tbody .k-button {

        min-width: 12px;

        width: 18px;

    }

</style>

Phil

[Derek]

Thanks - I was looking to do just this. 

Question though - this isn't triggering the default command when the button is clicked?  i.e. I want pop up editing - how would that happen?

It selects the row - but that is it.  Is there a way for the custom editor to invoke the native functionality of either inline or popup?

[Bruno Larose]

Yes Derek, you can call the javascript function for Create/Update/Destroy.

We use for the create button:

 .Columns(column =>
                            {
                                column.Command(c =>
                                {
                                    c.Edit();
                                    c.Destroy();
                                })
                                .HeaderTemplate(
                                    @<text>
                                    <a class="k-button k-button-icon k-grid-add" onclick="$('#MyGridName').data('kendoGrid').addRow()">
                                        <span class="k-icon k-add"></span>
                                    </a>
                                    </text>)
                                .Width(90);
                                column.Bound(c => c.Id).Visible(false);
                                column.Bound(c => c.Field1);
                                column.Bound(c => c.Field2);
                            })

Here you can see all grid methods

http://www.kendoui.com/documentation/ui-widgets/grid/methods.aspx

[Derek]

Thanks for the reply.  I was able to get this to work..  But I am not crazy about it.  It required the following:

{ command: [{ name: "edit", template: '#= <div class="k-button" onclick="editRow()"><span class="k-icon k-edit"></span></div> #'}], title: " ", width: 200}

And added the function below

function editRow(row) {
       $("#myGrid").data("kendoGrid").editRow(
                 $("#myGrid").data("kendoGrid").tbody.find(".k-state-selected"));
}

But it seems to work - any other suggestions?  Or is this the best way?

[Sree Rachakonda]

hi all this is how i did:

@(Html.Kendo().Grid(Model)
  .Name("gridName")
    .Columns(columns =>
    { columns.Command(command => command.Destroy().Text(""));
}

 then u can set the width by using this style attributes
<style type="text/css">
    .k-grid tbody .k-button {
        min-width: 12px;
        width: 30px;
    }
</style>

And it worked for me....
Hope it helps...

Cheers

[Nickotin]

Here is my solution, for inline edit:

columns: [

    {

                .....................

    },{

        command: [

            {

                id: "edit",

                name: "edit",

                template: "<a class='k-button k-grid-edit' href='' style='min-width:16px;'><span class='k-icon k-edit'></span></a>"

            }

        ],

        title: " ",

        width: "90px"

    }

]

and for remove text from "Update", "Cancel" buttons:

$("#grid").on("click", ".k-grid-edit", function(){

    $(".k-grid-update").html("<span class='k-icon k-update'></span>").css("min-width","16px").removeClass("k-button-icontext");

    $(".k-grid-cancel").html("<span class='k-icon k-cancel'></span>").css("min-width","16px").removeClass("k-button-icontext");

});

[Derek]

Hello,

Thanks for this - this really helps me a lot!  I have one more question relating to this, but it's a little off topic.  Let's say I need to conditionally add the edit button only on rows where one of the fields is a certain value - i.e. status = "new" or status = "open" but when status = "complete" - the user shouldn't be able to edit the record.  I can likely handle that in the click event, but it would be preferable to not have the button.

I attempted to copy the following template from a row on my table - this passes the status code value to my method to look up the text value:

{field: "status", title: "Status", editor: statusDropDownEditor, template: '#= dividendBinding.getStatusName(status) #' }

However, when I try that in the command - the value of status is "" - can I pass in the value of a different field on the table?

{ command: [{id: "edit",name: "edit",template: "#= dividendBinding.getEditButton(status) #"}

In this getEditButton method, I want to do something like this:

function getEditButton(status){

    if(status != "comp"){

        return "<a class='k-button k-grid-edit' href='' style='min-width:16px;'><span class='k-icon k-edit'></span></a>";

    }

    return "<span></span>";

}

<EDIT>
Also - this doesn't seem to work - when the edit method is hit, the new buttons are not there yet - so nothing happens with you supplied code.

I tried this -

var temp = $(".k-grid-update");

And it returned empty.  Is this a timing issue?

</EDIT>

Thanks.

[dperish]

So its a year later.  Visual Studio 2013 is shipping with bootstrap out of the box.  Is there no clean way of using standard buttons to do this.  Having our developers do attribute replacements on every individual view isn't going to sit well in an SOP/coding standards doc.

Please advise..

Thanks,
-Dave

** UPDATE **

I think this may be the more succinct solution for using bootstrap/glyphicon button classes.  This is still far from clean or ideal.  

columns.Bound(item => item.ID).ClientTemplate("<a href='/MyController/MyAction/#= ID #' class='btn k-grid-Details' onclick='showDetails'><i class='icon-search'></i></a>");

Why not add a clientTemplate extension for command columns?

Thanks,
-Dave

[Dimo]

Hi Dave,

Combining a built-in button functionality with templates is not trivial and hassle-free, because the Grid would need to attach handlers to unknown elements. From this point of view, the approach you have suggested is OK.

Regards,
Dimo
Telerik

[dperish]

Dimo, thanks for the reply.  Unfortunately I think I spoke too soon.  When I removed the control column the showDetails method was no longer 'functional'.  Same effect when hiding the column..

[Dimo]

Hello David,

I am not sure what scenario you are after. Do you have Javascript errors on the page? Can you provide a runnable example, which demonstrates the described problem?

Regards,
Dimo
Telerik

[Garry]

Another disappointing thread.
The KendoUI documentation states the following:

columns.command.className String
The CSS class applied to the command button.

However, this does not work!

I agree with the comments above that we should be able to control buttons and grids using the KendoUI API rather than hacking CSS.
We are developers, not web designers!

[Dimo]

Hi Garry,

When set via columns.command.className, a custom CSS class is applied to the command button as expected. Can you please specify what exactly is not working? In case some custom styles are not applied, please inspect the buttons with the browser's DOM inspector and make sure you are using high-enough specificity.

http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Regards,
Dimo
Telerik

 

 

[Andy]

Seeing as how this is the top result from a google search on the subject, I wanted to hijack this thread and give the current answer to the original question of how you get the images only on the default command buttons.  Basically, you just set the text to " ", notice the space.  So my code is 

{ command: [{ name: "edit", text: " " }, { name: "destroy", text: " " }], title: "", width: "200px" }

[Mark]

This answer is simple and basically works, but it makes for "fat" buttons. Derek's template does what we wanted -- tight buttons around the icon only:

 {  command: [
    { name: "edit", template: "<a class='k-button k-grid-edit' href='' style='min-width:16px;'><span class='k-icon k-edit'></span></a>" },
    { name: "destroy", template: "<a class='k-button k-grid-delete' href='' style='min-width:16px;'><span class='k-icon k-delete'></span></a>" },
    ], title: "&nbsp;", width: "90px"
},

This also (trivially) includes the Delete/Destroy button, which is fairly similar but has counter-intuitive naming ("delete" instead of "destroy") for the internal classes.

[Mark]

This is simple and works, but it makes for "fat" buttons. Derek's template worked for us -- tight buttons just displaying the icons:

{  command: [
   { name: "edit", template: "<a class='k-button k-grid-edit' href='' style='min-width:16px;'><span class='k-icon k-edit'></span></a>" },
   { name: "destroy", template: "<a class='k-button k-grid-delete' href='' style='min-width:16px;'><span class='k-icon k-delete'></span></a>" },
    ], title: " ", width: "90px"
},

This also formats the Delete/Destroy button.

[Richard]

The text of the grid command controls can be hidden by judicious css.

#grid a.k-grid-edit,
#grid a.k-grid-delete,
#grid a.k-grid-update,
#grid a.k-grid-cancel
 {
    white-space:nowrap;
    text-overflow:clip;
    overflow:hidden;
    min-width:16px;
    width:44px;
}
#grid a .k-i-edit,
#grid a .k-i-close,
#grid a .k-i-check,
#grid a .k-i-cancel
{
    padding-left:11px;
    padding-right:11px;
}

 

Enjoy!

[Aleksandr]

would ask to reopen this question, one of the official solutions was to use CSS:

div.k-grid .k-grid-edit, div.k-grid .k-grid-delete, div.k-grid .k-grid-cancel, div.k-grid .k-grid-update, div.k-grid a[class*='k-grid-custom'], div.k-grid a[class*='k-grid-image-button'] {
    display: inline-block;
    width: 2.5em;
    height: 2.5em;
    text-align: center;
    min-width: 0 !important;
    border: 0px;
    overflow: hidden;
    background-color: inherit;
}

it will work till you change the font size settings in the browser (chrome://settings/appearance -> front size), it will lead to 

 

empty text also not the best option if you want to use tooltip, so, would appreciate Telerik for more robust solution (if possible)

 

 

 

 

 

 

[Georgi Denchev]

Hi, Aleksandr,

I am afraid that all of the possible options have already been mentioned in this thread. The usage of templates, custom CSS or removing the text from the button are the only available options to achieve the desired outcome.

Have you tried the template approach that was mentioned in the following reply?

https://www.telerik.com/forums/image-only-on-command-buttons#2255816 

Could you please elaborate on what the problem with empty text and tooltip is?

I'll try to provide you with some additional suggestions afterwards.

Best Regards,

Georgi

[Aleksandr]

Hello Georgi,

it may work, but we have a lot of screens already, would be diff to go through all of them, can we create a feature request to "possibly" have the solution out of the box? 

Thx Alex 

 

[Georgi Denchev]

Hi, Aleksandr,

You can certainly open a Feature Request in the public feedback portal.

Best Regards,

Georgi

[Aleksandr]

sent, thx