Develop Reference

Why Kendo dataSouce.transport.update method do not send data to the server?

I have a Kendo UI TreeList where every row has a checkbox displayed. If the user clicks on the checkbox then a request goes to the server and save the data. Unfortunately, I did something wrong because:
the update method does not send data to the server
and the sync method is not called automatically
What I did wrong?
I think the problem around how I set up that which item has changed. As you can see I iterate over the dataset coming from dataSource.data() and the item.checked and item.dirty properties are updated. If I understand correctly the documentation then this changes should trigger the sync method. It does not trigger the sync method and this it the reason I call it in the method.
My other question is related to the data structure should be sent to the server. It is based on the schema, right? So, once I can achieve that the request sends an object to the server I should create a similar C# POCO as model and I can read the data in the webapi controller.
In the documentation there is a saveRow() method, but I cannot translate that code to angular. Can somebody help me in this case?
//this row is my problem
var treeList = $("#treeList").data("kendoTreeList");
var dataSource = new kendo.data.TreeListDataSource({
transport: {
read: {
url: configurationService.goNoGoWebApiRootUrl + 'AreaPathDependencies/Get/ChildrenMarked/' + selectedAreaPathIdFromModalService,
dataType: "json",
type: "get"
},
update:
{
url: configurationService.goNoGoWebApiRootUrl + 'AreaPathDependencies/Update/AreaPathDependencies',
dataType: "json",
type: "post"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
schema: {
model: {
id: "id",
parentId: "parentId",
fields: {
Id: { type: "number", editable: false, nullable: true },
ParentId: { type: "number", editable: false, nullable: true },
Name: { type: "string", editable: false, nullable: true },
Checked: { type: "boolean", editable: true, nullable: false }
}
}
}
});
vm.treeListOptions = {
dataSource: dataSource,
sortable: false,
editable: false,
columns: [
{
field: "checked",
title: "Selected",
template: checkBoxTemplate,
width: 32
},
{ field: "name", title: "Area Path", width: "200px", expandable: true },
{ field: "fullPath", title: "FullPath", width: "500px" },
],
save: onSave,
change: onChange,
sync: sync,
autoSync: true,
};
}
function checkboxOnclick(selectedId) {
console.log('checkboxOnclick', selectedId);
var data = vm.treeListOptions.dataSource.data();
for (var i = 0; i < data.length; i++) {
if (selectedId == data[i].id) {
data[i].set("checked", true);
//data[i].dirty = true;
}
}
vm.treeListOptions.dataSource.sync();
//console.log('flush', vm.treeListOptions.dataSource.data());
}

Well batch: true has to be set to get parameterMap working, because models parameters will be available only when the batch option is enabled. (parameterMap docs)
And to second question - I am not so sure but as noted in sync docs,
The sync method will request the remote service if:
the transport.create option is set and the data source contains new data items
the transport.destroy option is set and data items have been removed from the data source
the transport.update option is set and the data source contains updated data items
How I understand to that - to get sync method working you need to return updated records. Please check, if your server method for update/delete returns that.

Refresh Kendo UI grid data by reading a variable

Grid reads data from a javascript variable.
$("#grid").kendoGrid({
dataSource: {
type: "text",
data: jsvar,
schema: {
model: {
fields: {
id: {type: "string", editable: false},
name: {type: "string"}
}
}
},
pageSize: 20
},
pageable: {
input: true,
numeric: true
},
//toolbar: [{text: "Add"}],
columns: [
{command: [{text: "Edit", click: showDetailse}, {text: "View", click: viewoneitm}], title: " ", width: "170px"},
]
});
Then I change value of this variable jsvar with ajax and wait for ajax response and after that when I refresh grid with
jQuery("#grid").data("kendoGrid").dataSource.read();
jQuery("#grid").data("kendoGrid").refresh();
The grid is not repopulated with new data and old data stays in grid. Please tell me how to refresh grid data.
This worked fine and grid used to refresh perfectly untill I proviced static data, but after I used ajax and then 'refresh' it failed to update

If jsvar contains an array, the Kendo data source will create a model for each array item, so if you modify the original array, it won't change the DataSource. If you want to change the data, you should do it like this:
grid.dataSource.data(jsvar);

can't load json data into a grid extjs

I tryed every answer i found (in Stackoverflow there are many) to solve my problem with the store of extjs, but still the data doesn't get displayed in the grid, even if the grid is correctly fisplayed. I'm confused so I'm writing the "store" I was able to build reading the answer on this site. I don't know why it's not loading the data into the grid. If you need more information to help please ask.
store: Ext.create('Ext.data.Store', {
autoLoad: true,
storeId: 'StoreName',
fields: ['id','name'],
data : JsonObject,
model: 'ModelName',
proxy: {
type: 'memory',
reader: {
type: 'json',
record: 'JsonRoot'
}
}
})
The grid is loaded in a new window through an ajax call. The code of the new window is the following:
Ext.create('Ext.window.Window', {
title: 'GridTitle',
height: 200,
width: 400,
layout: 'fit',
items: {
xtype: 'grid',
border: false,
columns: [
{
text : 'id',
flex : 1,
sortable : true,
dataIndex: 'id'
},
{
text : 'name',
width : 300,
sortable : true,
dataIndex: 'name'
}],
I do have the impression that the part with the columns is not read by ext.js, cause it doesn't index the name and id of the data i'm passing to it in the json.

The solution was so simple that I'm embarrassed to say it.
reader: {
type: 'json',
root: 'jsonRoot'
}
Instead of:
reader: {
type: 'json',
record: 'jsonRoot'
}

ExtJS 4.1 Infinite Grid Scrolling doesnt work with Dynamic store using loadData

I have to load first grid panel on tab and then load data into store using loadData() function which is working fine, but now I have to integrate infinite grid scrolling with it.
Is there any way to integrate infinite scrolling on fly after loadData into store..? I am using ExtJS 4.1. Please help me out.
Here I am showing my current script in controller and grip view panel in which I have tried out but not working.
Controller Script as below:
var c = this.getApplication().getController('Main'),
data = c.generateReportGridConfiguration(response,true),
tabParams = {
title: 'Generated Report',
closable: true,
iconCls: 'view',
widget: 'generatedReportGrid',
layout: 'fit',
gridConfig: data
},
generatedReportGrid = this.addTab(tabParams);
generatedReportGrid.getStore().loadData(data.data);
On Above script, once I get Ajax call response, adding grid panel with tabParams and passed data with gridConfig param which will be set fields and columns for grid and then last statement supply grid data to grid. I have tried out grid panel settings by following reference example:
http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/infinite-scroll.html
On above page, Included script => http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/infinite-scroll.js
My Grid Panel Script as below:
Ext.define('ReportsBuilder.view.GeneratedReportGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.generatedReportGrid',
requires: [
'ReportsBuilder.view.GenerateViewToolbar',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.grid.PagingScroller',
'Ext.grid.RowNumberer',
],
initComponent: function() {
Ext.define('Report', {extend: 'Ext.data.Model', fields: this.gridConfig.fields, idProperty: 'rowid'});
var myStore = Ext.create('Ext.data.Store', {model: 'Report', groupField: 'name',
// allow the grid to interact with the paging scroller by buffering
buffered: true,
pageSize: 100,
autoSync: true,
extraParams: { total: 50000 },
purgePageCount: 0,
proxy: {
type: 'ajax',
data: {},
extraParams: {
total: 50000
},
reader: {
root: 'data',
totalProperty: 'totalCount'
},
// sends single sort as multi parameter
simpleSortMode: true
}
});
Ext.apply(this, {
dockedItems: [
{xtype: 'generateviewToolbar'}
],
store: myStore,
width:700,
height:500,
scroll: 'vertical',
loadMask: true,
verticalScroller:'paginggridscroller',
invalidateScrollerOnRefresh: false,
viewConfig: {
trackOver: false,
emptyText: [
'<div class="empty-workspace-bg">',
'<div class="empty-workspace-vertical-block-message">There are no results for provided conditions</div>',
'<div class="empty-workspace-vertical-block-message-helper"></div>',
'</div>'
].join('')
},
columns: this.gridConfig.columns,
features: [
{ftype: 'groupingsummary', groupHeaderTpl: '{name} ({rows.length} Record{[values.rows.length > 1 ? "s" : ""]})', enableGroupingMenu: false}
],
renderTo: Ext.getBody()
});
// trigger the data store load
myStore.guaranteeRange(0, 99);
this.callParent(arguments);
}
});
I have also handled start and limit from server side query but it will not sending ajax request on scroll just fired at once because pageSize property in grid is 100 and guaranteeRange function call params are 0,99 if i will increased 0,299 then it will be fired three ajax call at once (0,100), (100,200) and (200,300) but showing data on grid for first ajax call only and not fired on vertical scrolling.
As, I am new learner on ExtJs, so please help me out...
Thanks a lot..in advanced.

You cannot call store.loadData with a remote/buffered store and grid implementation and expect the grid to reflect this new data.
Instead, you must call store.load.
Example 1, buffered store using store.load
This example shows the store.on("load") event firing.
http://codepen.io/anon/pen/XJeNQe?editors=001
;(function(Ext) {
Ext.onReady(function() {
console.log("Ext.onReady")
var store = Ext.create("Ext.data.Store", {
fields: ["id", "name"]
,buffered: true
,pageSize: 100
,proxy: {
type: 'rest'
,url: '/anon/pen/azLBeY.js'
reader: {
type: 'json'
}
}
})
store.on("load", function(component, records) {
console.log("store.load")
console.log("records:")
console.log(records)
})
var grid = new Ext.create("Ext.grid.Panel", {
requires: ['Ext.grid.plugin.BufferedRenderer']
,plugins: {
ptype: 'bufferedrenderer'
}
,title: "people"
,height: 200
,loadMask: true
,store: store
,columns: [
{text: "id", dataIndex: "id"}
,{text: "name", dataIndex: "name"}
]
})
grid.on("afterrender", function(component) {
console.log("grid.afterrender")
})
grid.render(Ext.getBody())
store.load()
})
})(Ext)
Example 2, static store using store.loadData
You can see from this example that the store.on("load") event never fires.
http://codepen.io/anon/pen/XJeNQe?editors=001
;(function(Ext) {
Ext.onReady(function() {
console.log("Ext.onReady")
var store = Ext.create("Ext.data.Store", {
fields: ["id", "name"]
,proxy: {
type: 'rest'
,reader: {
type: 'json'
}
}
})
store.on("load", function(component, records) {
console.log("store.load")
console.log("records:")
console.log(records)
})
var grid = new Ext.create("Ext.grid.Panel", {
title: "people"
,height: 200
,store: store
,loadMask: true
,columns: [
{text: "id", dataIndex: "id"}
,{text: "name", dataIndex: "name"}
]
})
grid.on("afterrender", function(component) {
console.log("grid.afterrender")
})
grid.render(Ext.getBody())
var data = [
{'id': 1, 'name': 'Vinnie'}
,{'id': 2, 'name': 'Johna'}
,{'id': 3, 'name': 'Jere'}
,{'id': 4, 'name': 'Magdalena'}
,{'id': 5, 'name': 'Euna'}
,{'id': 6, 'name': 'Mikki'}
,{'id': 7, 'name': 'Obdulia'}
,{'id': 8, 'name': 'Elvina'}
,{'id': 9, 'name': 'Dick'}
,{'id': 10, 'name': 'Beverly'}
]
store.loadData(data)
})
})(Ext)

How to load data in extJS grid from JSONStore?

I'm having problem loading data from JSON store to EXT grid. Following is the code:
var store = new Ext.data.JsonStore({
root: 'rates',
autoLoad=true,
fields: ['mainid','Country'],
proxy : new Ext.data.HttpProxy({
method: 'GET',
url: '/projectLink/gridData.php'
})
});
var grid = Ext.create('Ext.grid.Panel',{
renderTo: 'grid-rates',
width:700,
height:500,
title:"Country",
store:store,
columns:[
{id: 'mainid', header: "mainid", width: 200, sortable: true, dataIndex: 'mainid'},
{id: 'Country', header: "Country", width: 200, sortable: true, dataIndex: 'Country'}
]
});
The JSON store is getting filled as it sends request to server and data is sent back but the grid is never populated :( What's missing?
Following the JSON that I'm using:
{"count":"18239",
"rates":[
{"mainid":"75966","Country":"Afghanistan Cellular-AT"},
{"mainid":"75967","Country":"Afghanistan Cellular-AWCC"},
{"mainid":"75968","Country":"Afghanistan Cellular-Areeba"},
{"mainid":"75969","Country":"Afghanistan Cellular-Etisalat"},
{"mainid":"75970","Country":"Afghanistan Cellular-Others"},
{"mainid":"75971","Country":"Afghanistan Cellular-Roshan"},
{"mainid":"75972","Country":"Albania"},
{"mainid":"75973","Country":"Albania Cellular-AMC"},
{"mainid":"75974","Country":"Albania Cellular-Eagle"},
{"mainid":"75975","Country":"Albania Cellular-Plus"}
]}
Please help!

use Ext.data.Store instead JsonStore, tested in 4.0.2a
also i can't find JsonStore at the docs
try this:
var store = new Ext.data.Store({
fields:['mainid','Country'],
proxy: {
type: 'ajax',
url : '/projectLink/gridData.php',
reader: {
type: 'json',
root: 'rates',
totalProperty : "count"
}
},
autoLoad : true
});

I'm not sure if this is the problem, but the config autoLoad is wrong.
You have: autoLoad=true
It should be: autoLoad : true