How Add icon class to custom.Command

12 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
    2153 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. UI for ASP.NET MVC is VS 2017 Ready
  4. 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
  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 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!
  6. 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>

  7. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 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!
  8. 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?
  9. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 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
  10. Don
    Don avatar
    3 posts
    Member since:
    Oct 2006

    Posted 01 Mar 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

  11. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 03 Mar 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
  12. Don
    Don avatar
    3 posts
    Member since:
    Oct 2006

    Posted 03 Mar 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

  13. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 03 Mar 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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready