This is my code:
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: getMembersUrl,
dataType: "json",
type: "get"
}
},
serverPaging: true,
pageSize: 2,
schema: {
data: "Data",
total: "Total",
}
});
When I call read on the datasource, it doesn't send the pagesize or take (I tried both) as part of the request. I am really scratching my head on this one.
Your code works fine and it sends take as expected. If you run:
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "fake",
dataType: "json",
type: "get"
}
},
serverPaging: true,
pageSize: 2,
schema: {
data: "Data",
total: "Total",
}
});
And define a button and a handler for triggering the read:
<button id="read" class="k-button">Read</button>
$("#read").on("click", function() {
console.log("About to fetch data");
dataSource.fetch();
});
As here : http://jsfiddle.net/OnaBai/34qe4oks/
You will see in the browser console that it actually sends the request:
If you don't see the request is very likely because you are not actually reading from the DataSource (remember that the Grid DataSource is read when the Grid finishes its initialization)
Related
I want to update my chart with ajax and Flask but
I can not update the data:
var chart = new Chart(canvas, {
type: "line",
datasets: [{
label: 'My Dataset',
}]
})
$(document).ready(function () {
$.ajax({
dataType: "text",
contentType: "application/json",
url: '{{ url_for("data_page") }}',
type: "post",
data: JSON.stringify({
timeDelta: "7",
technologie: "Java",
}),
success: function (data) {
let json = $.parseJSON(data); ==> [["2021-06-04", "2021-06-05"],[47, 3]]
chart.data.labels.push(json[0]); ==> It seems to work
chart.data.datasets[0].data = json[1]; ==> here I get : "Cannot set property 'data' of undefined"
chart.update();
}
});
});
I don't understand ,
where am I wrong ?
Thanks for any help !
It doesn't work because you initially create the chart with wrong configuration. The labels and datasets arrays must be contained in a data object.
Try this instead:
var chart = new Chart(canvas, {
type: 'line',
data: {
labels: [],
datasets: [{
label: 'My Dataset',
data: []
}]
}
});
How can I stop the kendo grid/datasource automatically posting changes to the server?
I've tried intercepting Grid's saveChanges but it isn't being triggered by the Updated command. As per the docs, DataSource's auto-sync by default should be false, but I went ahead and set it anyway but to no effect.
$("#items-grid").kendoGrid({
dataSource: {
autoSync: false,
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("
ItemList ", "
PurchaseRequisition ", new {prId = #Model.Id }))",
type: "POST",
dataType: "json",
},
update: {
url: "#Html.Raw(Url.Action("
ItemEdit ", "
PurchaseRequisition "))",
type: "POST",
dataType: "json",
}
},
sync: function(e) {
console.log("sync complete");
},
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "Id",
fields: {
/...
}
}
},
},
saveChanges: function(e) {
// not fired from Update command
e.preventDefault();
},
columns: [{
// ...
}, {
command: [{
name: "edit",
text: {
edit: "Edit",
update: "Update",
cancel: "Cancel"
}
}],
width: 100
}]
});
});
You can try with dataSource batch set to true.
var dataSource = new kendo.data.DataSource({
transport: {...},
batch: true
...}
$("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
height: 550,
toolbar: ["create", "save", "cancel"],
columns: [...],
editable: true
});
NOTE: this is inline editing.
You can see an example on the official page: Batch editing
My problem is the json I am getting doesn't have a root. I can get the store to load the URL and I get the JSON back but the store data is empty and nothing shows in the callback.
Json:
[
{
"symbol": "GM"
},
{
"symbol": "GA"
}
]
Model and Store:
Ext.define('Symbol', {
extend: 'Ext.data.Model',
fields: ['symbol']
});
Ext.define('Doc.store.symbol', {
extend: 'Ext.data.Store',
model: 'Symbol',
proxy: {
type: 'jsonp',
url: 'datasource/symbol',
reader: {
type: 'json',
model: 'symbol'
},
}
});
I tried removing the root as well but nothing came back in the store or the callback. My googlefu is turning up nothing good on json without root.
the root should be defined as blank root:''
Here is a code demonstrating the proper setup:
Ext.define('boomer', {
extend:'Ext.data.Model',
fields: ['symbol'],
proxy: {
type: "ajax",
url: "data.json",
extraParams: {
},
reader: {
type: "json",
root: "",
successProperty: "success"
}
}
});
var store = Ext.create('Ext.data.Store',{
model: 'boomer',
});
store.load({
callback:function(){
Ext.Msg.alert('Store Items', store.data.items.length);
console.log(store.data.items);
}
});
Here is a fiddle demonstrating working code.
extend Ext.data.reader.Json to adjust your response.Later use it inside proxy reader.
there is a answer here
i want to write a data store, that gets its data by an ajax call. The ajax call has to be a http post message and has to contain some data in json format.
Thats what I have so far:
Ext.define("MyApp.store.FileContent", {
extend: "Ext.data.Store",
model:'MyApp.model.FileContent',
autoLoad: true,
proxy: {
actionMethods : {
read : 'POST'
},
type: 'ajax',
defaultHeaders:{
'Content-Type': 'application/json; charset=utf-8',
},
url : apiUrl + 'Files/GetFileInfo',
jsonData : '{"file": "myfile"}'
}
});
The call to the webservice works, but the variable "file" is always empty. What is wrong here?
Got it by writing a custom proxy
store:
Ext.define("MyApp.store.FileContent", {
extend: "Ext.data.Store",
model:'MyApp.model.FileContent',
autoLoad: true,
requires: ['MyApp.proxy.FileContent'],
proxy: {
type: 'FileContent'
}
});
proxy:
Ext.define('MyApp.proxy.FileContent', {
extend: 'Ext.data.proxy.Proxy',
alias: 'proxy.FileContent',
create: function (operation, callback, scope) {
//Here goes your create logic
},
read: function (operation, callback, scope) {
Ext.Ajax.request({
url: apiUrl + 'Files/GetFileInfo',
method: "POST",
defaultHeaders:{
'Content-Type': 'application/json; charset=utf-8',
},
jsonData: '{"file": "myfile"}',
success: function(response){
var json = JSON.parse(response.responseText);
},
failure: function(){
alert("fail");
}
});
},
update: function (operation, callback, scope) {
//Here goes your update logic
},
destroy: function (operation, callback, scope) {
//Here goes your delete logic
}
});
I'm trying to make a grid with KendoUI with external data via JSON (php+mysql engine) from TABLE A and one of columns of these data, get text labels from another TABLE B.
Example, data are: idPermission=1, user_id=1, business_unit_id=1, permission=10
The user_id=1 I want get from another table (Users) their names, 1=John Doe, 2=Martin Brown.
I want to see "John Doe" instead id 1 in the visualization of grid, and "Martin Brown" instead id 2. When inline (or popup) editing of the records I've already reached the target, and I've a select box with the names and not the ids!
Here is my code:
<script>
$(function() {
var crudServiceBaseUrl = "http://localhost/ajax/";
var dataTable = "UsersPermissions";
// This is the datasource of the grid
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "table_action.php?op=R&tbl="+dataTable,
dataType: "json"
},
update: {
url: crudServiceBaseUrl + "table_action.php?op=U&tbl="+dataTable,
type: "POST"
},
destroy: {
url: crudServiceBaseUrl + "table_action.php?op=D&tbl="+dataTable,
type: "POST"
},
create: {
url: crudServiceBaseUrl + "table_action.php?op=C&tbl="+dataTable,
type: "POST"
}
},
batch: true,
pageSize: 10,
schema: {
model: {
id: "idPermission",
fields: {
idPermission: { editable: false, nullable: true },
user_id: { validation: { required: true } },
business_unit_id: {},
permission: { validation: { required: true } },
}
}
}
});
// This is the datasource of the user_id column
usersSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "table_action.php?op=R&tbl=Users",
dataType: "json"
}
},
batch: true,
schema: {
model: {
id: "idUser",
fields: {
idUser: {},
email: {},
password: {},
name: {},
last_login: {},
status: {}
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
sortable: {
mode: "single",
allowUnsort: false
},
reorderable: true,
resizable: true,
scrollable: false,
toolbar: ["create"],
columns: [
{
field: "user_id",
editor: function (container, options) { // This is where you can set other control types for the field.
$('<input name="' + options.field + '"/>').appendTo(container).kendoComboBox({
dataSource: usersSource,
dataValueField: "idUser",
dataTextField: "name",
});
},
title: "ID Utente"
},
{ field: "business_unit_id", title: "Business Unit"},
{ field: "permission", title: "Permission"},
{ command: ["edit", "destroy"], width: "230px"}],
editable: "inline"
});
});
</script>
How I can make the same thing I've done in editing mode, in view mode?
For achieving that you have to first edit the query of the read operation seeing your sample data it must be like this
SELECT a.idPermission, b.name, a.business_unit_id, a.permission
FROM TABLE_A AS a
JOIN TABLE_B(users) AS B ON a.user_id=b.user_id;
json encode the data and send to client
and in your kendo grid change column user_id to name
I know you were asking about the HTML/JavaScript way, but using MVC, this is a good, alternative way to do it:
http://decisivedata.net/kendo-ui-grid-and-entity-framework-code-first-foreign-key-fields/