HtmlAttributes on Buttons

4 posts, 0 answers
  1. Martin
    Martin avatar
    2 posts
    Member since:
    Apr 2017

    Posted 27 Apr Link to this post

    How do I apply custom HtrmlAttributes to custom tookbar or command buttons in a TreeList (using the MVC wrapper) ?

     

    on Kendo Grids, we have used this extensively to set styling and tooltips, e.g. 

    .ToolBar(toolbar => { toolbar.Custom().Text("").HtmlAttributes(new { id = "btnClearFilters", @class = "pm-btnFilterClear", title = "Clear all filters" }); })

    However, there appears to be no equivalent HtmlAttributes methods on the TreeList toolbar or custom command buttons. 

     

    Thanks.

     

  2. Stefan
    Admin
    Stefan avatar
    1394 posts

    Posted 01 May Link to this post

    Hello Martin,

    Indeed, currently, the HtmlAttributes method is not available for the custom buttons in the TreeList toolbar.

    I can suggest using the Name method which later can be used to select the element with jQuery and to set additional attributes and classes:

    .Toolbar(t => t.Custom().Name("mycommand"))
     
    $(function () {
        $("[data-command='mycommand']").attr( "title", "Custom title" );
    });


    Regards,
    Stefan
    Telerik by Progress
    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.
  3. Martin
    Martin avatar
    2 posts
    Member since:
    Apr 2017

    Posted 02 May in reply to Stefan Link to this post

    Thanks. That's actually exactly what I did.

    By the way, the API documentation for the the Name method is wrong:

    (http://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/TreeListToolbarBuilder)

    It states:

    Name(System.String)
    The name of the toolbar command. Either a built-in ("create", "excel", "pdf") or custom. The name is reflected in one of the CSS classes, which is applied to the button - k-grid-name. 

    The name is actually NOT reflected in a CSS class, and there is no mention here of using the data-command attribute.

    Cheers,

    Martin

  4. Stefan
    Admin
    Stefan avatar
    1394 posts

    Posted 03 May Link to this post

    Hello Martin,

    Thank you for the feedback.

    This statement "The name is reflected in one of the CSS classes, which is applied to the button - k-grid-name" is for the build in commands( create is changed to add).

    As for the data-command attribute, I will consult that with the relevant team, and add the information if needed.
     
    Regards,
    Stefan
    Telerik by Progress
    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.
Back to Top