Login / Join
Add/Edit Data: KendoUI Local Datasource
submitted on 18/11/2013 by
Codicode
+ infos
Config
Embed
Share
Add/Edit Data: KendoUI Local Datasource
by
Codicode
CRUD, Editing and adding rows to a Kendo Ui local datasource.
this Kendoui grid example will display/update the new data after each crud change.
Framework 1 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
Framework 2 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
+ Js file(s) :
http://cdn.kendostatic.com/2014.2.903/js/kendo.web.min.js http://cdn.kendostatic.com/2014.2.903/js/kendo.aspnetmvc.min.js
+ Css file(s) :
http://cdn.kendostatic.com/2014.2.903/styles/kendo.common.min.css http://cdn.kendostatic.com/2014.2.903/styles/kendo.default.min.css
Apply
Link :
Direct http link :
Fork button :
Html code :
Embed preview :
Copy the following html code to your page to embed the preview,
To include many previews on a single page, just repeat the first line.
You can change the width, height and border color (bcolor).
<div class="refork-widget" code="c60" style="width:100%;height:200px;" bcolor="#ccc"></div>
<script type="text/javascript" src="//snippet.run/d/z.js"></script>
HTML
<div id="kid"></div> <br><br> <b>Current data :</b> <span id="infos"></span>
CSS
body { background-color:#fff; }
Javascript
var docLines = [{"id":"id001","aname":"Article n°2","price":1222,"qty":3},{"id":"id002","aname":"Article n°1","price":120,"qty":9}]; var counter = docLines.length; var ds = new kendo.data.DataSource({ transport: { read: function (o) {o.success(docLines);}, create: function (o) { var item = o.data; item.id = counter++; o.success(item); }, update: function (o) { o.success(); }, destroy: function (o) { o.success(); } }, schema: { model: { id:"id", fields: { aname: { validation: { required: true } }, price: { type: "number", validation: { min: 0, required: true } }, qty: { type: "number", validation: { min: 0, required: true } } } } }, change: function (e) { // if (e.action === "add") { kendo.data.ObservableObject.fn.set.call(e.items[0], "id", "gen" + Date.now()); } $("#infos").text(JSON.stringify(e.sender._data)); } }); $("#kid").kendoGrid({ dataSource: ds, pageable: false, toolbar: ["create"], editable: "popup", columns: [ { field: "aname", title: "Article" }, { field: "price", title: "Prix", format: "{0:c}", width: "100px" }, { field: "qty", title: "Quantité", width: "100px" }, { command: ["edit", "destroy"], title: "&nbsp;", width: "180px" } ] });
©2013 Copyright snippet.run
Privacy
-
Terms of use
-
About
-
Contact