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

Issue with showing menu inside grid cell

2 Answers 501 Views

Grid

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

Santosh asked on 03 May 2012, 03:42 PM

kendoMenuIssue.png

I want to show menu inside one of the grid column, for all the rows.
Please see below my code (modified kendo row template example). This is displaying menu inside cell,
but when i expand it, it is not completely visible. Onlu the part of menu which fits in row height is visible
Please see attached screen shot

<!DOCTYPE html>
<html>
<head>
<title>Row template</title>
<script src="../../../js/jquery.min.js"></script>
<script src="../../../js/kendo.web.min.js"></script>
<script src="../../content/shared/js/console.js"></script>
<link href="../../../styles/kendo.common.min.css" rel="stylesheet" />
<link href="../../../styles/kendo.default.min.css" rel="stylesheet" />
</head>
<body>
<a href="../index.html">Back</a>
<div id="example" class="k-content">
<table id="netflixTable">
<thead>
<tr>
<th>
Cover
</th>
<th>
Title
</th>
<th>
Rating
</th>
<th>
Actions
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3"></td>
</tr>
</tbody>
</table>
<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr>
<td>
<img src="${ BoxArt.SmallUrl }" alt="${ Name }" />
</td>
<td>
${ Name }
</td>
<td>
${ AverageRating }
</td>
<td>
<ul id="menu">
<li>Actions
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
<li>Eleven</li>
</ul>
</li>
</ul>
</td>
</tr>
</script>
<script>
$(document).ready(function() {
$("#netflixTable").kendoGrid({
dataSource: {
type: "odata",
serverFiltering: true,
filter: [{
field: "Name",
operator: "contains",
value: "Star Wars"
},{
field: "BoxArt.SmallUrl",
operator: "neq",
value: null
}],
transport: {
read: "http://odata.netflix.com/Catalog/Titles"
}
},
rowTemplate: kendo.template($("#rowTemplate").html()),
height: 600,
dataBound: function(e) {
// handle event
$("#menu").kendoMenu();
}
});
});
</script>
</div>

</body>
</html>

2 Answers, 1 is accepted

Accepted

answered on 03 May 2012, 04:02 PM

Hello Santosh,

Grid table cells have an overflow:hidden style applied by default. You can override it with

.k-grid tr td

{

overflow:visible;

}

By the way, you can't use IDs in a repeating template, because they will repeat as well, resulting in invalid HTML markup.

Finally, you can also use a column template instead of a row template:

var grid = $("#netflixTable").kendoGrid({

/*..*/

columns: [

/*..*/

{

title: "Column Title",

width: "100px",

template: '<ul class="menu"><li>.........</li></ul>'

}]

});

Regards,
Dimo
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!