guys i am using jqgrid
and when i click on saveAllRows an error occurs which is Cannot read property 'errcap' of undefined .. here is my code for that button
function saveAllRows(){
var ids = $("#jqGrid").jqGrid('getDataIDs');
var i;
for (i = 0; i < ids.length; i++) {
$("#jqGrid").jqGrid('saveRow', ids[i]);
}
}
and here is what i included
<script type="text/ecmascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<!-- We support more than 40 localizations -->
<script type="text/ecmascript" src="resources/grid.locale-en.js"></script>
<!-- This is the Javascript file of jqGrid -->
<script type="text/ecmascript" src="resources/jquery.jqGrid.js"></script>
<!-- A link to a Boostrap and jqGrid Bootstrap CSS siles-->
<script type="text/ecmascript" src="resources/bootstrap-datepicker.js"></script>
<script type="text/ecmascript" src="resources/jquery.timepicker.js"></script>
<script type="text/ecmascript" src="https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-sliderAccess.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="resources/ui.jqgrid-bootstrap.css" />
<link rel="stylesheet" type="text/css" media="screen" href="resources/bootstrap-datepicker.css" />
<link rel="stylesheet" type="text/css" media="screen" href="resources/jquery.timepicker.css" />
<link rel="stylesheet" type="text/css" media="screen" href="resources/style.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
any help .. why that happens ??
The error
Cannot read property 'errcap' of undefined
means that the string like $.jgrid.defaults.errors.errcap, $.jgrid.locales["en-US"].errors.errcap or $.jgrid.regional.en.errors.errcap (dependent from the version and the fork of jqGrid which you use) is undefined. The problem can't exist if you would use free jqGrid because the required strings for en-US locale are defined in jquery.jqgrid.min.js. For example to use the latest free jqGrid 4.13.3 you need to include ui.jqgrid.min.css and jquery.jqgrid.min.js files
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.3/css/ui.jqgrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.3/js/jquery.jqgrid.min.js"></script>
which included all what you need.
If you use some old jqGrid, for example jqGrid 4.6 then you have to include grid.locale-en.js, which defines some language specific strings inclusive $.jgrid.defaults.errors.errcap. Then the list of included files should be the following
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
{ label: 'Date', name: 'Date', width: 150 , "formatter":"date",
editable: true,
edittype:"custom",
editoptions: {
autoclose: true,
autoOpen: false,
format: 'yyyy-mm-dd',
orientation : 'auto bottom',
showOn: 'both',
formatoptions :{"srcformat":"Y-m-d", "newformat":"m/d/Y"},
dataInit : function (elem) {
// $(elem).datepicker({autoclose: true});
//$(elem).datepicker('hide');
setTimeout(function(){
$(elem).datepicker({autoclose: true});
},10);
/*$(elem).on('changeDate', function(ev){
$(this).datepicker('hide');
});*/
},
custom_element: function(value, options) {
var parts = value.split(' ');
var elemStr = '<div><input size="6" id="txt_' +'" value="' + parts[0] +
'" /><input type="button" size="5" value="..."/></div>';
// return DOM element from jQuery object
return $(elemStr)[0];
},
custom_value: function(elem) {
var inputs = $("input", $(elem));
var first = inputs.value;
return first;
}
}
},
Related
I'm very new to coding and learning as I go.
My current conundrum: trying to create a multi-select list where the first three options selected (think course subjects, for example) would be free, but every additional selection thereon would carry a $200 fee, and the total would be displayed. Example:
Math - $0
English - $0
History - $0
Geography - $200
Art - $200
...until the end of the list. There's no limitation on how many options the use can select and no tie-in to a specific options; the first three are free regardless of which option is chosen.
I've been playing around with the W3 list code below because it fits the style of the rest of the form:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<h2> Select the Desired Activites </h2>
<!-- Essential JS 2 MultiSelect's dependent material theme -->
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" type="text/css" />
<!-- Essential JS 2 all script -->
<!-- <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script> -->
<!-- Essential JS 2 MultiSelect's dependent scripts -->
<script src="//cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
</head>
<body>
<!-- Add the HTML <input> element -->
<input type="text" tabindex="1" id='select' />
<script>
var sportsData = ['Math', 'English', 'History', 'Geography', 'Art'];
// initialize MultiSelect component
var listObj = new ej.dropdowns.MultiSelect({
dataSource: sportsData,
popupHeight: '200px',
//set width to popup list
popupWidth: '250px',
// set placeholder to MultiSelect input element
placeholder: "Activity"
});
listObj.appendTo('#select');
</script>
</body>
</html>
You can count how many items are in the listObj.value from tagging and removed events:
#priceList
{
white-space: pre;
}
#priceList
{
display: inline-flex;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Essential JS 2 MultiSelect's dependent material theme -->
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" type="text/css" />
<!-- Essential JS 2 all script -->
<!-- <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script> -->
<!-- Essential JS 2 MultiSelect's dependent scripts -->
<script src="//cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
</head>
<body>
<h2> Select the Desired Activites </h2>
<!-- Add the HTML <input> element -->
<input type="text" tabindex="1" id='select' />
<div class="priceListBox">Price per item: <span id="priceList"></span></div>
<div>Price total: <span id="price">0</span></div>
<script>
var sportsData = ['Math', 'English', 'History', 'Geography', 'Art'];
// initialize MultiSelect component
var listObj = new ej.dropdowns.MultiSelect({
dataSource: sportsData,
popupHeight: '200px',
//set width to popup list
popupWidth: '250px',
// set placeholder to MultiSelect input element
placeholder: "Activity",
//event listeners
tagging: getPrice, //item added
removed: getPrice //item removed
});
listObj.appendTo('#select');
//event handler
function getPrice()
{
let price = 0;
if (listObj.value.length > 3)
price = (listObj.value.length - 3) * 200;
//display total price
document.getElementById("price").textContent = price;
let priceList = [];
for(let i = 0; i < listObj.value.length; i++)
{
priceList.push(listObj.value[i] + " = " + (i > 2 ? 200 : 0));
}
//display prices for each item
document.getElementById("priceList").textContent = priceList.join("\n");
}
</script>
</body>
</html>
I don't know if this is what you want, but you could do an event listener on the tagging event, and then do the calculation with the selected tag length.
var sportsData = ['Math', 'English', 'History', 'Geography', 'Art'];
// initialize MultiSelect component
var listObj = new ej.dropdowns.MultiSelect({
dataSource: sportsData,
popupHeight: '200px',
//set width to popup list
popupWidth: '250px',
// set placeholder to MultiSelect input element
placeholder: "Activity"});
// Listen on tagging event and execute the function to calculate.
listObj.tagging = function () {
var selectedTags = listObj.value;
if (selectedTags.length > 3) {
var total = (selectedTags.length - 3) * 200;
alert('$' + total);
}
}
listObj.appendTo('#select');
I hope this helps you getting on your way.
From the documentation, you can read the following about the dropdown, and it's listObj:
change
Event
Triggers when an item in a popup is selected or when the model value is changed by user. Use change event to Configure the Cascading DropDownList
They also provide an example. So I added that to your code, by adding an 'change' property to your listObj, and then print the cost through valueChanged().
NOTE: you need to select some activities, and then click somewhere else that's not the dropdown to see the price.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<h2> Select the Desired Activites </h2>
<!-- Essential JS 2 MultiSelect's dependent material theme -->
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" type="text/css" />
<!-- Essential JS 2 all script -->
<!-- <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script> -->
<!-- Essential JS 2 MultiSelect's dependent scripts -->
<script src="//cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
</head>
<body>
<!-- Add the HTML <input> element -->
<input type="text" tabindex="1" id='select' />
<script>
var sportsData = ['Math', 'English', 'History', 'Geography', 'Art'];
// initialize MultiSelect component
var listObj = new ej.dropdowns.MultiSelect({
dataSource: sportsData,
popupHeight: '200px',
//set width to popup list
popupWidth: '250px',
// set placeholder to MultiSelect input element
placeholder: "Activity",
// ADDED
change: (event) => { valueChanged(event.value) }
});
listObj.appendTo('#select');
// ADDED
function valueChanged(valueArr) {
let price = 0,
maxFreeActivities = 3,
costPerActivity = 200,
numberOfSelectedActivities = valueArr.length;
if (numberOfSelectedActivities > maxFreeActivities) {
price = (numberOfSelectedActivities - maxFreeActivities) * costPerActivity;
}
console.log('price:', price);
}
</script>
</body>
</html>
I have seen the programmatic example here:
http://jsfiddle.net/8azsz/2/
var fp;
require(["dojo/ready", "dojo/parser", "dojo/on","dojox/layout/FloatingPane", "dijit/form/Button"], function(ready, parser, on, FloatingPane, Button) {
ready(function() {
parser.parse();
fp = new FloatingPane({
title: "Test",
resizable: true,
dockable: false,
style:"position:absolute;top:0;left:0;width:100px;height:100px;visibility:hidden;",
id: "fp"
}, dojo.byId("fp"));
fp.startup();
on(fp._resizeHandle, "resize", function(e) {
// Event handler
console.log("test");
});
});
});
The question is, how do i do this when i am using a declarative method of creating the floatingpane?
You can use dojo declarative scripting example.
See https://dojotoolkit.org/documentation/tutorials/1.10/declarative/
Specially section "Modifying Behavior"
You will need something like :
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="parseOnLoad:true"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/dijit.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/layout/resources/FloatingPane.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/layout/resources/ResizeHandle.css">
<div id="floatingPane" data-dojo-type="dojox/layout/FloatingPane"
data-dojo-props="title: 'Hello World!',resizable:true,dockable: false">
<p>I am a floating pane. That makes me happy See browser console for the resize event.</p>
<script type="dojo/aspect" data-dojo-advice="after" data-dojo-event="resize">
console.log("resize is executed");
</script>
</div>
Ive got some problem with my jquery function. First of all, this is my HTML head
<link href="css/bootstrap.css" media="screen" rel="stylesheet">
<link href="css/datepicker.css" media="screen" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap-datepicker.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.js" type= 'text/javascript'></script>
<script src="js/bootstrap-tooltip.js" type= 'text/javascript'></script>
<script src="js/buttons.js"></script>
and here is the code from my button.js file
$(window).load(
function(){
...
$(document).on('click', '.popover a', function(){
alert("asd");
});
$('#button_nowtime').popover({
trigger: 'click',
html: 'true',
title: "<b>Čas</b>",
content:
function() {
var returnstring="",button;
for(var i=0; i<files.length; i++){
button = document.createElement("a");
button.innerText = "someText"
button.href="#";
returnstring+=button.outerHTML;
}
return returnstring;
}
});
}
);
html
<a href="#" id="button_nowtime" class="btn btn-lg btn-danger" data-placement="bottom" data-toggle="popover" title="" >N/A</a>
the problem is, the alert("asd") wont pop up when I click on any button in the tooltip
You should use $.ready instead of window.load, probabily your code doesn't work because window.load occurs before your objects exist. http://www.dotnetbull.com/2013/08/document-ready-vs-window-onload.html
This sample works http://jsfiddle.net/nWKqt/
[ignore this - just including a code block so stackoverflow will let me post the above JSFiddle link. Yeah, seriously.]
Also, you wrote a code that depends on a class that is defined not by you but from a jquery plugin, which you fire after you declared the events.
Try to put the click event after you declared the popover plugin, but better would be to define your cssClass and depend on it.
Why dont use this:
$(".popover a").click( function(){
alert("asd");
});
the old method works fine ..
I am new into web devlopment. I am trying to use select2-bootstrap. It working fine. Just need a css help.
Initial display of widget :
There is an indent between the bars(between Search for a movie and No matches found)
After clicking on the widget it looks fine as shown here and thereafter the dent disappears even on subsequent use.
Can someone suggest how to remove the dent between two bars in the first pic above.
NOTE :
CSS Added : select2.css, select2-bootstrap.css and bootstrap.css
JS Added : bootstrap.js, jquery-1.9.1.js, select2.js
Also please suggest how to avoid the No matches found display immediately after page loads.
Here is the code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Twitter Bootstrap</title>
<link rel="stylesheet" type="text/css" media="screen"
href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="css/select2.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="css/select2-bootstrap.css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/select2.js"></script>
<script type="text/javascript">
var contextPath = "<%=request.getContextPath()%>";
$(document)
.ready(
function() {
MultiAjaxAutoComplete('#e6',contextPath + "/getData");
$('#save').click(function() {
alert($('#e6').val());
});
});
</script>
<script type="text/javascript">
function MultiAjaxAutoComplete(element, url) {
$(element).select2({
placeholder : "Search for a movie",
//minimumInputLength : 1,
multiple : true,
ajax : {
url : url,
dataType : 'json',
data : function(term, page) {
return {
q : term,
page_limit : 10,
};
},
results : function(data, page) {
console.log("page = " + page);
return {
results : data.results
};
}
},
formatResult : formatResult,
formatSelection : formatSelection,
initSelection : function(element, callback) {
var data = [];
$(element.val().split(",")).each(function(i) {
var item = this.split(':');
data.push({
id : item[0],
country : item[1]
});
});
callback(data);
}
});
};
function formatResult(movie) {
return '<div>' + movie.country + '</div>';
};
function formatSelection(data) {
return data.country;
};
</script>
</head>
<body style="background-color: #F9F9F6">
<h1>Serach Movies</h1>
<div class="container-fluid">
<div class="row-fluid">
<div class="span9">
<input type='hidden' id="e6" class="span8" />
</div>
<div class="span3">
<button id="save">Save</button>
</div>
</div>
</div>
</body>
</html>
I am new to kendo ui mvvm and am facing the follow issue:
Scenario
I need to populate few fields in a div whose role is a listview, using the MVVM format.
The data comes from the dataSource and I am getting an unusual error. I am unable to bind the fields from the data source to the div.
Follow is my JSBin Sample: http://jsbin.com/ajoyug/6/edit
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="myListView" data-role="listView" data-bind="source:dataSource">
<span data-bind="text:prodName"></span>
<span data-bind="text:qty"></span>
<span data-bind="text:total"></span>
<span data-bind="text:price"></span>
</div>
</body>
</html>
JavaScript:
$(document).ready(function(){
var data = [
{
"Id":1,
"img":"../public/images/product/shoes.png",
"code":"00021543",
"fullProdName":"Jimmy Choo - Simone Pump Shoes",
"prodName":"Simone Pump Shoes",
"description":"A perfect Red carpet companion. Jimmy Choo shoes spells success and glamour. Be the talk of the town...",
"price":"1500.0",
"total":"1500.0",
"qty":"1",
"discount":"0.00",
"brand":"Jimmy Choo",
"category":"Shoes",
"points":"100",
"tax":"0.00" }
];
var dataSource = new kendo.data.DataSource({
data: data,
pagesize: 10,
schema: {
model: {
id: "Id",
fields: {
prodName: { editable: false},
qty: { editable: true},
price: { editable: false},
total : {editable :false}
}
}
}
});
dataSource.read();
var listViewModel = kendo.observable({
dataSource:dataSource
});
kendo.bind($("#myListView"), listViewModel);
});
Kindly help me out. I saw many samples available online, but they used templates to bind multiple values or they were'nt suiting my requirement..Hence I thought of creating my own JSBin Sample and ask where am I getting stuck...
Questions
How shall I bind the fields from a dataSource?
My end motive is to bind the div with the values in the dataSource..Is there any other method to do that if not setting it as a listview?
Thanks!!
Hardik
Your JavaScript looked good. You had some problems with your HTML though. The data-role attribute needs to be "listview". Rather than putting 4 spans inside your listview div, you should really use a template, and reference it by ID.
It's also important to note that your template must have a root element, because kendo only performs binding on the first element in the template.
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<script id="tmp" type="text/x-kendo-template">
<div>
<span data-bind="text:prodName"></span><br/>
<span data-bind="text:qty"></span><br/>
<span data-bind="text:total"></span><br/>
<span data-bind="text:price"></span>
</div>
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div
id="myListView"
data-role="listview"
data-bind="source: dataSource"
data-template="tmp">
</div>
</body>
</html>
JavaScript:
$(document).ready(function(){
var data = [
{
"Id":1,
"img":"../public/images/product/shoes.png",
"code":"00021543",
"fullProdName":"Jimmy Choo - Simone Pump Shoes",
"prodName":"Simone Pump Shoes",
"description":"A perfect Red carpet companion. Jimmy Choo shoes spells success and glamour. Be the talk of the town...",
"price":"1500.0",
"total":"1500.0",
"qty":"1",
"discount":"0.00",
"brand":"Jimmy Choo",
"category":"Shoes",
"points":"100",
"tax":"0.00" }
];
var dataSource = new kendo.data.DataSource({
data: data,
pagesize: 10,
schema: {
model: {
id: "Id",
fields: {
prodName: { editable: false},
qty: { editable: true},
price: { editable: false},
total : {editable :false}
}
}
}
});
var listViewModel = kendo.observable({
dataSource:dataSource
});
kendo.bind($("#myListView"), listViewModel);
});