I am trying to bind kendo UI datagrid to my azure backend mobile services table (SASA) following this tutorial.
http://ignaciofuentes.com/archive/2014/01/20/zumo-kendo/
but unfortunately for some reasons it is not working. I have tried updating the mobile services javascript sdk from 1.0.0 to 1.1.5 still with no luck.
Here is my code.. can anyone point out what am I doing wrong.. the service is returning proper JSON..
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/everlive">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
var client = new WindowsAzure.MobileServiceClient("MY SERVICE URL", "MY API KEY");
var table = client.getTable("sasa");
var dataSource = new kendo.data.DataSource({
transport: {
read: function (options) {
table.includeTotalCount() //necessary for grid to paginate
.read()
.done(options.success);
},
update: function (options) {
table.update(options.data)
.done(options.success);
},
create: function (options) {
var item = options.data;
delete item.id; //ZUMO doesnt allow you to set your own ID. It gets auto generated.
table.insert(item)
.done(options.success);
},
destroy: function (options) {
table.del(options.data)
.done(options.success);
}
},
pageSize: 10,
schema: {
total: "totalCount",
model: {
id: "id",
fields: {
id: { type: "number" },
name: { type: "string" },
developer: { type: "string" },
}
}
}});
$("#grid").kendoGrid({
pageable: true,
dataSource: dataSource,
columns: [
"name",
"developer", {
command: [{
name: "edit",
text: "Edit"
}, {
name: "destroy",
text: "Delete"
}]
}],
toolbar: [{
name: "create"
}],
editable: "inline"
});
});
</script>
</div>
</body>
</html>
On a test I did a while back using a kendo datasource and a windows azure mobile service, my dataSource CRUD methods were a bit different.
create: function(options) {
delete options.data.id;
client.getTable("Customer").insert(options.data).done(function(data) {
options.success(data);
});
},
read: function(options) {
client.getTable("Customer").read().done(function(data) {
options.success(data);
});
},
update: function(options) {
client.getTable("Customer").update(options.data).done(function(data) {
options.success(data);
});
},
destroy: function(options) {
client.getTable("Customer").del(options.data).done(function(data) {
options.success(data);
});
}
And it worked properly. Perhaps try changing the .done(options.success); to
.done(function(data) {
options.success(data);
});
And see if it works ?
--edit I rebuilt my MobileService I used to test with and dug up the code, it still works properly. Here is the sample at jsbin http://jsbin.com/jirexo/2/edit
Related
I have a grid that has a grid in the detailInit and when I add a new row to the grid in the detailInit the detailInit collapses.
How can I stop it from collapsing when a new record is added? I have tried using e.preventDefault() on the button click event of adding a new row but that didn't work out.
You cannot prevent it from collapsing because every time you change something to the data it automatically rebinds and redraw the table.
What you can do however is to capture the rebinding, find the opened details and after the binding finish reopen them:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
let data = [{id: 1, FirstName: "Nancy", LastName: "Davolio", orders: [{title: 1}, {title: 2}]}];
$(document).ready(function () {
let expanded = [];
var element = $("#grid").kendoGrid({
dataSource: data,
toolbar: [{name: "create"}],
height: 600,
detailInit: detailInit,
editable: true,
columns: [
{
field: "id",
title: "id",
},
{
field: "FirstName",
title: "First Name",
width: "110px"
},
{
field: "LastName",
title: "Last Name",
width: "110px"
},
{command: ["destroy"]},
],
dataBinding: function (e) {
expanded = $.map(this.tbody.children(":has(> .k-hierarchy-cell .k-i-collapse)"), function (row) {
return $(row).data("uid");
});
},
dataBound: function (e) {
this.expandRow(this.tbody.children().filter(function (idx, row) {
return $.inArray($(row).data("uid"), expanded) >= 0;
}));
},
});
});
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
transport: {
read: function (options) {
options.success(e.data.orders);
},
}
},
});
}
</script>
</div>
</body>
</html>
I have implemented kendo grid in my project. I want to show "No Records Available" message to grid if data is not present. I set noRecords to true for my grid and it is working as expected. Now I have so many grids in my project so I want to globally set this setting for all the grids.
Is there a way to achieve so?
Here is my sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.117/js/kendo.all.min.js"></script>
</head>
<body>
First Grid:
<div id="grid"></div>
Second Grid:
<div id="grid1"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
pageable: true,
noRecords: {
template: "No data available"
},
dataSource: {
page: 1,
pageSize: 10
}
});
$("#grid1").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
pageable: true,
dataSource: {
page: 1,
pageSize: 10
}
});
</script>
</body>
</html>
You can find a working dojo here.
Hi you can extend the grid like this. You can put this in a separate js file and include it before you use a grid.
(function ($, kendo) {
var _init = kendo.ui.Grid.fn.init;
var extendedGrid = kendo.ui.Grid.extend({
init: function (element, options) {
var getTemplate = function (textP, iconP) {
var icon = iconP || 'icon';
var text = textP || 'No data available';
var tpl = `<div class="no-records-table"><div class="no-records-table-cell"><div class="grid-no-records-icon ${icon}"></div><div>${text}</div></div></div>`;
return tpl;
}
options = $.extend({
noRecords: {
template: getTemplate(options.noRecordsText, options.noRecordsIcon)
}
}, options);
//call the base constructor.
_init.call(this, element, options);
}
});
kendo.ui.plugin(extendedGrid);
}(window.kendo.jQuery, window.kendo));
You can check the the dojo here
I want my Kendo grid's column read-only after bind. I have a dropdownlist in my page. Depending on the selected value of the dropdownlist I want to enable editing a cell in a row selected.
Does anyone have sample code?
It is possible to achieve the desired behavior like this:
use the edit event of the Grid, check the DropDownList value() and if editing should be prevented, execute the Grid's closeCell() method to exit edit mode. If the user is trying to add a new item to the Grid (e.model.isNew()), you will also need to remove() this new item with the respective dataSource method.
use the change event of the DropDownList to hide the CRUD-related buttons in the Grid with custom CSS styles.
Another possible option is to recreate and rebind the Grid with the correct editing settings via setOptions every time the dropDownList value changes.
The example below uses the first approach described above. You can modify it, so that not only the Delete buttons are toggled, but also Add New Record.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/editing/">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title>Kendo UI</title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.default.min.css" />
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>
<style>
.hideDeleteButtons .k-grid-delete {
visibility: hidden;
}
</style>
</head>
<body>
<div id="example">
<p><label for="dropdownlist">Grid editing is:</label>
<select id="dropdownlist"><option value="1">enabled</option><option value="0">disabled</option></select></p>
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#dropdownlist").kendoDropDownList({
change: function(e) {
$("#grid").toggleClass("hideDeleteButtons", e.sender.value() !== "1");
}
});
var crudServiceBaseUrl = "//demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 10,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
height: 300,
toolbar: ["create", "save", "cancel"],
columns: [
{ field: "ProductName", title: "Product Name" },
{ command: "destroy", title: " ", width: 200 }],
editable: true,
edit: function(e) {
var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
if (dropdownlist.value() !== "1") {
e.sender.closeCell();
if (e.model.isNew()) {
e.sender.dataSource.remove(e.model);
}
}
}
});
});
</script>
</div>
</body>
</html>
I'm new to kendo and I would like to know whether is there a way to program my kendo grid like the image below.
I had saw some sample online where they use kendo-grid grouping but it doesn't generate the layout I needed
Output
Yes, it is possible by using a column template with a script expression that will transform the array of child items into an HTML list:
http://dojo.telerik.com/AqezO
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Grid</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.silver.min.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
var sampleData = [
{ id: 1, name: "name", items: ["foo", "bar"] }
];
$(function () {
var dataSource = new kendo.data.DataSource({
data: sampleData,
schema: {
model: {
id: "id",
fields: {
id: { type: "number" },
name: { },
items: { }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
columns: [
{ field: "id" },
{ field: "name" },
{ field: "items", template: "#= showItems(items) #" }
]
});
});
function showItems(arr) {
return "<ul><li>" + arr.join("</li><li>") + "</li></ul>";
}
</script>
</body>
</html>
I want to bind Json result to kendoUI grid using ODATA v4 but i am unable to do so. Below code works for the url http://services.odata.org/v2/Northwind/Northwind.svc/Customers which returns a xml result but why dont it work for http://services.odata.org/v4/Northwind/Northwind.svc/Customers which returns a json. Any help would be appreciated.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/index">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.material.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2015.1.408/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.408/js/jszip.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://services.odata.org/v2/Northwind/Northwind.svc/Customers",dataType: "jsonp",data: { q: "#kendoui" }
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "ContactName",
title: "Contact Name",
width: 200
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});
});
</script>
</div>
</body>
</html>
Couple of things. I don't think the v4 implementation on services.odata.org supports jsonp. The return value doesn't appear to be wrapped. Also you need to change your type to "odata-v4" for v4 odata.
Also the return array isn't inside a property on the return object called "results", it's now "value" so I had to set that in the schema on the dataSource. I also changed the transport.read into an object and added the requisite properties.
dataSource: {
type: "odata-v4",
transport: {
read: {
url: "http://services.odata.org/v4/Northwind/Northwind.svc/Customers",
dataType: "json",
data: {
q: "#kendoui"
}
}
},
pageSize: 20,
schema: {
data: "value"
}
},
See working sample at http://jsbin.com/satafa/1/edit?html,js,output
You need to add "odata-v4" as type in the datasource. Please refer the fiddle
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata-v4",
transport: {
read: "http://services.odata.org/v4/Northwind/Northwind.svc/Customers",dataType: "jsonp",data: { q: "#kendoui" }