We Keep Coding

Kendo UI Grid: if I make changes and save them, I can still cancel them afterwards. How to lock them in?

I have a Kendo UI Grid bound to a local data source. If I make some changes and click on "Save changes", and then I click on "Cancel changes", the changes are rolled back. I expected them to be "locked in" because I saved them.
Furthermore, if I make a change, save it, make another change, save again and finally cancel, both changes are rolled back.
See UPDATED fiddle, with problem and solution:
http://jsfiddle.net/q24ennne/7/
My HTML:
<div id="grid"></div>
My JavaScript:
window.gridData = [
{ id: 1, text: "Uno" },
{ id: 2, text: "Dos" },
{ id: 3, text: "Tres" },
{ id: 14, text: "Catorce" },
];
(function() {
$('#grid').kendoGrid({
toolbar: ["save", "cancel"],
editable: true,
saveChanges: function(e) {
gridData = $('#grid').getKendoGrid().dataSource.data();
$('#grid').getKendoGrid().refresh();
console.log("gridData:");
console.log(gridData);
},
columns: [{
field: "text",
title: "No."
}],
dataSource: {
data: gridData,
}
});
})();
Thanks!

You need to include a schema for your datasource that specifies which property is the id of each item. In your case this happens to also be called "id" so add this:
dataSource: {
data: gridData,
schema: {
model: { id: "id" }
}
}
The grid will then correctly track and keep your saved changes.

jquery DataTables Editor: "select" field displays option value instead of label

I am using jquery's DataTables which is really working great. Then only problem I got is, that I am facing (in non-edit-view) the value of the select-field (which is an id). The user of course doesn't want to see the id of course.
Therefore I am looking for a possibility to configure that column in a way to show always the value of label property.
Here a some snippets:
$(document).ready(function() {
var table = $('#overviewTable').DataTable({
dom: "Tfrtip",
ajax: "/Conroller/GetTableData",
columns: [
{ data: "Id", className: "readOnly", visible: false },
{
data: "LoanTransactionId",
className: "readOnly readData clickable",
"fnCreatedCell": function(nTd, sData, oData, iRow, iCol) {
$(nTd).html("<a href='#'>" + oData.LoanTransactionId + "</a>");
}
},
{ data: "Id", className: "readOnly" },
{ data: "property_1", className: "readOnly" },
{ data: "Priority" },
{ data: null, className: "action readOnly", defaultContent: 'Info' }
],
order: [1, 'asc'],
tableTools: {
sRowSelect: "os",
sRowSelector: 'td:first-child',
aButtons: []
}
});
// data reload every 30 seconds
setInterval(function() {
table.ajax.reload();
}, 30000);
editor = new $.fn.dataTable.Editor({
ajax: "PostTable",
table: "#overviewTable",
fields: [
{
label: "Id",
name: "Id"
},
{
label: "Column 1",
name: "property_1"
},
{
label: "Priority",
name: "Priority",
type: "select",
options: [
{ label: "low", value: 0 },
{ label: "mid", id: 1 },
{ text: "high", id: 2 }
]
}
]
});
// Inline Edit - only those who are not readOnly
$('#overviewTable').on('click', 'tbody td:not(:first-child .readOnly)', function(e) {
editor.inline(this, {
submitOnBlur: true
});
});
How it looks in the display mode
How it looks in the edit mode

See the documentation on columns.render
You want to modify your column options for priority
Preferred Option: Your data source has a field with the priority as a string
This is the best option, as you don't want to have two places with this business logic. Keep it out of the client code.
Also, you will want to modify the editor as well so that the options used have been retrieved dynamically from the server to keep this business logic out of the client too. This is left as an exercise for the reader.
Since you don't provide details on what your data structure looks lik, I'm assuming it is an object, and it has an attribute priorityAsString so use the string option type for render.
columns: [
...
{
data: "Priority" ,
render: "priorityAsString",
},
Option 2) You write a function to map priority to string
Do this if you can't get the data from the server. But remember you will need to update many places when the priority list changes.
columns: [
...
{
data: "Priority" ,
render: renderPriorityAsString,
},
...
function renderPriorityAsString(priority) {
const priorityToString = {
0: 'low',
1: 'med',
2: 'high',
};
return priorityToString[priority] || `${priority} does not have a lookup value`;
}

"render": function ( data, type, full ) { return label;}

Json data not showing in extjs grid

Given data in the form:
var grid_data = [ {Hello: 'World'}, {Jesus:'Navas'} ]
I wish to draw a grid like so:
The grid shows with 2 rows but with no data, I can't find the problem in the following code:
var grid_store = Ext.create('Ext.data.Store', {
fields: [
{name: 'Property'},
{name: 'Value'}
],
data: grid_data
});
// create the Grid
var grid_view = Ext.create('Ext.grid.Panel', {
store: grid_store,
renderTo: 'info_panel',
stateful: true,
stateId: 'stateGrid',
columns: [
{
text : 'Property',
width : 100,
sortable : true,
dataIndex: 'Property'
},
{
text : 'Value',
width : 80,
sortable : false,
dataIndex: 'Value'
}
],
height: 350,
width: 600,
title: 'Array Grid',
viewConfig: {
stripeRows: true
}
});
Renders to:
<div id="info_panel"></div>
If you're wondering how I got the example image, I changed the store to an ArrayStore and re-formatted the data into arrays, but I'd prefer to miss out that step and insert the data as-is.
edit:
I think what I'm really asking for is a way to alert extjs to use the JSON keys as values, as opposed to most of the grid examples out there that take the form:
{value: 'Hello'}, {property: 'World'}

As one of the commenters and your edit suggested, your grid is built to consume a json with 'Property' and 'Value' being the keys for the json objects. I don't know if it's possible for you to change the source of the data to send in the reformatted json, but if not, you can always just run a quick loop to do so after receiving the data:
var new_data = [];
Ext.each(grid_data, function(obj) {
for (var prop in obj) {
new_data.push({
Property: prop,
Value: obj[prop]
});
}
}, this);

Ext4 reload tree

I am newbie to EXT and I am having problem with reloading EXT 4 tree. I have been trying with:
Ext.tree.getLoader().load(tree.root);
Ext.tree.load(tree.root);
Ext.tree.getRootNode().reload();
Ext.tree.TreePanel.root.reload();
Ext.data.TreeStore.reload();
And nothing helped, I hope someone could clarify this to me, here is the code:
Edit: I have added complete code, as you can see everything is inside extOnReady method, I have removed var before var tree and still I got the same result
Ext.QuickTips.init();
var store = Ext.create('Ext.data.TreeStore',{
proxy: {
type: 'ajax',
url: 'url1'
},
root: {
text: 'TOPP',
id: '1',
expanded: true
},
folderSort: true,
sorters: [{
property: 'text',
direction: 'ASC'
}]
});
tree = Ext.create('Ext.tree.Panel',{
id:'company_tree',
store: store,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop'
}
},
renderTo: 'tree-div',
height: 300,
width: 766,
title: gettext('Companies'),
useArrows: true,
dockedItems: [{
xtype: 'toolbar',
items: [ {
text: gettext('Collapse All'),
handler: function(){
tree.collapseAll();
}
}]
}]
});
var loadingMask = new Ext.LoadMask(Ext.get('tree-div'),{
msg: gettext("Loading...")
});
tree.on('itemmove', function(tree, oldParent, newParent, index, options){
if(confirm(gettext('Are you sure you want to move this company?'))){
loadingMask.show();
Ext.Ajax.request({
scope: this,
url: 'url2/',
success:function(){
loadingMask.hide();
},
params: {
'ajaxAction[moveNode]': '',
index: index,
nodeid: tree.data.id,
parentNodeID: newParent.data.id,
oldParentNodeID: oldParent.data.id
}
});
}else{
Ext.getCmp('company_tree').getStore.load();
}
});
Also I have tried to reload through console[Ext.getCmp('company_tree').getStore.load();] and it worked. When I try it through code it returns an error regarding fly function
n is null
[Break On This Error]
Ext.fly(n.firstChild ? n.firstChild : n).highlight(me.dropHighlightColor);

Are you really trying to call these methods directly on Ext.tree namespace or Ext.tree.TreePanel class? If so you really need to educate yourself on the difference between objects and classes.
And don't just attempt to guess what a method might be named. Had you looked it up from the manual you would have found out that there is no such method as reload on Tree, TreeStore or TreeView.
What you need to call to reload the tree is the load method of TreeStore:
tree.getStore().load();

Celleditor for object value Extjs4

I'm looking for a best solution how to do this.
What I have:
// model
Ext.define("User", {
extend: "Ext.data.Model",
fields: [
{name: "id", type: "int"},
{name: "name"},
{name: "description", type: "string"}
]
});
// store with data
var oStore = new Ext.data.Store({
model: "User",
data: [
{id: 1, name: {name:"John"}, description: "Fapfapfap"},
{id: 2, name: {name:"Danny"}, description: "Boobooboo"},
{id: 3, name: {name: "Tom"}, description: "Tralala"},
{id: 4, name: {name:"Jane"}, description: "Ololo"},
]
});
// and finally I have a grid panel
Ext.create("Ext.grid.Panel", {
columns: [
{dataIndex: "id", header:"ID"},
{
dataIndex: "name",
header: "Name",
renderer: function(value){return value.name;},
editor: "textfield"},
{dataIndex: "description", header: "Description", flex: 1, editor: "htmleditor"}
],
plugins: [new Ext.grid.plugin.CellEditing({clicksToEdit: 2})],
store: store,
renderTo: document.body
});​
When I doublecick on a cell I see [object] Object in editor's field, and when I enter valid value than I see empty cell in the grid.
So, the question is – how could I setup celleditor to get data not from record.name but from record.name.name?

You can override get and set methods on model, so the will support multi-level field names. Below is sample implementation.
Ext.define("User", {
extend: "Ext.data.Model",
fields: [
{name: "id", type: "int"},
{name: "name"},
{name: "description", type: "string"}
],
get: function(key) {
if (Ext.isString(key) && key.indexOf('.') !== -1) {
var parts = key.split('.');
var result = this.callParent([ parts[0] ]);
return result[parts[1]];
}
return this.callParent(arguments);
},
set: function(key, value) {
if (Ext.isString(key) && key.indexOf('.') !== -1) {
var parts = key.split('.');
var result = this.get(parts[0]);
result[parts[1]] = value;
this.callParent([ parts[0], result ]);
return;
}
this.callParent(arguments);
}
});
I am not sure if store detects change made to name.name field. If no, you should also probably mark record as dirty.
Working sample: http://jsfiddle.net/lolo/dHhbR/2/

The editor accepts whatever value is provided in the "dataIndex" field of the column. Since "name" is an object, that's what you're getting. After entering a name in the editor, value is equal to a string (not an object) and your renderer is trying to get the name property of the string.
The easiest way to fix this is to make the "name" field of your store a string instead of an object. However, I'm assuming there's a reason you want to do it this way.
The CellEditing plugin has three events it can listen for: beforeedit, edit, and validateedit. You can implement a beforeedit listener to get the "name" object from the column, then get the "name" property of that object and fill the editor with that value. Then on validateedit, get the value from the editor and set the "name" property of the "name" object in the record with that value.
For quick reference, here's the event definition: CellEditing events

An easier way is to modify your User Model object to map the "name" property differently:
{name: "name", mapping:'name.name'}
then everything else stays the same.