I am starting to look at how I would get my grid edits back to a service via the datasource.
Following the documentation, I have set a local test data source as follows..
function getDataSource() {
var gridData = [
{
col1: new CellData('1', 'data1-1'),
col2: new CellData('2', 'data1-2')
},
{
col1: new CellData('3', 'data2-1'),
col2: new CellData('4', 'data2-2')
},
];
var dataSrc = new kendo.data.DataSource({
batch: true,
transport: {
read: function (e) {
e.success(gridData);
},
update: function (e) {
// batch is enabled
var updateItems = e.data.models;
// This is not called
// on success
e.success();
},
create: function (e) {
e.success(e.data);
},
destroy: function (e) {
e.success();
}
}
});
return dataSrc;
}
I have a toolbar setup (with the "Save Changes"), and this is calling the SaveChanges configuration event, how ever, just cannot see what else I need to do to get the following to occur..
Have the data sources update called
Mark the grid "on dirty" so that the red "edited" indicators on the edited cells disappear
I am having the same problem with the Add New record (though I can't get the grids "addRow" even to fire here)
I have the running example here
Any help would be great appreciated!
You need to specify the DataSource schema for this to work:
var dataSrc = new kendo.data.DataSource({
batch: false, // true would mean transport functions get multipe models in e.data
transport: {
// ....
},
schema: {
data: function (response) {
return response;
},
model: {
id: "id",
fields: {
id: {
editable: false,
defaultValue: 0 // 0 == new / unsaved row
},
col1: {
editable: true,
// new items would have that using default add button
defaultValue: {
id: 0,
CategoryName: ""
},
fields: { id: { editable: true }, display: { editable: true }
},
col2: {
editable: true,
fields: { id: { editable: true }, display: { editable: true } }
}
}
}
}
});
Also note:
grid.saveChanges will sync the DS, so you don't need to do anything in the event
There is no addRow event.
The default "create" button will try to add an empty object; since you work with nested objects, you need to add the row yourself so you can initialize the properties; thus you need a custom button and bind your action manually
(demo)
Related
I need to set Kendo grid action button Icon based on value. My code as follows,
function InitProductServicesGrid() {
var prodServiceDataSource = new kendo.data.DataSource({
transport: {
type: "json",
read:
{
url: SERVER_PATH + "/LTSService/ProductsService.asmx/GetProductServiceDetailsList",
type: "POST",
contentType: 'application/json',
data: GetAdditonalData,
datatype: "json"
},
update:
{
url: SERVER_PATH + "/LTSService/ProductsService.asmx/SaveProductService",
type: "POST",
contentType: 'application/json',
datatype: "json"
}
},
schema: {
data: function (result) {
return JSON.parse(result.d);
},
model: {
id: "Id",
fields: {
Id: { type: "int" },
ServiceTime: { type: "string" },
IsActive: { type: "boolean"}
}
}
},
requestEnd: function (e) {
if (e.type === "destroy") {
var grid = $("#productServicesGrid").data("kendoGrid");
grid.dataSource.read();
}
},
error: function (e) {
e.preventDefault();
if (e.xhr !== undefined && e.xhr !== null) {
var messageBody = e.xhr.responseJSON.Message;
ShowGritterMessage("Errors", messageBody, false, '../App_Themes/Default/LtsImages/errorMessageIcon_large.png');
var grid = $("#productServicesGrid").data("kendoGrid");
grid.cancelChanges();
}
},
pageSize: 20,
});
$("#productServicesGrid").kendoGrid({
dataSource: prodServiceDataSource,
sortable: true,
filterable: false,
pageable: true,
dataBound: gridDataBound,
editable: {
mode: "inline",
confirmation: false
},
columns: [
{ field: "Id", title: "", hidden: true },
{
field: "ServiceTime",
title: "Time Standard",
sortable: false,
editor: function (container, options) {
var serviceTimeTxtBox = RenderServiceTime();
$(serviceTimeTxtBox).appendTo(container);
},
headerTemplate: '<a class="k-link" href="#" title="Time Standard">Time Standard</a>'
},
{
title: "Action", command: [
{
name: "hideRow",
click: hideRow,
template: comandTemplate
}
],
width: "150px"
}
]
});
}
I wrote a custom template function as follows,
function comandTemplate(model) {
if (model.IsActive == true) {
return '<a title="Hide" class="k-grid-hideRow k-button"><span class="k-icon k-i-lock"></span></a><a title="Hide"></a>';
}
else {
return '<a title="Show" class="k-grid-hideRow k-button"><span class="k-icon k-i-unlock"></span></a><a title="Show"></a>';
}
}
But when I debug the I saw the following value for model value.
I followed this sample code as well. here you can see, I also set the custom template like the sample code. Please help me to solve this. Why I can't access model IsActive value from comandTemplate function.
Updated
When clicking hideRow action, I access the dataItem as follows.
function hideRow(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
if (dataItem.IsActive == true) {
dataItem.IsActive = false;
}
else {
dataItem.IsActive = true;
}
}
Is there any possible way to access data from template function as above or any other way?
I would suggest a different approach because you can't access grid data while rendering and populating grid.
My suggestion is to use two actions and hide it based on the flag (in your case IsActive).
Something like this: Custom command
NOTE: in visible function you can access item!
EDIT: you can access it and change it on dataBound traversing through all data.
Check this example: Data bound
I don't see the advantage of relying on the grid commands. You can render any button you want yourself and and use the dataBound event to bind a click handler:
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{
template: function(dataItem) {
const isActive = dataItem.isActive;
return `<a title=${isActive ? "Hide": "Show"} class="k-grid-hideRow k-button"><span class="k-icon k-i-${isActive ? 'lock' : 'unlock'}"></span></a>`
}
}
],
dataBound: function(e) {
e.sender.tbody.find(".k-grid-hideRow").click(evt => {
const row = evt.target.closest("tr")
const dataItem = e.sender.dataItem(row)
dataItem.set("isActive", !dataItem.isActive)
})
},
dataSource: [{ name: "Jane Doe", isActive: false }, { name: "Jane Doe", isActive: true }]
});
Runnable Dojo: https://dojo.telerik.com/#GaloisGirl/eTiyeCiJ
I want to be able to add an option for "--ANY--".
This does not work:
Ext.create('Rally.ui.ReleaseComboBox', {
hideLabel: false,
fieldLabel: "Release: ",
width: 275,
allowBlank: true,
listeners: {
beforerender: function( dd, opts ) {
var store = dd.getStore();
store.add( {
Name: '--ANY--'
});
etc...
Something like this example should work. Try listening to the store load and then use the loadData method to load the data directly into the store, ensuring that the passed in data is the correct format for the ReleaseComboBox.
Also, set the append parameter to true for loadData(). Otherwise, it will remove the existing records from the store and then add the data.
Ext.create('Ext.Container', {
items: [{
xtype: 'rallyreleasecombobox',
storeConfig: {
listeners: {
load: function(store) {
store.loadData([{formattedName: '--ANY--',
formattedStartDate: 'n/a',
formattedEndDate: 'n/a',
isSelected: false}],
true);
store.sort('formattedStartDate', 'DESC');
}
}
}
}],
renderTo: Ext.getBody().dom
});
i just start to dive in ExtJS Grid, I would like create some toolbar search like JqGrid below. Grid will show the result according to key typed in that column.
Can anyone show me the walkthrough ? ^_^
Thanks in advance for any answers.
jqgrid http://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/379109_10150531271858928_704228927_8868872_1607857946_n.jpg
The way I do it is I add a top toolbar to the gridpanel which contains searchfields. Then it's just the matter of hooking up events to callbacks.
Below is an example for ExtJS 3.x. It's edited out code from my project, so I might have cut out too much, or left something that's not needed. See buildTBar(), buildSearchBar() and attachListeners() methods in particular.
Ext.ns('MyNs');
MyNs.GridPanel = Ext.extend(Ext.grid.GridPanel,{
initComponent: function() {
this.colModel = this.buildColModel();
this.store = this.buildStore();
this.tbar = this.buildTBar();
MyNs.GridPanel.superclass.initComponent.call(this);
this.attachListeners();
},
attachListeners: function() {
this.on('render', function() {
this.getPagingBar().bindStore(this.getStore());
this.getSearchBar().bindStore(this.getStore());
});
//I use this grid in a tab, so I defer loading until tab is activated
this.on('activate',function() {
var store = this.getStore();
if(store.getCount() == 0) {
store.load({
params: {
start: 0,
limit: 20
}
})
}
});
},
buildColModel: function() {
return new Ext.grid.ColumnModel({
columns: [
{header: 'Index', dataIndex: 'index'}
]
})
},
buildStore: function() {
//return a store
},
buildTBar: function() {
var items = new Array(
this.buildPagingBar(),
this.buildSearchBar()
)
return {
xtype: 'panel',
items: items
}
},
buildPagingBar: function() {
return {
xtype: 'paging',
pageSize: 20,
displayInfo: true,
displayMsg: 'Records{0} - {1} z {2}',
}
},
buildSearchBar: function() {
return {
xtype: 'toolbar',
itemId: 'searchBar',
items: [
{xtype: 'textfield', itemId: 'index'},
],
bindStore: function(store) { //here we bind grid's store to searchbar
this.store = store;
var me = this;
store.on('beforeload', function(store, options) {
options.params.index = me.find('itemId','index')[0].getValue();
})
Ext.each(this.findByType('textfield'),function(field) { //let's have store reloaded on field changes
field.on('change', function(field, newValue, oldValue) {
store.reload();
})
})
}
}
},
getPagingBar: function() {
return this.getTopToolbar().findByType('paging')[0];
},
getSearchBar: function() {
return this.getTopToolbar().find('itemId','searchBar')[0];
}
});
I'm using ExtJS3 and I have a Ext.grid.GridPanel where each row has a checkbox on the left. At the top there are two buttons: 'refresh' and 'submit'. I want to be able to select multiple rows and submit all of them in one click of the submit button. As it is right now when I select multiple rows and hit submit it will submit the first one, then remove that item from the grid, and I have to hit submit again (the formerly checked rows are still checked).
How do I change the following code to make the submit button send all of the rows at one time?
var dataStore = new Ext.data.SimpleStore({ fields: [
{name: 'node'},
{name: 'ip'},
{name: 'groups'}
]});
var checkBoxSelMod = new Ext.grid.CheckboxSelectionModel();
var dataGrid = new Ext.grid.GridPanel ({
renderTo: document.body,
clickstoEdit: 2,
selModel : checkBoxSelMod,
xtype: 'grid',
layout: 'fit',
sm: new Ext.grid.CheckboxSelectionModel(),
tbar: [
{
text: 'Refresh',
icon: '$nroot/includes/extjs3/resources/images/slate/button/table_refresh.png',
cls: 'x-btn-text-icon',
handler: function() {
window.location = '$nroot/index.php/imaging/index';},
scope: this,
},
{
text: 'Submit Machine(s)',
icon: '$nroot/includes/extjs3/resources/images/slate/button/table_add.png',
cls: 'x-btn-text-icon',
handler: function() {
var sm = dataGrid.getSelectionModel();
var sel = sm.getSelected();
if (sm.hasSelection()) {
Ext.Msg.show({
title: 'Image Machine?',
buttons: Ext.MessageBox.YESNO,
msg: 'Continue with imaging (no undo!) process for server: '+sel.data.node+'?',
fn: function(btn){
if (btn == 'yes'){
var conn = new Ext.data.Connection();
conn.request({
url: '$nroot/index.php/imaging/image/',
params: {
action: 'delete',
node: sel.data.node,
mgmtip: sel.data.ip
},
success: function(resp,opt) {
dataGrid.getStore().remove(sel);
},
failure: function(resp,opt) {
Ext.Msg.alert('Error','Unable to image server - check debug logs');
}
});
}
}
});
}
}
}
],
store: dataStore,
columns: [
checkBoxSelMod,
{ id: 'node', header: "Node", width: 150, sortable: true, dataIndex: 'node'},
{ id: 'ip', header: "IP", width: 120, sortable: false, dataIndex: 'ip'},
{ id: 'groups', header: "Groups", width: 100, sortable: true, dataIndex: 'groups'},
],
stripeRows: true,
autoExpandColumn: 'node',
listeners: {
render: function(){ this.store.loadData(dataList); }
}
})});
When I change the code from getSelected to getSelections it returns this on page load:
item type is invalid for AcceptItem action
I can't find any examples that show multi-select with submit for GridPanels. Is there one I can reference?
EDIT, based on the solutions below I've modified the code to work as follows:
var sels = sm.getSelections();
if (sels.length > 0) {
var ips = [], nodes = [];
Ext.each(sels, function(sel) {
ips.push(sel.get('ip'));
nodes.push(sel.get('node'));
});
Ext.Msg.show({
title: 'Image Machine?',
buttons: Ext.MessageBox.YESNO,
msg: 'Continue with imaging (no undo!) process for servers: '+nodes.join(",")+'?',
fn: function(btn){
if (btn == 'yes'){
Ext.each(sels, function(sel) {
var conn = new Ext.data.Connection();
conn.request({
url: '$nroot/index.php/imaging/image/',
params: {
node: sel.get('node'),
mgmtip: sel.get('ip')
},
success: function(resp,opt) {
dataGrid.getStore().remove(sel);
},
failure: function(resp,opt) {
Ext.Msg.alert('Error','Unable to image server - check debug logs');
}
});
})
}
}
});
}
}
The most simple approach is to loop through the selected records and ask a question for each record.
var sels = sm.getSelections();
Ext.each(sels, function(sel) {
var node = sel.get('node'),
ip = sel.get('ip');
Ext.Msg.show({
title: 'Image Machine?',
buttons: Ext.MessageBox.YESNO,
msg: 'Continue with imaging (no undo!) process for server: '+node+'?',
fn: function(btn){
if (btn == 'yes'){
var conn = new Ext.data.Connection();
conn.request({
url: '$nroot/index.php/imaging/image/',
params: {
action: 'delete',
node: node,
mgmtip: ip
},
success: function(resp,opt) {
dataGrid.getStore().remove(sel);
},
failure: function(resp,opt) {
Ext.Msg.alert('Error','Unable to image server - check debug logs');
}
});
}
}
});
});
However, this may not be nice for the user to get a prompt for every row selected in the DataGrid. But if your service ('$nroot/index.php/imaging/image/') support posting several items you can ask the user one time and post all of them. I.e.
var sels = sm.getSelections();
if (sels.length > 0) {
var ips = [], nodes = [];
Ext.each(sels, function(sel) {
ips.push(sel.get('ip'));
nodes.push(sel.get('node'));
});
Ext.Msg.show({
title: 'Image Machine?',
buttons: Ext.MessageBox.YESNO,
msg: 'Continue with imaging (no undo!) process for servers: '+nodes.join(",")+'?',
fn: function(btn){
if (btn == 'yes'){
var conn = new Ext.data.Connection();
conn.request({
url: '$nroot/index.php/imaging/image/',
params: {
action: 'delete',
nodes: nodes,
mgmtips: ips
},
success: function(resp,opt) {
Ext.each(sels, function() { dataGrid.getStore().remove(this) });
},
failure: function(resp,opt) {
Ext.Msg.alert('Error','Unable to image server - check debug logs');
}
});
}
}
});
}
So I posted this last week to the ExtJS forums, but no one has responded and I'm going a bit crazy trying to figure it out:
I'm fairly new to ExtJS (just learned it last week for work), but I've been working with other JavaScript libraries for quite some time now. I'm making a custom control for editing a list of attributes (currently populated by a JSON request). I'm using PropertyGrid's with custom GridEditor's (created by extending various Ext.form fields). All of my custom fields work except one, which is a repeating value editor. Basically the field is going to be passed a simple 2d key/value pair array by the JSON request, which it displays in an EditorGridPanel (inside of a Ext.Window that I've created).
Here is the section of the JSON request that defines the repeating value editor:
{
key: 'Repeating',
type: 'repeating',
category: 'Category A',
options: {
dataArray: [
{key: 'key A', value: 'value A'},
{key: 'key B', value: 'value B'},
{key: 'key C', value: 'value C'}
]
}
}
The key is the name for the field (displayed on the left column of the PropertyGrid).
The type tells the function which creates all of the grid editors what type of custom editor to use.
The category is used to determine which PropertyGrid the GridEditor is added to (I have multiple PropertyGird's, all contained in a Panel with layout: 'acordion').
Anything in options is added to the extended Ext.form field when it is created.
So dataArray is attached to my repeating value editor for setting up the initial key/value pairs and to store the array passed back to the GridEditor by the Ext.Window used for editing it.
After some experimenting I decided to use a TriggerField as the GridEditor for my repeating value type. Here is the code for the definition of the repeating value field:
Ext.form.customFields = {
'repeating': Ext.extend(Ext.form.TriggerField, {
triggerClass: 'x-form-edit-trigger',
enableKeyEvents: true
})
};
And here is the code that sets it up:
Ext.form.customFields['repeating'] = Ext.extend(Ext.form.customFields['repeating'], {
onTriggerClick: function()
{
this.editorWindow.show();
},
listeners: {
'render': function(field)
{
field.editorWindow = new Ext.MultiSelectWindow({
data: field.dataArray,
parent: field
});
},
'keydown': function(field, event)
{
event.stopEvent();
},
'beforerender': function()
{
for (i in this.opt) {
if (i != 'store') {
this[i] = this.opt[i];
}
else {
this.store.loadData(this.opt.store);
}
}
if (this.regex != undefined) {
this.validator = function(value)
{
return this.regex.test(value);
};
}
}
}
});
And finally, here is the code for the custom editor window:
Ext.MultiSelectWindow = function(args)
{
var obj = this;
obj.args = args;
obj.KeyValue = new Ext.data.Record.create([{
name: 'key'
}, {
name: 'value'
}]);
obj.gridStore = new Ext.data.Store({
data: obj.args.data,
reader: new Ext.data.JsonReader({}, obj.KeyValue),
autoLoad: true
});
obj.cm = new Ext.grid.ColumnModel([{
id: 'key',
header: "Key",
dataIndex: 'key',
editor: new Ext.form.TextField({
allowBlank: false
}),
hideable: false,
sortable: false,
menuDisabled: true,
css: 'font-weight: bold;'
}, {
id: 'value',
header: "Value",
dataIndex: 'value',
editor: new Ext.form.TextField({}),
hideable: false,
sortable: false,
menuDisabled: true
}]);
obj.gridEditor = new Ext.grid.EditorGridPanel({
cm: obj.cm,
height: 280,
store: obj.gridStore,
autoExpandColumn: 'value',
listeners: {
'render': function()
{
// set up local aliases
obj.a = new Array();
obj.a.grid = obj.gridEditor;
obj.a.store = obj.a.grid.getStore();
obj.a.sel = obj.a.grid.getSelectionModel();
}
},
bbar: [{
text: 'Add',
cls: 'x-btn-text-icon',
icon: '/lib/images/add.png',
listeners: {
'click': function()
{
var kv = new obj.KeyValue({
key: '',
value: ''
});
var row = obj.a.store.data.items.length;
obj.a.grid.stopEditing();
obj.a.store.insert(row, kv);
obj.a.grid.startEditing(row, 0);
}
}
}, {
text: 'Delete',
cls: 'x-btn-text-icon',
icon: '/lib/images/delete.png',
listeners: {
'click': function()
{
if (obj.a.sel.selection)
obj.a.store.remove(obj.a.sel.selection.record);
}
}
}]
});
obj.panelAll = new Ext.Panel({
border: false,
layout: 'absolute',
items: [new Ext.Panel({
width: 250,
border: false,
x: 0,
y: 0,
items: obj.gridEditor
}), new Ext.Panel({
border: false,
x: 254,
y: 0,
items: [new Ext.Button({
cls: 'x-btn-icon-side',
icon: '/lib/images/arrow_up.png',
listeners: {
'click': function()
{
if (obj.a.sel.selection) {
var row = obj.a.sel.selection.cell[0];
var rec = obj.a.store.getAt(row);
if (row >= 1) {
obj.a.store.remove(rec);
obj.a.store.insert(row - 1, rec);
obj.a.grid.startEditing(row - 1, 0);
}
}
}
}
}), new Ext.Button({
cls: 'x-btn-icon-side',
icon: '/lib/images/arrow_down.png',
listeners: {
'click': function()
{
if (obj.a.sel.selection) {
var row = obj.a.sel.selection.cell[0];
var rec = obj.a.store.getAt(row);
var len = obj.a.store.data.items.length;
if (row < len - 1) {
obj.a.store.remove(rec);
obj.a.store.insert(row + 1, rec);
obj.a.grid.startEditing(row + 1, 0);
}
}
}
}
})]
})]
});
obj.win = new Ext.Window({
title: 'Repeating Value Editor',
layout: 'fit',
closeAction: 'hide',
border: false,
items: obj.panelAll,
width: 300,
height: 350,
resizable: false,
shadow: false,
buttonAlign: 'left',
buttons: [{
text: 'OK',
handler: function()
{
// reset the repeating field data array
obj.args.parent.dataArray = [];
for (r in obj.a.store.data.items)
obj.args.parent.dataArray[r] = obj.a.store.data.items[r].data;
obj.args.parent.setRawValue(attrValueToString(obj.args.parent.dataArray));
obj.win.hide();
}
}, {
text: 'Cancel',
handler: function()
{
obj.win.hide();
}
}]
});
obj.show = function()
{
obj.win.show();
obj.a.store.loadData(obj.args.parent.dataArray);
}
}
Now for my problem: all of this works fine, except for the 7th line of the window's 'OK' button handler ( obj.args.parent.setRawValue(attrValueToString(obj.args.parent.dataArray)); ).
obj is a self-alias.
obj.args.parent is an alias for the field that opened the repeating value editor window.
attrValueToString() is a function that takes in a 2d array and converts it to a string with special formatting so it can be displayed in a readable, meaningful manner in the TriggerField's textbox.
The data is loaded back into the field's dataArray variable and if you open the editor again, it will have the new data included in the view. I can't, however, manage to get any sort of value to be displayed in the TriggerField after it has been created. I have tried both obj.args.parent.setValue('abc') and obj.args.parent.setRawValue('abc') . No exception is thrown, yet the value displayed in the TriggerField does not change. I even tried creating a custom function for setting the value from within the TriggerField - something like this:
Ext.form.customFields['repeating'] = Ext.extend(Ext.form.customFields['repeating'], {
setFieldValue: function(value){
this.setValue(value);
}
});
This custom function works if called from within the TriggerField, but not when called from somewhere else (i.e. the editor window's 'OK' button handler). The function can be called successfuly from anywhere and does not produce any exceptions, however, it only sets the value correctly if called from within the TriggerField.
The custom field works perfectly when instantiated as a basic form field:
var sample = new Ext.form.customFields['repeating']({
renderTo: Ext.getBody(),
dataArray: [
{key: 'key A', value: 'value A'},
{key: 'key B', value: 'value B'},
{key: 'key C', value: 'value C'}
]
});
I have scoured the ExtJS API documentation and done every possible google search I can think of. I found a few forum posts that seem to be from people having a similar problem, but they never get a clear answer.
Any help with this matter would be most appreciated - thanks in advance!
I think you should use Ext.override for onTriggerClick handler function instead of redefining it in your superclass.
You also could set it right after triggerField creation (possibly in the 'render' event handler) by assigning it to a function name, i.e. trigger.onTriggerClick = somefunction.