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 91 Views
This is a migrated thread and some comments may be shown as answers.
Paolo
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>
<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>

 

1 Answer, 1 is accepted

Sort by
0
Preslav
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:

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.
Tags
Grid
Asked by
Paolo
Top achievements
Rank 1
Answers by
Preslav
Telerik team
Share this question
or