setting className con custom command put CSS class on wrong element

2 posts, 0 answers
  1. Paolo
    Paolo avatar
    30 posts
    Member since:
    Mar 2017

    Posted 19 Apr 2017 Link to this post

    The className specified is applied on A tag but not on the right inner SPAN tag

    try this code on dojo , see the attached screenshot

    <!DOCTYPE html>
    <html>
    <head>
        <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
     
    </head>
    <body>
            <script src="../content/shared/js/people.js"></script>
     
            <div id="example">
                <div id="grid"></div>
     
                <div id="details"></div>
     
                <script>
                    var wnd,
                        detailsTemplate;
     
                    $(document).ready(function () {
                        var grid = $("#grid").kendoGrid({
                            dataSource: {
                               pageSize: 20,
                               data: createRandomData(50)
                            },
                            pageable: true,
                            height: 550,
                            columns: [
                                { field: "FirstName", title: "First Name", width: "140px" },
                                { field: "LastName", title: "Last Name", width: "140px" },
                                { field: "Title" },
                                { command: { text: "View Details", click: showDetails, className : 'k-icon k-i-copy' }, title: " ", width: "180px" }]
                        }).data("kendoGrid");
     
                        wnd = $("#details")
                            .kendoWindow({
                                title: "Customer Details",
                                modal: true,
                                visible: false,
                                resizable: false,
                                width: 300
                            }).data("kendoWindow");
     
                        detailsTemplate = kendo.template($("#template").html());
                    });
     
                    function showDetails(e) {
                        e.preventDefault();
     
                        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
                        wnd.content(detailsTemplate(dataItem));
                        wnd.center().open();
                    }
                </script>
     
                <script type="text/x-kendo-template" id="template">
                    <div id="details-container">
                        <h2>#= FirstName # #= LastName #</h2>
                        <em>#= Title #</em>
                        <dl>
                            <dt>City: #= City #</dt>
                            <dt>Birth Date: #= kendo.toString(BirthDate, "MM/dd/yyyy") #</dt>
                        </dl>
                    </div>
                </script>
     
                <style type="text/css">
                    #details-container
                    {
                        padding: 10px;
                    }
     
                    #details-container h2
                    {
                        margin: 0;
                    }
     
                    #details-container em
                    {
                        color: #8c8c8c;
                    }
     
                    #details-container dt
                    {
                        margin:0;
                        display: inline;
                    }
                </style>
            </div>
     
     
    </body>
    </html>

     

  2. Preslav
    Admin
    Preslav avatar
    571 posts

    Posted 20 Apr 2017 Link to this post

    Hi Paolo,

    The described behavior is expected because of the columns.command.className configuration applies CSS classes to the command button. 

    A workaround for this behavior is outlined in this How To article:

    http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/font-awesome-icons-in-custom-grid-command-buttons

    For the shared code snippet it will look like:

    dataBound: function(e) {
        e.sender.tbody.find(".k-button.k-icon.k-i-copy").each(function(idx, element) {
            $(element).removeClass("k-icon k-i-copy").find("span").addClass("k-icon k-i-copy");
        });
    },

    Additionally, a runnable Dojo is available here: http://dojo.telerik.com/OREQU


    Regards,
    Preslav
    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