Why don't I see anything in my view?
console.log(d); outputs this ...
[{"id":1,"name":"a","age":1,"photo":"","group":"A"},
{"id":5,"name":"alan","age":22,"photo":"","group":"A"},
{"id":3,"name":"b","age":2,"photo":"","group":"B"},
{"id":2,"name":"c","age":3,"photo":"","group":"C"},
{"id":4,"name":"graham","age":43,"photo":"","group":"G"}]
Code: show
console.log(d);
$("#customers-group").kendoMobileListView({
dataSource: kendo.data.DataSource.create({data: d, group: "group"}),
template: "${name}",
fixedHeaders: true
});
View
<div data-role="view" id="customers" data-title="My Data" data-layout="layout-customers" data-show="show">
<ul id="customers-group"></ul>
</div>
Make sure that you are working with kendo latest version. because kendo latest version will support grouping, fixed header concept..
Your code is working well.
click
here for working sample
Related
Is there a way to make mouseover work with v-system-nav? I have the following fiddle which demonstrates my issue:
https://jsfiddle.net/6dqfz3j2/1/
<div>
<div id="content">
<v-card #mouseover="abc">Mouseover this and look at the console. Mouseover works!</v-card>
<v-system-bar #mouseover="abc">Mouseover this and look at the console. Mouseover does not work!</v-system-bar>
</div>
</div>
...
methods: {
abc() {
console.log('hi');
},
},
Is it a bug? Is there some property I can overwrite to make it work?
Thanks!
Got it. It needs to be #mouseover.native="abc" for the v-system-nav
I want to display name and id filed in kendo treeview. the below one is not working
$("#trainingtreelist").kendoTreeView({
dataTextField:"name"+"id",
dataSource: data
});
I have prepared a simple dojo for you showing you how to template the items being displayed in the treeview.
https://dojo.telerik.com/IsUZewoX
the important thing to look at here is the config of the treeview:
$("#treeview").kendoTreeView({
template: kendo.template($("#treeview-template").html()),
dataSource: ...remove for brevity
});
then using the template outlined here:
<script id="treeview-template" type="text/kendo-ui-template">
#: item.text # <span style="border:1px solid black; margin:3px;padding:10px; font-weight:bold; "> #:item.id#</span>
# if (!item.items) { #
<a class='k-icon k-i-close-outline' href='\#'></a>
# } #
</script>
we can restyle the items how we like. I have simply taken the demo templating example from: https://demos.telerik.com/kendo-ui/treeview/templates and added the id and styled that so it is noticeable (contained in the bordered box).
The existing solution for dropdownlist:
<input id="countryid" name="countryid"
data-role="dropdownlist"
data-text-field="text"
data-value-field="value"
data-bind="value: countryid"
data-source="CountryidNameList"
data-auto-bind="true"
data-bound="updateModel"
data-value-primitive="true"/>
function updateModel(e) {
var widget = e.sender;
setTimeout(function() {
widget.trigger("change");
});
};
when we migrate to new version of Kendo UI 2015 (commercial version), the above solution does not work any more:
for form, the dropdownlist does not set the first value of the dropdownlist any more;
for kendo-grid (change the input, but still use the updateModel function), in edit mode: the dropdownlist is showing a loading icon (there is no error and the value is loaded in the dropdownlist while click)
anyone can help?
Well you can modify your kendo element a bit as:
<input id="countryid"
name="countryid"
data-text-field="text"
data-value-field="value"
data-option-label="Select Country..."
data-bind="source: CountryidNameList,value:countryid" data-role="dropdownlist"
></input>
and do the source binding from javascript. Have done a JSBin for your issue here. Hope you find it useful!
I copying the sample from Kendo Adaptive Widget page directly and it doesnt work I keep getting this error
Uncaught TypeError: Object [object Object] has no method 'kendoScheduler''
this is my view
<div data-role="view" id="barberDashboard" data-layout="default" class="signup-view" data-model="app.BarberDashboard" data-init="app.BarberDashboard.init"><!-- data-show="app.BarberDashboard.show" data-hide="app.BarberDashboard.hide">-->
<header data-role="header">
<div data-role="navbar">
Dashboard
<a class="nav-button nav-button-back hide-text" data-align="left" data-role="backbutton" href="#welcome">Back</a>
</div>
</header>
<div id="scheduler"></div>
</div>
and this is my js to set the init() method
var barberDashboardViewModel = (function () {
var init = function initScheduler() {
$("#scheduler").kendoScheduler({
date: new Date("2013/6/26"),
startTime: new Date("2013/6/26 07:00 AM"),
height: kendo.support.mobileOS.wp ? "28em" : 600,
views: [
.... Shortened for beravity
but it never works. I have the lasted kendo.mobile.min.js and related css added to the project.
i have tried this in several projects and versions and have never gotten it to work. I don't see what the problem is.
The Scheduler itself is part of the Kendo UI Web suite - you need to use kendo.all.min.js to get it working as a mobile adaptive widget.
I would like to know how to modify the example grouped listview that comes with kendo mobile.
The list view shows both flat view and grouped view. How do you make the items in the list view clickable so they will navigate to a different web page when clicked?
I've tried creating a template with an anchor tag and href and it works in IE but does nothing when clicked on the android phone.
//The Template
<script type="text/x-kendo-tmpl" id="template">
<div class="myclass">
#:name#
</div>
</script>
//The data binding
function mobileListViewDataBindInitGrouped() {
$("#grouped-listview").kendoMobileListView({
dataSource: kendo.data.DataSource.create({ data: groupedData, group: "letter" }),
template: kendo.template($("#template").html()),
fixedHeaders: true
});
}
Thanks
After some trial and error I have found that if i remove the div tag in the template, the anchor tags work correctly. Not sure if this is a bug or by design.
Thanks Whizkid747 for your help.
//Updated Template (removed <div>)
<script type="text/x-kendo-tmpl" id="template">
#:name#
</script>