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 901 Views

Grid

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

Paolo asked on 19 Apr 2017, 11:13 AM

cattura.png

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

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.