This is a migrated thread and some comments may be shown as answers.

setting className con custom command put CSS class on wrong element

1 Answer 761 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Paolo asked on 19 Apr 2017, 11:13 AM

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;


1 Answer, 1 is accepted

Sort by
Telerik team
answered on 20 Apr 2017, 02:53 PM
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.
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question