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>
        <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
            <script src="../content/shared/js/people.js"></script>
            <div id="example">
                <div id="grid"></div>
                <div id="details"></div>
                    var wnd,
                    $(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" }]
                        wnd = $("#details")
                                title: "Customer Details",
                                modal: true,
                                visible: false,
                                resizable: false,
                                width: 300
                        detailsTemplate = kendo.template($("#template").html());
                    function showDetails(e) {
                        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
                <script type="text/x-kendo-template" id="template">
                    <div id="details-container">
                        <h2>#= FirstName # #= LastName #</h2>
                        <em>#= Title #</em>
                            <dt>City: #= City #</dt>
                            <dt>Birth Date: #= kendo.toString(BirthDate, "MM/dd/yyyy") #</dt>
                <style type="text/css">
                        padding: 10px;
                    #details-container h2
                        margin: 0;
                    #details-container em
                        color: #8c8c8c;
                    #details-container dt
                        display: inline;


  2. Preslav
    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:

    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:

    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