How Add icon class to custom.Command

17 posts, 0 answers
  1. Chad
    Chad avatar
    29 posts
    Member since:
    Nov 2012

    Posted 12 Feb 2013 Link to this post

    Hello,

    I have a command column, and I'd like to add a custom command within it, not in a separate column:
    columns.Command(command =>
        {
            command.Edit();
            command.Destroy();
            command.Custom("Copy").Click("CopyPOLine").HtmlAttributes(new { @class = "k-copy-icon"});
        }).Width(175);
    The above renders this:
    <a class="k-button k-button-icontext k-grid-Copy" href="#"><span class=" "></span>Copy</a>
    I cannot figure out how to add a custom class to the <span> tag inside the <a> tag so I can specify the image to display. I see how you can create a columns.Template to accomplish this, but that would be in a new column and I want all command buttons to be within the same column. 

    Side Note in the above: the HtmlAttributes class specified doesn't get appended to the class list in the <a> tag either...it looks like it generates a new class of "k-grid-NAME_OF_COMMAND". So HtmlAttributes has no affect on class???

    Is there a way to accomplish this?
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2211 posts

    Posted 14 Feb 2013 Link to this post

    Hello Chad,

     
    You can add any CSS styles with the HtmlAttributes method to a custom command, except classes, because they are generated by template. The most convenient way to specify custom styles is to use the auto generated "k-grid-NAME_OF_COMMAND" class. If this is not suitable in the current implementation, I would suggest you to bind to the dataBound event and attach the class there.
    E.g.

    .Events(e => e.DataBound("onDataBound")

    function onDataBound(e) {
        $(".k-grid-NAME_OF_COMMAND").addClass("k-grid-Copy");
    }


    Regards,
    Dimiter Madjarov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Jean-François
    Jean-François avatar
    26 posts
    Member since:
    Dec 2012

    Posted 04 Oct 2013 Link to this post

    Hi, 

    Sorry for the thread necromancy, but I've been referenced here from this thread : http://www.kendoui.com/forums/kendo-ui-complete-for-asp-net-mvc/grid/htmlattributes-in-custom-commands-not-working-(for-class).aspx

    In our case, adding a class would be better since we have pre-defined classes for anchors that make them look like certain buttons. We could add kendo's class to the list, but I think it would be better if it was supported. Or since it's .net wrappers, you could throw a meaning full exception suggesting the work around. This way, some time would be saved. Offering an API option that does nothing is a little confusing. 

    Furthermore, the databound callback didn't work for us. I don't have the code near me to test it, but if I remember correctly, the issue was with the cancel event. This event does not trigger a databound event (and it shouldn't), however the button is still re-generated after the cancel, leading to the loss of the class on the anchor. 

    Thanks,
    Jni
  4. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2211 posts

    Posted 07 Oct 2013 Link to this post

    Hello Jean,


    Fixing the class issue for custom commands is in our future development plans, but at the moment there are other tasks with higher priority.

    I assume that the reason for the issue is that when the user changes a value, the change event of the model is triggered, which also triggers the repainting of the row according to the default template (which does not contain the custom class). As a workaround I would suggest you to bind to the cancel event too and add the custom class to the button for the current row again.

     

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Kris Nobels
    Kris Nobels avatar
    15 posts
    Member since:
    Aug 2009

    Posted 12 Oct 2013 Link to this post

    This does the trick :-)

    columns.Command(command =>
                  {
                      command.Custom("Edit").Click("showDetails");
                      command.Custom("Delete").Click("DeleteDetails");
                      command.Custom("View").Click("ViewDetails");
                  }).Title("Actions");


              .Events(e => e.DataBound("onRowBound"))


     <script type="text/javascript">
            function onRowBound(e) {
            $(".k-grid-Edit").find("span").addClass("k-icon k-edit");
            $(".k-grid-Delete").find("span").addClass("k-icon k-delete");
            $(".k-grid-View").find("span").addClass("k-icon km-view");
        }
    </script>

  6. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2211 posts

    Posted 14 Oct 2013 Link to this post

    Hello Kris,


    Yes, this is the correct approach if you would like to use the built in Kendo UI icons. Just a small addition, the dataBound event is fired only once, when the grid is bound to the data, not once for each row.

    I wish you a great day!

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Daniel
    Daniel avatar
    1 posts
    Member since:
    Jan 2015

    Posted 11 Aug 2015 in reply to Dimiter Madjarov Link to this post


    I assume that the reason for the issue is that when the user changes a value, the change event of the model is triggered, which also triggers the repainting of the row according to the default template (which does not contain the custom class). As a workaround I would suggest you to bind to the cancel event too and add the custom class to the button for the current row again.

    Hi Dimiter, 

    If you have a single-row selectable grid with an edit command, this still fails if you edit a row that is not currently selected and then cancel . Even if you hook into the cancel event and re-add the classes this only works for the currently selected row.

    Any ideas?
  8. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2211 posts

    Posted 12 Aug 2015 Link to this post

    Hello Daniel,

    It is not clear what is causing the problem on your end. Could you please demonstrate it with a small runnable example, so we could inspect it locally?

    I am looking forward to hearing from you.

    Regards,
    Dimiter Madjarov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  9. Don
    Don avatar
    4 posts
    Member since:
    Oct 2006

    Posted 01 Mar 2016 in reply to Dimiter Madjarov Link to this post

    Dimiter,

    Can you please share code of cancel event workaround.

    I've followed this post and I was able to add icon form my custom command (Remove).
    And I am using Editor popup. When I cancel out editor window without making any changes to the data, added icon in my custom remove button disappears. So I added a workaround (which I found from another post) using cancel event by adding 

    e.preventDefault();
    e.sender.refresh();
    With this it takes care the icon disappearing issue when I cancel out from updating data.

    This work around however, seems to break when I try to add new record. If I cancel out without adding a new record,
    a row temporarily added to the grid don't seem to go away.

    If I remove work around with cancel event, works. But then again, icon disappears.

    Do you have better work around for this?

    thanks

    Don

  10. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2211 posts

    Posted 03 Mar 2016 Link to this post

    Hello Don,

    Here is a sample implementation for the cancel event handler of the Grid. The same logic should be executed inside, but this time in a setTimeout call, so the Grid table is redrawn before the execution.

    Regards,
    Dimiter Madjarov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  11. Don
    Don avatar
    4 posts
    Member since:
    Oct 2006

    Posted 03 Mar 2016 in reply to Dimiter Madjarov Link to this post

    Dimiter,

    Sample link don't seem to work. It launches but with blank page.
    Can you double check?

    thanks

    Don

  12. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2211 posts

    Posted 03 Mar 2016 Link to this post

    Hello Don,

    I tried the example and is opening as expected on my end. You could try running it with a different browser.

    Regards,
    Dimiter Madjarov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  13. Heiko
    Heiko avatar
    134 posts
    Member since:
    Oct 2012

    Posted 08 Jul Link to this post

    Today I tried this example (according to the FAQ http://docs.telerik.com/aspnet-mvc/helpers/grid/faq#how-to-add-kendo-ui-icons-to-custom-command-buttons) but I had to notice that the Custom Command is not rendering with the <span>text</span> element, just plain anchor.

    <a role="button" class="k-button k-button-icontext k-grid-myCommand" href="#">text</a>

    ?????

  14. Preslav
    Admin
    Preslav avatar
    180 posts

    Posted 11 Jul Link to this post

    Hello Heiko,

    Thank you for reporting this.

    In the 2017.2.621 release, we introduced a change with the custom buttons. For example, if the iconClass configuration is not set, the span will not be created. However, for the MVC wrappers, this configuration is not yet available. This behavior is logged as a bug and our development team already fixed it. That said, it will be available in the next Kendo UI release. You could follow the status of the bug here:
    Once the fix is released, the correct syntax should be:
    @(Html.Kendo().Grid()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Command(command => { command.Custom("myCommand").Text("My Text").IconClass("k-icon k-i-custom"); });
            })
            .Events(ev => ev.DataBound("addIcons"))
        )
    Please, note that no more event handling and JavaScript will be needed.

    In the meantime, until the fix is released, you could use the following workaround, change the addIcons function to something similar to:
    function addIcons(e) {
        var span = "<span class='k-icon k-i-custom'></span>"
        e.sender.tbody.find(".k-grid-myCommand").prepend(span);
    }

    I hope the above information helps.


    Regards,
    Preslav
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  15. fjaumot
    fjaumot avatar
    1 posts
    Member since:
    Jul 2017

    Posted 11 Jul in reply to Preslav Link to this post

    Hi Dimiter,

    Great news but I use this fix and the text shows in a button. I'm only need a icon,

    @(Html.Kendo().Grid<OfficeModel>()                        .Name("grid")                        .Columns(columns =>                        {                            columns.Bound(p => p.Code).Title("Código").Filterable(false);                            columns.Bound(p => p.Name).Title("Nombre");                            columns.Bound(p => p.FiscalNumber).Title("Cif");                            columns.Bound(p => p.Email);                            columns.Bound(p => p.Phone).Title("Teléfono");                            columns.Bound(p => p.Active).Title("Activa");                            columns.Command(command => command.Custom("CustomEdit").Text(string.Empty).Click("Edit"));                            columns.Command(command => command.Custom("CustomDelete").Text(string.Empty).Click("Delete"));                        })                        .Pageable()                        .Sortable()                        .Scrollable()                        .Events(ev => ev.DataBound("addIcons"))                        .DataSource(dataSource => dataSource                            .Ajax()                            .Read(read => read.Action("Read", "Office"))                         )                    )

     

    Can you help me please?

    Best,

  16. Preslav
    Admin
    Preslav avatar
    180 posts

    Posted 12 Jul Link to this post

    Hi Fjaumot,

    The correct syntax for you could be:

    columns.Command(command => command.Custom("myCommand").Text(" ")).Width(180);

    function addIcons(e) {
        var span = "<span class='k-icon k-i-custom'></span>"
        e.sender.tbody.find(".k-grid-myCommand").prepend(span);
    }


    Regards,
    Preslav
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  17. Jignesh
    Jignesh avatar
    4 posts
    Member since:
    Jul 2017

    Posted 1 day and 17 hours ago Link to this post

    Another workaround without DataBound event.

    command.Custom("ViewButton").Text("<span class='k-icon k-i-pdf'></span>View").Click("viewbutton_click");
Back to Top