Hello guys,
I have made only 2 changes to selection.html from listView demos.
1. Changed the theme to kendo.metro.min.css
2. Added background-color property to product class.
Now when I select an item it does not get highlighted. This problem does not occur for default theme. Am i doing something wrong here or is this a known issue? Either way I'm looking for a solution or workaround. Any help will be really appreciated.
Thanks in advance.
I have made only 2 changes to selection.html from listView demos.
1. Changed the theme to kendo.metro.min.css
2. Added background-color property to product class.
Now when I select an item it does not get highlighted. This problem does not occur for default theme. Am i doing something wrong here or is this a known issue? Either way I'm looking for a solution or workaround. Any help will be really appreciated.
Thanks in advance.
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Selection</
title
>
<
link
href
=
"../../content/shared/styles/examples-offline.css"
rel
=
"stylesheet"
>
<
link
href
=
"../../../styles/kendo.common.min.css"
rel
=
"stylesheet"
>
<
link
href
=
"../../../styles/kendo.metro.min.css"
rel
=
"stylesheet"
>
<
script
src
=
"../../../js/jquery.min.js"
></
script
>
<
script
src
=
"../../../js/kendo.web.min.js"
></
script
>
<
script
src
=
"../../content/shared/js/console.js"
></
script
>
<
script
>
</
script
>
</
head
>
<
body
>
<
a
class
=
"offline-button"
href
=
"../index.html"
>Back</
a
>
<
div
id
=
"example"
class
=
"k-content"
>
<
div
class
=
"demo-section"
>
<
h2
>Products</
h2
>
<
div
id
=
"listView"
></
div
>
<
div
id
=
"pager"
class
=
"k-pager-wrap"
> </
div
>
</
div
>
<
div
class
=
"demo-section"
>
<
h2
>Console Log</
h2
>
<
div
class
=
"console"
></
div
>
</
div
>
<
script
type
=
"text/x-kendo-tmpl"
id
=
"template"
>
<
div
class
=
"product"
>
<
img
src
=
"../../content/web/foods/#:ProductID#.jpg"
alt
=
"#:ProductName# image"
/>
<
h3
>#:ProductName#</
h3
>
</
div
>
</
script
>
<
script
>
$(document).ready(function() {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
dataType: "jsonp"
}
},
pageSize: 9
});
$("#pager").kendoPager({
dataSource: dataSource
});
$("#listView").kendoListView({
dataSource: dataSource,
selectable: "multiple",
dataBound: onDataBound,
change: onChange,
template: kendo.template($("#template").html())
});
function onDataBound() {
kendoConsole.log("ListView data bound");
}
function onChange() {
var data = dataSource.view(),
selected = $.map(this.select(), function(item) {
return data[$(item).index()].ProductName;
});
kendoConsole.log("Selected: " + selected.length + " item(s), [" + selected.join(", ") + "]");
}
});
</
script
>
<
style
>
.demo-section {
padding: 15px;
width: 692px;
}
.demo-section h2 {
font-size: 1.2em;
margin-bottom: 10px;
text-transform: uppercase;
}
.demo-section .console {
margin: 0;
}
.product
{
background-color: #cccccc;
float: left;
width: 220px;
height: 110px;
margin: 0;
padding: 5px;
cursor: pointer;
}
.product img
{
float: left;
width: 110px;
height: 110px;
}
.product h3
{
margin: 0;
padding: 10px 0 0 10px;
font-size: .9em;
overflow: hidden;
font-weight: normal;
float: left;
max-width: 100px;
text-transform: uppercase;
}
.k-listview:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.k-listview
{
padding: 0;
min-width: 690px;
min-height: 360px;
}
</
style
>
</
div
>
</
body
>
</
html
>