When using the Nova theme locked command columns are not styled correctly

Progress® Kendo UI® for jQuery Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 13 Jan 2020 09:22 by ADMIN

Release R1 2020

Denny

Created on: 28 Aug 2019 17:45

Category: Grid

Type: Bug Report

When using the Nova theme locked command columns are not styled correctly

When using the Nova theme locked command columns are not styled correctly.
In the following dojo one command column is locked and not styled while another command column is not locked but styled correctly.
https://dojo.telerik.com/eWECAZEw

Here's the code in case the dojo doesn't work:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.nova.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.mobile.all.min.css">

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>
</head>
<body>

<div id="grid"></div>
<script>
var dataSource = new kendo.data.DataSource({
data: [
{ category: "category 1", subCategory: "sub. category 1", name: "product 1", val: 1 },
{ category: "category 1", subCategory: "sub. category 1", name: "product 2", val: 1 },
{ category: "category 1", subCategory: "sub. category 1", name: "product 3", val: 1 },
{ category: "category 1", subCategory: "sub. category 1", name: "product 4", val: 1 },
{ category: "category 1", subCategory: "sub. category 2", name: "product 5", val: 1 },
{ category: "category 1", subCategory: "sub. category 2", name: "product 6", val: 1 },
{ category: "category 1", subCategory: "sub. category 2", name: "product 7", val: 1 },
{ category: "category 1", subCategory: "sub. category 2", name: "product 8", val: 1 },
{ category: "category 1", subCategory: "sub. category 3", name: "product 9", val: 1 },
{ category: "category 1", subCategory: "sub. category 3", name: "product 10", val: 1 },
{ category: "category 1", subCategory: "sub. category 3", name: "product 11", val: 1 },
{ category: "category 1", subCategory: "sub. category 3", name: "product 12", val: 1 },
]
});

$("#grid").kendoGrid({
columns: [
{ command: "edit", locked: true, width: 150 }, // <<-- columns is locked
{ field: "category", locked: true, width: 150 }, // <<-- columns is locked
{ command: "edit", width: 150 },
{ field: "subCategory", width: 200 },
{ field: "name", width: 500 }
],
dataSource: dataSource,
scrollable: true,
selectable: "row"
});
</script>
</body>
</html>

1 comment

ADMIN

Viktor Tachev

Posted on: 04 Sep 2019 12:03

Hello Denny,

Thank you for bringing the behavior to our attention. I have logged it in our GitHub repository as well and you can monitor the status of the issue.

Until a fix is available I suggest including the following styles as a workaround:

.k-grid-content-locked .k-button{
	color: #ff4350;
	border-color: transparent;
	background-color: transparent;
}

.k-grid-content-locked .k-button-icontext .k-icon {
	display: none;
}

You can see the updated dojo below. Note that the Nova theme requires the common-nova.css file so that the rest of the styles look as expected.

https://dojo.telerik.com/eWECAZEw/4

As a token of gratitude for bringing the issue to our attention I have updated your Telerik points.

Regards,
Viktor Tachev
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.