Image only on command buttons.

21 posts, 1 answers
  1. Phil
    Phil avatar
    273 posts
    Member since:
    Jul 2008

    Posted 05 Aug 2012 Link to this post

    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
  2. Jeremy
    Jeremy avatar
    55 posts
    Member since:
    Nov 2011

    Posted 06 Aug 2012 Link to this post

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

  3. Phil
    Phil avatar
    273 posts
    Member since:
    Jul 2008

    Posted 07 Aug 2012 Link to this post

    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)
  4. Jeremy
    Jeremy avatar
    55 posts
    Member since:
    Nov 2011

    Posted 07 Aug 2012 Link to this post

    Sorry, then I don't know.   Perhaps use a jQuery selector to alter the width?
  5. Phil
    Phil avatar
    273 posts
    Member since:
    Jul 2008

    Posted 10 Aug 2012 Link to this post

    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
  6. Derek
    Derek avatar
    3 posts
    Member since:
    Aug 2012

    Posted 16 Aug 2012 Link to this post

    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?
  7. Bruno Larose
    Bruno Larose avatar
    4 posts
    Member since:
    Jun 2012

    Posted 16 Aug 2012 Link to this post

    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
  8. Answer
    Derek
    Derek avatar
    3 posts
    Member since:
    Aug 2012

    Posted 16 Aug 2012 Link to this post

    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?
  9. Sree Rachakonda
    Sree Rachakonda avatar
    9 posts
    Member since:
    Mar 2010

    Posted 29 Aug 2012 Link to this post

    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
  10. Nickotin
    Nickotin avatar
    1 posts
    Member since:
    Apr 2012

    Posted 31 Aug 2012 Link to this post

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

  11. Derek
    Derek avatar
    3 posts
    Member since:
    Aug 2012

    Posted 31 Aug 2012 Link to this post

    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.
  12. dperish
    dperish avatar
    9 posts
    Member since:
    Aug 2007

    Posted 04 Oct 2013 Link to this post

    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
  13. Dimo
    Admin
    Dimo avatar
    8376 posts

    Posted 10 Oct 2013 Link to this post

    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!
  14. dperish
    dperish avatar
    9 posts
    Member since:
    Aug 2007

    Posted 10 Oct 2013 Link to this post

    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..

  15. Dimo
    Admin
    Dimo avatar
    8376 posts

    Posted 14 Oct 2013 Link to this post

    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!
  16. Garry
    Garry avatar
    44 posts
    Member since:
    Sep 2012

    Posted 21 May 2014 Link to this post

    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!


  17. Dimo
    Admin
    Dimo avatar
    8376 posts

    Posted 26 May 2014 Link to this post

    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!
     
  18. Andy
    Andy avatar
    7 posts
    Member since:
    Mar 2014

    Posted 11 May 2015 in reply to Dimo Link to this post

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

  19. Mark
    Mark avatar
    5 posts
    Member since:
    Aug 2016

    Posted 17 Nov 2016 in reply to Andy Link to this post

    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.

  20. Mark
    Mark avatar
    5 posts
    Member since:
    Aug 2016

    Posted 17 Nov 2016 in reply to Andy Link to this post

    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.

  21. RichardAD
    RichardAD avatar
    115 posts
    Member since:
    Feb 2012

    Posted 22 Jan Link to this post

    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!

Back to Top