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> <base href="http://demos.telerik.com/kendo-ui/grid/custom-command"> <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> <title></title> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.common.min.css" /> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.blueopal.min.css" /> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.blueopal.mobile.min.css" /> <script src="https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js"></script> <script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script></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
0
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:
Additionally, a runnable Dojo is available here: http://dojo.telerik.com/OREQU
Regards,
Preslav
Telerik by Progress
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.