This is a migrated thread and some comments may be shown as answers.

Image only on command buttons.

20 Answers 4364 Views

Grid

This is a migrated thread and some comments may be shown as answers.

20 Answers, 1 is accepted

answered on 08 Aug 2012, 12:01 AM

Gird-Buttons.png

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)

answered on 11 Aug 2012, 12:05 AM

Grid-Good-Buttons.png

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

answered on 16 Aug 2012, 05:50 PM

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

Accepted

answered on 31 Aug 2012, 07:54 AM

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");

});

answered on 31 Aug 2012, 02:49 PM

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.

answered on 04 Oct 2013, 07:34 PM

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

answered on 17 Nov 2016, 05:23 PM

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: " ", 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.

Aleksandr

commented on 30 Aug 2022, 09:57 AM

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

commented on 02 Sep 2022, 07:20 AM

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

commented on 02 Sep 2022, 07:25 AM

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

commented on 07 Sep 2022, 07:02 AM

Hi, Aleksandr,

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

Best Regards,

Georgi

Aleksandr

commented on 07 Sep 2022, 07:11 AM

sent, thx