Develop Reference

Kendo Grid: populating with data from ajax

I'm trying to populate a kendo grid with data retrieved via ajax. Here is the ajax:
var model = #Html.Raw(Json.Serialize(Model));
$(document).ready(function () {
$.ajax({
url: "/Utilities/Report/Run",
data: JSON.stringify(model),
contentType: "application/json",
type: "POST",
success: function(result) {
var ds = new kendo.data.DataSource({
data: result
});
alert(result);
$("#grid").data("kendoGrid").setDataSource(ds);
},
error: function(result) {
options.error(result);
}
});
$("#grid").kendoGrid({
toolbar: ["excel", "pdf"],
excel: {
fileName: "test"
},
pdf: {
fileName: "test"
},
});
});
At the alert(result) this is what the data looks like:
[
{"TEST":"one"},
{"TEST":"two"},
{"TEST":"three"}
]
The ajax call appears to be working and the data looks good to me, but the kendo grid is not updating, it remains blank. I also do not get any error. I've tried placing the kendoGrid inside the ajax success function with the same result. I've tried using transport and read in the DataSource to retrieve the data but that kept giving me an error: n.slice is not a function. However, others seemed to think that was because there was no schema defined. Due to the kind of data I am retrieving, I cannot define this. The data retrieved from the server could have any column/field names, and any number of columns. It is not complex JSON however.
How do I get my grid to populate with this data?

I have created a new Datasource and mapped it to the existing one outside the success method.
Can you try this one below :
var newDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/Utilities/Report/Run",
dataType: "json",
data: JSON.stringify(model),
error: function (result) {
options.error(result);
}
}
}
});
var d1 = $("#grid").data("kendoGrid");
d1.dataSource.data([]);
d1.setDataSource(newDataSource );
make changes as per your necessity if I have missed any . Kendo data binding is always confusing :D

Kendo DataSource is very powerful. Ideally, you do not need to make a manual Ajax call. Instead, DataSource can Ajax request data from URL by itself, if Grid needs data.
https://jsfiddle.net/6gxqsrzu/
$(function() {
var dataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: {
type: "number"
},
Freight: {
type: "number"
},
ShipName: {
type: "string"
},
OrderDate: {
type: "date"
},
ShipCity: {
type: "string"
}
}
}
},
serverPaging: true,
pageSize: 5,
serverSorting: true,
sort: {
field: 'OrderDate',
dir: 'asc'
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
sortable: true,
pageable: true,
columns: [{
field: "OrderID",
filterable: false
},
"Freight", {
field: "OrderDate",
title: "Order Date",
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name"
}, {
field: "ShipCity",
title: "Ship City"
}
]
});
});
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
<div id="grid"></div>

jsGrid won't render JSON data

I'm trying to use jsGrid in my MVC project as the client would like inline editing and filtering.
However, I cannot get it to load my JSON source into the table.
My js to load the table looks like so:
$("#jsGrid").jsGrid({
height: "50%",
width: "100%",
filtering: true,
inserting: true,
editing: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 10,
pageButtonCount: 5,
deleteConfirm: "Do you really want to delete client?",
controller: {
loadData: function (filter) {
return $.ajax({
type: "GET",
url: "RICInstrumentCode/GetData",
data: filter,
dataType: "json"
});
},
insertItem: function (item) {
return $.ajax({
type: "CREATE",
url: "/api/RICInsrumentCodeTable",
data: item,
dataType: "json"
});
},
updateItem: function (item) {
return $.ajax({
type: "UPDATE",
url: "/api/RICInsrumentCodeTable/" + item.ID,
data: item,
dataType: "json"
});
},
deleteItem: $.noop
//deleteItem: function (item) {
// return $.ajax({
// type: "DELETE",
// url: "/api/data/" + item.ID,
// dataType: "json"
// });
//}
},
fields: [
{ name: "Code", type: "text", title: "RIC Instrument Code", width: 150 },
{ name: "Descr", type: "text", title:"RIC Instrument Code Description", width: 200 },
{ name: "RICInstrumentGroupId", type: "select", title: "RIC Instrument Group", items: countries, valueField: "Id", textField: "Name" },
{ name: "Active", type: "checkbox", title: "Is Active", sorting: true },
{ type: "control" }
]
});
});
The loadData is what I've been working on.
and the JSON the is returned from get data looks like so:
[{"Id":1,"Code":"test1","Descr":"first code test","RICInstrumentGroupId":2,"Active":true},{"Id":2,"Code":"APP","Descr":"Apples and bananas","RICInstrumentGroupId":4,"Active":true},{"Id":3,"Code":"1","Descr":"1","RICInstrumentGroupId":1,"Active":true},{"Id":4,"Code":"3","Descr":"3","RICInstrumentGroupId":3,"Active":false}]
So far I have confirmed that the ajax is firing, changed my array titles to match those of the call, and ensured the return is in valid JSON, what else can I do? Why isn't this working?

I was being stupid,
The bit that sets the table height was set to a 100% in a div that had no height, this was causing the table body to render with a height of 0px, changing the height property to auto fixed it because the data was there all along.
Thanks for the advice though!

I don't know if it is required, but when I look on demo examples (OData Service).
The grid loadData function looks bit different than yours.
loadData: function() {
var d = $.Deferred();
$.ajax({
url: "http://services.odata.org/V3/(S(3mnweai3qldmghnzfshavfok))/OData/OData.svc/Products",
dataType: "json"
}).done(function(response) {
d.resolve(response.value);
});
return d.promise();
}
is accept promise rather than ajax function. so that my be the problem
Demo here: http://js-grid.com/demos/

The cell in jsGrid had not being updated

i am working on lightswitch project ,and I am using JsGrid.I ran into one problem and I don't couldn't find the solution.here is the scenario:
I use the grid to get data from database table,when I update one of the cell It's value doesn't appear unless I click on the cell again,and if I update it in the second time then the new value appear.
I tried to refresh the grid after itemupdated but still the new value doesn't appear instantaneously.my code is here:
$("#jsGrid").jsGrid({
width: "100%",
height: "auto",
inserting: true,
editing: true,
sorting: true,
paging: true,
autoload: true,
controller: {
loadData: function () {
var deferred = jQuery.Deferred();
myapp.activeDataWorkspace.ApplicationData.Table1Items.load().done(function (data) {
deferred.resolve(data.results);
});
return deferred.promise();
},
updateData: function () {
$("#jsGrid").jsGrid("refresh");
},
deleteItem: function (Item) {
$("#jsGrid").jsGrid("refresh");
}
},
fields: [
{ name: "EmployeeName", type: "text", width: 150 },
{ name: "Points", type: "text", width: 200 },
{ type: "control", editButton: true, // show edit button
deleteButton: true, // show delete button
clearFilterButton: true, // show clear filter button
modeSwitchButton: true // show switching filtering/inserting button
}]
,
onItemInserted: function (item) {
}, onItemUpdating: function (item) {
$("#jsGrid").jsGrid("refresh");
},
onItemUpdated: function (item)
{
$("#jsGrid").jsGrid("refresh");
console.log("it is updated", item.item);
$("#jsGrid").jsGrid("refresh");
}
});
your help is invaluable and many thanks in advance.

hope this may help you. updateItem is a function returning updated item or jQuery promise that will be resolved with updated item. Accepts updating item object.
on successful updating Item, use
updateItem: function(item) {
return $.ajax({
type: "PUT",
url: "/items",
data: item
});
},
if you have any queries, comment below.
fore more details : see link

Kendo Grid equivalent of onEditComplete

Is there an event equivalent to onEditComplete for Kendo Grid where the event fires only after the content of the cell has been edited?
Documentation mentions "edit" event, but this fires as soon as the cell goes into edit mode (So this is equivalent to onBeginEdit).
The closest event with the desired behavior I found was the "save" event, but this event only fires when the content of the cell has been changed. I want an event that fires as soon as the cell goes out of the edit mode.
The grid's editmode is set to incell.

Use the Save event
(fired when the focus is moved outside of the cell being edited and
before the cell is closed)
http://www.kendoui.com/forums/kendo-ui-web/grid/is-there-an-event-that-first-after-a-user-edits-a-cell-but-before-they-save-in-a-grid-with-batch-edit-and-incell-editing-.aspx.

So due to the comment i've removed my previous answer - using the blur event on the input boxes (or other elements) seems to work :
On the grid.edit event, use jquery to bind to the textbox (or any other inline edit control)'s blur event which is fired when focus is lost. Append this to the grid definition...and obviously replace the alert with your code.
edit: function (e) {
alert('Edit Fired');
$('input.k-input.k-textbox').blur(function () {
alert('blur event called');
});
},
I've tested this by modifying the sample inline edit code here
My full local source of the edit - see only the edit event on the grid def:
<div id="example" class="k-content">
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "http://demos.kendoui.com/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: 20,
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,
pageable: true,
height: 430,
toolbar: ["create"],
// added in hook to here to bind to edit element events.
// blur is fired when an element loses focus
edit: function (e) {
alert('Edit Fired');
$('input.k-input.k-textbox').blur(function (e) {
alert('blur event called');
});
},
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "100px" },
{ field: "UnitsInStock", title: "Units In Stock", width: "100px" },
{ field: "Discontinued", width: "100px" },
{ command: ["edit", "destroy"], title: " ", width: "172px" }],
editable: "inline"
});
});
</script>
</div>

Why are you not using the "blur" event?
http://www.kendoui.com/forums/ui/window/possible-to-close-window-when-it-loses-focus-.aspx
$("#window").blur(function(){
if ($(document.activeElement).closest(".k-window").length == 0) {
$("#window").data("kendoWindow").close();
}
});
http://api.jquery.com/blur/

Have you tried the Change Event
"change
Fired when the user selects a table row or cell in the grid."
Example - get the selected data item(s) when using cell selection
<div id="grid"></div>
<script>
function grid_change(e) {
var selectedCells = this.select();
var selectedDataItems = [];
for (var i = 0; i < selectedCells.length; i++) {
var dataItem = this.dataItem(selectedCells[i].parentNode);
if ($.inArray(dataItem, selectedDataItems) < 0) {
selectedDataItems.push(dataItem);
}
}
// selectedDataItems contains all selected data items
}
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
selectable: "multiple, cell"
});
var grid = $("#grid").data("kendoGrid");
grid.bind("change", grid_change);
</script>

Populating A Kendo UI Grid With A JSON String

I'm using a Kendo UI Grid and can't get it to show data when using a JSON string. I created a fiddle here. What am I doing wrong?
<script type="text/javascript">
$(document).ready(function ()
{
$('#grid').kendoGrid(
{
scrollable: false,
data: '{"TestHeader":"This is some test data"}',
columns: [ { field: 'TestHeader' } ]
});
});
</script>
<div id="grid"></div>

This might be closer to what you want (note the changes to the data definition):
$(document).ready(function ()
{
$('#grid').kendoGrid(
{
scrollable: false,
dataSource: { data: [ { "TestHeader": "This is some test data"} ] },
columns: [ { field: 'TestHeader' } ]
});
});​