Kendo data-binding messes up the menu - kendo-ui
I am using Kendo UI for JQuery and need to create a data-bound Kendo menu. By data bound, I mean that the items need to be data bound to an array property of a Kendo observable. The issue is that it appears that MVVM binding messes up formatting and functionality of the items. Here is my code (based on the example found in Kendo's documentation) :
<div id="example">
<div class="demo-section k-content">
<div>
<h4>Select an item</h4>
<ul data-role="menu"
data-bind="events: { select: onSelect },
visible: isVisible"
style="width: 100%;">
<li>
Products
<ul data-template="menu-item-template" data-bind="source: items">
</ul>
</li>
</ul>
</div>
</div>
<script id="menu-item-template" type="text/x-kendo-template">
<li data-bind="text: text"></li>
</script>
<script>
var viewModel = kendo.observable({
isVisible: true,
items: ["Product1", "Product2", "Product3"],
onSelect: function (e) {
var text = $(e.item).children(".k-link").text();
kendoConsole.log("event :: select(" + text + ")");
}
});
kendo.bind($("#example"), viewModel);
</script>
<style>
.demo-section .box-col li {
margin-bottom: 0;
}
</style>
The result of executing this code looks like this:
Notice how the formatting of the items is messed up (no margins, etc.).
Do you know what's the proper way to combine data binding and Kendo menu?
Thank you!
Personally, I don't care for the MVVM style. It is too much boilerplate in my opinion.
Here is an example of setting up the menu by passing an object representing the various configuration values. Doing it like this, I do not get the same formatting issues that you get:
<!DOCTYPE html>
<html lang="en" xml:lang="en">
<head>
<title>user1044169 Example</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.default-ocean-blue.min.css" />
</head>
<body>
<ul id="menu"></ul>
<script src="https://kendo.cdn.telerik.com/2022.1.412/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.1.412/js/kendo.all.min.js"></script>
<script>
$(document).ready(function() {
$("#menu").kendoMenu({
dataSource: [
{
text: 'Products',
items: [
{ text: 'Product1' },
{ text: 'Product2' },
{ text: 'Product3' }
]
}
],
select: function(e) {
var text = $(e.item).children(".k-link").text();
console.log(text);
}
});
});
</script>
</body>
</html>
Related
Difficulty implementing Chart widget with Kendo UI
I'm creating a mobile app using KendoUI in the Telerik AppBuilder. I created a blank view to hold my chart and then went in to start adding the code. I cannot get the chart to appear.
These are the scripts referenced in my index.html:
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="app.js"></script>
<script src="lib/progress/progress.all.min.js"></script>
<script src="dataProviders/progressDataProvider.js"></script>
Here is the code of my chart view:
<div data-role="view" data-title="Audit Tracker" data-layout="main" data- model="app.auditTracker" data-show="app.auditTracker.onShow" data-after-show="app.auditTracker.afterShow">
<div id="chart">
</div>
</div>
And here is the code in the associated JavaScript file:
'use strict';
app.auditTracker = kendo.observable({
onShow: function () {},
afterShow: function () {}
});
(function(parent) {
$("#chart").kendoChart({
title: {
text: "Audit Tracker"
},
series: [
{name: "Audits Completed", data: [5,10,15,3]}
],
categoryAxis: {
categories: ["January", "February", "March", "April"]
}
});
})(app.auditTracker);
What am I doing wrong here? This seems like it should be simple!
Thanks in advance for the help.
My problem was that I did not have the correct framework files referenced in my index.html. Here are the files that I ended up using as far as the framework goes: <script src="cordova.js"></script> <script src="jquery.min.js"></script> <script src="kendo.all.min.js"></script> <link rel="stylesheet" href="kendo.common.min.css" /> <link rel="stylesheet" href="kendo.default.min.css" /> <link rel="stylesheet" href="kendo.mobile.all.min.css"/>
kendo ui autocomplete - json file datasource - template - 404 Not Found error - /undefined URL
Below code has been thankfully provided by machun for toggling between RTL and LTR directions in Kendo UI widgets.
The code consists of:
HTML:
kendo autocomplete form plus a button to activate support for RTL and LTR language.
Script:
k-rtl class container
datasource (json file)
kendo autocomplete widget initializing + template to show image beside data and to open data links in the same tab
k-rtl class
The problem is that links don't open correctly. It shows a 404 Not Found error plus a /undefined at the end of the URL.
Live demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
</head>
<body>
<div id="container">
<input type="button" id="toggleRTL" value="Activate RTL Support" class="k-button" />
<input id="autocomplete" type="text" />
</div>
</body>
</html>
<script>
/*------k-rtl class container----------*/
function createAutoComplete(){
if($("#autocomplete").data("kendoAutoComplete") != null){
$("#autocomplete").parent().remove();
$("#container").append("<input id='autocomplete' type='text' />")
}
/*------datasource (json file)---------*/
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "json.txt",
dataType: "json",
data: {
q: "javascript"
}
}
},
schema: {
data: "results"
}
});
/*------kendo autocomplete widget initializing + template to show image beside data and to open data links in the same tab----------*/
$("#autocomplete").kendoAutoComplete({
dataSource: dataSource,
dataTextField: "name",
template: '<span><img src="/kendo-autocomplete-test/img/#: id #.jpg" /></span>' + '<span data-href="#:link#">#:name#</span>',
select: function(e) {
var href = e.item.find("span").data("href");
location.assign(href);
}
});
}
/*------k-rtl class----------*/
createAutoComplete();
$('#toggleRTL').on('click', function(event) {
var form = $('#container');
console.log(form);
if (form.hasClass('k-rtl')) {
console.log("test1");
form.removeClass('k-rtl')
} else {
console.log("test2");
form.addClass('k-rtl');
}
createAutoComplete();
})
</script>
I advice to debug your function first then simply check the variable and make sure it contain the right thing. You overlooked a simple thing that your jquery dom selector isn't quite right resulting var href contain "undefined".
Change
var href = e.item.find("span").data("href");
To
var href = e.item.find("span[data-href]").attr("data-href");
Take a look here
display data from io.socket in Slickgrid
I receive data from io.socket and I would like to put the data in an array of object so this can be displayed in the slickgrid. For some reason the data pushed in the info is empty. Could somebody help me with this?
Thanks!!
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>SlickGrid</title>
<link rel="stylesheet" href="/slick.grid.css" type="text/css"/>
<link rel="stylesheet" href="/css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>
<link rel="stylesheet" href="/examples/examples.css" type="text/css"/>
</head>
<body>
<table width="100%">
<tr>
<td valign="top" width="50%">
<div id="myGrid" style="width:600px;height:500px;"></div>
</td>
<td valign="top">
<h2>Demonstrates:</h2>
<ul>
<li>basic grid with minimal configurations</li>
</ul>
<h2>View Source:</h2>
<ul>
<li> View the source for this example on Github</li>
</ul>
</td>
</tr>
</table>
<script src="/lib/jquery-1.7.min.js"></script>
<script src="/lib/jquery.event.drag-2.2.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/slick.core.js"></script>
<script src="./slick.grid.js"></script>
<script>
var grid;
var info;
var info= [];
var columns = [
{id: "completed", name: "completed", field: "completed"},
{id: "createdAt", name: "createdAt", field: "createdAt"},
{id: "id", name: "id", field: "id"},
{id: "title", name: "title", field: "title"},
];
var options = {
enableCellNavigation: true,
enableColumnReorder: false
};
jQuery(function($){
var socket = io.connect();
socket.on('new message', function(data){
$.each(data, function(idx, obj) {
info.push(obj);
});
})
});
grid = new Slick.Grid("#myGrid", info, columns, options);
</script>
</body>
</html>
When you update the data behind slickgrid you need to tell the grid to redraw with the new data:
socket.on('new message', function(data){
$.each(data, function(idx, obj) {
info.push(obj);
});
grid.invalidate(); // not 100% sure this is needed....
grid.render();
})
two jqgrid no data loaded
When I duplicate a working grid with a different id, data are not loaded in both grid.
Both grids are shown and they both query the same url. Json data is sent from php but data is not loaded into grid.
If i comment any of the grids, the other one loads data properly.
Any help greatly appreciated. I'm using jqgrid 4.4.1
Here is my code
<div class="row-fluid">
<script type="text/javascript" language="javascript">
function LoadgridInput () {
jQuery('#gridInput').jqGrid({
height:100,
hoverrows:false,
viewrecords:true,
caption:" ",cellEdit: true,rowNum:10000,
scroll:1,
rowList:[30,100,500],
datatype:"json",
url:"grid.php?sec=Agility&fn=gcSandFInput_V1",
cellurl:"grid.php?sec=Agility&fn=gcSandFInput_V1",
editurl:"grid.php?sec=Agility&fn=gcSandFInput_V1",
sortname:"default",
autowidth:true,
shrinkToFit:true,
gridview:false,
pager:"#gridInputPager",
postData:{oper:"grid"},
jsonReader:{repeatitems:false,root: "rows",page: "page",total: "total",records: "records",repeatitems: true,cell: "cell",id: "id",userdata: "userdata"},
colModel:[
{name:" ",index:"nope",align:"left",search:true,editable:false,width:60},{name:"04-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"05-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"06-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"07-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"08-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"09-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"10-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"11-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"12-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"01-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"02-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"03-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"04-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"05-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"06-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"07-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"08-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"09-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"10-2013",index:"nope",align:"left",search:true,editable:false,width:60 }]})
jQuery('#gridInput').jqGrid('navGrid','#gridInputPager',{refresh:true,edit:false,add:false,del:false,search:true,view:false,"excel":true,"pdf":false,"csv":false,"columns":false},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150,"errorTextFormat":function(r){ return r.responseText;}},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150,"errorTextFormat":function(r){ return r.responseText;}},{"errorTextFormat":function(r){ return r.responseText;}}, {"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150,"closeAfterSearch":true,"multipleSearch":false},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150});
};
</script>
<script type="text/javascript" language="javascript"> runOnLoad(LoadgridInput); </script>
<div id="gridInputWrapper">
<table id="gridInput"></table> <div id="gridInputPager"></div>
<div class="gridInputFooter"></div>
</div>
</div>
<div class="row-fluid">
<script type="text/javascript" language="javascript">
function LoadgridList () {
jQuery('#gridList').jqGrid({
height:100,
hoverrows:false,
viewrecords:true,
caption:" ",cellEdit: true,rowNum:10000,
scroll:1,
rowList:[30,100,500],
datatype:"json",
url:"grid.php?sec=Agility&fn=gcSandFInput_V1",
cellurl:"grid.php?sec=Agility&fn=gcSandFInput_V1",
editurl:"grid.php?sec=Agility&fn=gcSandFInput_V1",
sortname:"default",
autowidth:true,
shrinkToFit:true,
gridview:false,
pager:"#gridListPager",
postData:{oper:"grid"},
jsonReader:{repeatitems:false,root: "rows",page: "page",total: "total",records: "records",repeatitems: true,cell: "cell",id: "id",userdata: "userdata"},
colModel:[
{name:" ",index:"nope",align:"left",search:true,editable:false,width:60},{name:"04-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"05-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"06-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"07-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"08-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"09-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"10-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"11-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"12-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"01-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"02-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"03-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"04-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"05-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"06-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"07-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"08-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"09-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"10-2013",index:"nope",align:"left",search:true,editable:false,width:60 }]})
jQuery('#gridList').jqGrid('navGrid','#gridListPager',{refresh:true,edit:false,add:false,del:false,search:true,view:false,"excel":true,"pdf":false,"csv":false,"columns":false},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150,"errorTextFormat":function(r){ return r.responseText;}},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150,"errorTextFormat":function(r){ return r.responseText;}},{"errorTextFormat":function(r){ return r.responseText;}}, {"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150,"closeAfterSearch":true,"multipleSearch":false},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150});
};
</script>
<script type="text/javascript" language="javascript">runOnLoad(LoadgridList);</script>
<div id="gridListWrapper">
<table id="gridList"></table> <div id="gridListPager"></div>
<div class="gridListFooter"></div>
</div>
</div>
Kendo UI Mobile : Pull To refresh - list not displayed
Dynamic data is not appearing in the list. Data is fetched dynamically in jsonp format. When checked in Chrome developer tools i am able to see the response. Please find the code below. Can someone help me here ?
<!DOCTYPE html>
<html>
<head>
<title>Pull to refresh</title>
<script src="../../lib/jquery.min.js"></script>
<script src="../../lib/kendo.mobile.min.js"></script>
<link href="../../lib/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="../../lib/styles/kendo.common.min.css" rel="stylesheet" />
<div data-role="view" data-init="mobileListViewPullToRefresh" data-title="Pull to refresh">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
</div>
</header>
<ul id="pull-to-refresh-listview"></ul>
</div>
<script id="pull-to-refresh-template" type="text/x-kendo-template">
#= Title #
</script>
<script>
function mobileListViewPullToRefresh() {
var dataSource = new kendo.data.DataSource({
serverPaging: true,
pageSize: 1,
transport: {
read: {
url: "http://localhost/MvcMovieApp/Mobile/RestResponse", // the remove service url
dataType: "jsonp" // JSONP (JSON with padding) is required for cross-domain AJAX
},
parameterMap: function(options) {
alert(kendo.stringify(options));
return {
q: "javascript",
page: options.page,
rpp: options.pageSize
since_id: options.since_id //additional parameters sent to the remote service
};
}
},
schema: {
data: "movies" // the data which the data source will be bound to is in the "results" field
}
});
alert("Before kendoMobileListView");
$("#pull-to-refresh-listview").kendoMobileListView({
dataSource: dataSource ,
pullToRefresh: function(){ alert("dataSource"); return true },
appendOnRefresh: true,
template: $("#pull-to-refresh-template").text(),
endlessScroll: true,
pullParameters: function(item) {
return {
since_id: item.id_str,
page: 1
};
}
});
}
</script>
<script>
window.kendoMobileApplication = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
JSONP which i am receiving is :
({"movies":[{"ID":1,"Title":"Movie 1","ReleaseDate":"/Date(1355250600000)/","Genre":"Comedy","Price":10},{"ID":2,"Title":"Movie 2","ReleaseDate":"/Date(1355250600000)/","Genre":"Thriller","Price":10}]})
There must be a call back function name in the returned JSONP. The output I see here doesn't have any function name. You need to make changes to your server side code.