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

Image only on command buttons.

20 Answers 3378 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Phil
Top achievements
Rank 2
Phil asked on 05 Aug 2012, 07:18 PM
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

20 Answers, 1 is accepted

Sort by
0
Jeremy
Top achievements
Rank 1
answered on 06 Aug 2012, 09:17 PM
Change the width value to "55px" instead of just 55.

0
Phil
Top achievements
Rank 2
answered on 08 Aug 2012, 12:01 AM
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)
0
Jeremy
Top achievements
Rank 1
answered on 08 Aug 2012, 01:48 AM
Sorry, then I don't know.   Perhaps use a jQuery selector to alter the width?
0
Phil
Top achievements
Rank 2
answered on 11 Aug 2012, 12:05 AM
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
0
Derek
Top achievements
Rank 1
answered on 16 Aug 2012, 05:34 PM
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?
0
Bruno Larose
Top achievements
Rank 2
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
0
Accepted
Derek
Top achievements
Rank 1
answered on 16 Aug 2012, 06:15 PM
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?
0
Sree Rachakonda
Top achievements
Rank 1
answered on 29 Aug 2012, 11:58 AM
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
0
Nickotin
Top achievements
Rank 1
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");
});

0
Derek
Top achievements
Rank 1
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.
0
dperish
Top achievements
Rank 1
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
0
Dimo
Telerik team
answered on 10 Oct 2013, 06:20 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
dperish
Top achievements
Rank 1
answered on 10 Oct 2013, 01:38 PM
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..

0
Dimo
Telerik team
answered on 14 Oct 2013, 11:57 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Garry
Top achievements
Rank 2
Veteran
answered on 21 May 2014, 11:31 AM
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!


0
Dimo
Telerik team
answered on 26 May 2014, 05:37 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Andy
Top achievements
Rank 1
answered on 11 May 2015, 04:16 PM

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" }

0
Mark
Top achievements
Rank 1
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: "&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.

0
Mark
Top achievements
Rank 1
answered on 17 Nov 2016, 05:26 PM

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.

0
Richard
Top achievements
Rank 1
answered on 23 Jan 2017, 02:52 AM

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
Top achievements
Rank 1
Iron
Iron
Veteran
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
Telerik team
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
Top achievements
Rank 1
Iron
Iron
Veteran
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
Telerik team
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
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 07 Sep 2022, 07:11 AM

sent, thx 
Tags
Grid
Asked by
Phil
Top achievements
Rank 2
Answers by
Jeremy
Top achievements
Rank 1
Phil
Top achievements
Rank 2
Derek
Top achievements
Rank 1
Bruno Larose
Top achievements
Rank 2
Sree Rachakonda
Top achievements
Rank 1
Nickotin
Top achievements
Rank 1
dperish
Top achievements
Rank 1
Dimo
Telerik team
Garry
Top achievements
Rank 2
Veteran
Andy
Top achievements
Rank 1
Mark
Top achievements
Rank 1
Richard
Top achievements
Rank 1
Share this question
or