Aug 04, 2016, 1:20 PM
[CLOSED] grid doesn't reload after reset
Hi,
I am creating and loading a grid panel dynamically upon click of a "Create" button on UI which calls the Create() function in JS. Everything works fine till here, grid gets created with the correct data, then saving the data by pressing SAVE button ("Save()" function in below code) and reseting the grid(Reset() function in below code called from within Save()).
But the grid doesn't load the data second time when I create the grid again (by pressing Create button again on UI). I am not able to understand why it is not loading the data after reset of a grid. Am I resetting it wrong way?
Please help,
Thanks
cshtml file
I am creating and loading a grid panel dynamically upon click of a "Create" button on UI which calls the Create() function in JS. Everything works fine till here, grid gets created with the correct data, then saving the data by pressing SAVE button ("Save()" function in below code) and reseting the grid(Reset() function in below code called from within Save()).
But the grid doesn't load the data second time when I create the grid again (by pressing Create button again on UI). I am not able to understand why it is not loading the data after reset of a grid. Am I resetting it wrong way?
Please help,
Thanks
cshtml file
X.Panel().Items(
X.FormPanel().ID("myPanel").DefaultButton("btnCreate").Layout(LayoutType.HBox).AutoScroll(true)
.Items
(
)
)
)
js code:
var matrixGrid;
function Reset()
{
matrixGrid.getStore().removeAll();
matrixGrid.getStore().loadData([], false);
matrixGrid.reconfigure(null, null);
}
function Save()
{
if(SaveSuccessfull)
Reset();
}
function Create()
{
$.ajax({ url: "/Home/Create",
data: JSON.stringify({ inputdata: selectedValues }),
async: false,
type: "POST",
contentType: 'application/json',
success: function (result) {
var columns = [];
var _fields = [];
var data = {
Key: [],
Value: []
};
var nameCount = 0;
var resultSet = result.result;
resultSet.forEach(function (element) {
for (var key in element) {
if (element.hasOwnProperty(key)) {
var keyStr = key;
data.Key.push(keyStr);
data.Value.push(element[key]);
}
}
}
});
var column;
var count = 0;
resultSet.forEach(function (element, index, ar) {
for (var key in element) {
if (!element.hasOwnProperty(key)) continue;
if (element.hasOwnProperty(key)) {
var field = {};
var elementValue = element[key];
var typeCheck = typeof elementValue;
field['name'] = key;
if (key.startsWith('Completed')) {
field['type'] = 'date';
field['submitFormat'] = 'm/d/Y';
field['submitValue'] = true;
}
else {
switch (typeCheck) {
case 'number':
field['type'] = 'int';
break;
case 'boolean':
field['type'] = 'string';
break;
case 'string':
field['type'] = 'string';
break;
case 'object':
field['type'] = 'object';
break;
case 'date':
field['type'] = 'date';
break;
default:
}
}
_fields.push(field);
if (key == 'EmployeeId' || key == 'EmployeeGroup'
|| key == 'GroupMemberId') {
column = Ext.create('Ext.grid.column.Column', {
text: key,
dataIndex: key,
hidden: true
});
columns.push(column);
}
else {
if (!key.startsWith('EmployeeName') && !key.startsWith('EmployeeStatus') && !key.startsWith('Completed')) {
column = Ext.create('Ext.grid.column.Column', {
text: key,
dataIndex: key,
width: 80
});
columns.push(column);
}
}
}
}
});
var keyValue = data.Key;
var values = data.Value;
var nameKeyValue = [];
var nameFinalValue;
for (var i = 0; i < keyValue.length; i++) {
for (var j = 0; j < values.length; j++) {
if (keyValue[i].startsWith('Name')) {
nameKeyValue.push(values[j]);
}
}
}
for (var i = 0; i < keyValue.length; i++) {
nameFinalValue = nameKeyValue[i];
if (keyValue[i].startsWith('Name')) {
var status = keyValue[i + 1];
var completed = keyValue[i + 2];
column = Ext.create('Ext.grid.column.Column', {
text: nameFinalValue,
dataIndex: nameFinalValue,
columns: [
Ext.create('Ext.grid.column.Column', {
text: 'Employee Status',
dataIndex: status,
width: 80,
stopSelection: false,
editable: true,
editor: {
xtype: 'checkbox'
},
field: { xtype: 'checkbox' }
}),
Ext.create('Ext.grid.column.Column', {
text: 'Completed',
dataIndex: completedOn,
width: 80,
editor: new Ext.form.DateField({
xtype: 'datefield',
format: 'm/d/y',
renderer: Ext.util.Format.dateRenderer('m/d/Y')
})
})
]
});
columns.push(column);
}
}
// *** new code
var store = Ext.create("Ext.data.Store", {
id: 'myStore',
fields: _fields,
groupField: 'Group',
proxy: {
type: 'ajax',
reader: {
type: 'json',
root: 'data'
}
}
});
matrixGrid = Ext.create('Ext.grid.Panel', {
store: Ext.data.StoreManager.lookup('myStore'),
columns: columnsArr,
selModel:sm,
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
listeners: {
'edit': function (editor, e, eOpts) {
onEdit(editor, e, eOpts);
}
}
})
],
features: [groupingFeature],
viewConfig: {
stripeRows: true,
trackOver: true
}
});
var frmPanel = App.myPanel;
frmPanel.add(matrixGrid);
frmPanel.doLayout();
matrixGrid.getView().refresh();
matrixGrid.getStore().loadData(result.result);
selectedValues = [];
columnsArr = [];
}
}
});
}
Last edited by fabricio.murta; Aug 09, 2016 at 8:26 PM.