I'm looking for way how to on button click reset all fields in EditorGridPanel in one column
There is a code of column
....
{
id: 'field_id',
header: "Amount [ton/ha]",
sortable: true,
dataIndex: 'amountId',
width: 150,
summaryType: 'sum',
summaryRenderer: function(v){
return v +' [ton/ha]';
},
editor: new Ext.form.NumberField({
allowBlank: false,
allowNegative: false,
style: 'text-align:left'
}),
groupName: 'Amount'
},
.....
So far this is going to be editable, what you can see from the code and it works perfect, just want to add possibility to reset all values, is it posible at all?
Store and even Record have methods for rejecting and commiting changes. I haven't used them but I believe it would be like this:
Ext.getCmp('myGrid').getStore().getAt(0).rejectChanges();
and for all rows in the store:
Ext.getCmp('myGrid').getStore().rejectChanges();
Related
I am really new to the jqGrid. I'm loading local file (I'm parsing csv file into json and then transfer the array to jqGrid). Table generated through jqGrid should allow user to modify, add and delete the data in the grid. I tried to resolve my problem using various answers from here like:
Adding new row to jqGrid using modal form on client only
There I have found the example made by Oleg for the 4.7 version of jqGrid and reproduced the same code for my purpose. The result was that I am able to delete row which I added after the grid initialisation but I am unable to delete any other row which was loaded from the array.
Another interesting thing is that I am able to modify the rows loaded from array, the only thing I cannot do with the grid is to delete rows loaded from array. I appreciate any advices.
Here is part of the code with jqGrid:
var delSettings = {
onclickSubmit: function () {
var $this = $(this), p = $this.jqGrid("getGridParam"), newPage = p.page;
if (p.lastpage > 1) {// on the multipage grid reload the grid
if (p.reccount === 1 && newPage === p.lastpage) {
// if after deliting there are no rows on the current page
// which is the last page of the grid
newPage--; // go to the previous page
}
// reload grid to make the row from the next page visable.
setTimeout(function () {
$this.trigger("reloadGrid", [{page: newPage}]);
}, 50);
}
return true;
}
};
$("#jqGrid").jqGrid({
datatype: "local",
data: results.data,
editurl: "clientArray",
colModel: [
{
label: 'Id',
name: 'Id',
width: 60,
editable: true,
key: true,
sorttype: 'number'
},
{
label: 'Company',
name: 'Company',
width: 90,
editoptions: {size: 40},
editable: true,
sorttype: 'string'
},
{
label: 'Address',
name: 'Address',
width: 100,
editoptions: {size: 40},
editable: true
},
{
label: 'City',
name: 'City',
width: 80,
editoptions: {size: 40},
editable: true
}
],
height: '100%',
viewrecords: true,
caption: "Baza klientów Klimatest",
pager: "#jqGridPager",
sortable: true,
ignoreCase: true,
cmTemplate: {editable: true, searchoptions: {clearSearch: true }},
rowNum: 5,
rowList: [5, 10, 20],
});
// toolbar searching
$('#jqGrid').jqGrid('filterToolbar', { defaultSearch: 'cn'});
$('#jqGrid').jqGrid('navGrid',"#jqGridPager",
{ edit: true, add: true, del: true, search: true, refresh: true, view: true},
// options for the Edit Dialog
{
editCaption: "The Edit Dialog",
recreateForm: true,
closeAfterEdit: true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Add Dialog
{
closeAfterAdd: true,
recreateForm: true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Delete Dialog
delSettings,
// options for the Search Dialog
{
},
// options for the View Dialog
{
});
// add first custom button
$('#jqGrid').navButtonAdd('#jqGridPager',
{
buttonicon: "ui-icon-calculator",
title: "Column chooser",
caption: "Columns",
position: "last",
onClickButton: function() {
// call the column chooser method
jQuery("#jqGrid").jqGrid('columnChooser');
}
});
EDIT
Data source is the result of parsed CSV file via Papaparse.js plugin (array of objects), which looks like this:
Id: "100,1"
Address: "Strefowa 8"
Company: "DSSE Sp. z o.o."
City: "Warsaw"
I edited the code just like Oleg suggested and I'm still able to delete only records which are added via interface of jqGrid.
I don't know if it may help, but when I click delete icon and confirm that I want to delete selected row, that row is no longer highlighted, but still visible. Thanks for feedback.
You have clear error in your code near // options for the View Dialog block. The View option should be included after delete and search options (see the documentation). So your current code don't use delSettings options.
I recommend you additionally to include test data in your next questions, because some problems exist only with some specific format of input data.
UPDATED: The problem is in the data which you use. The value for Id which you use contains comma ("100,1"). It's not allowed for jqGrid. First of all id in HTML should not use characters which have special meaning in CSS. The second problem: delGridRow method uses commas in separator to delete multiple rows at once. So the usage of id="100,1" will follows to attempt to delete tow rows: one row with id=100 and the second one with the id=1. By the way I'm developing now jqGrid in my fork of GitHub. I fixed many restrictions with the usage of special characters in ids. So you will be do able to use id="100,1" and successfully delete the rows if you would use jqGrid from my fork.
I recommend you to use underscore if you need to construct id which consist from multiple numbers: Id: "100_1" instead of Id: "100,1".
I am developing a asp.net MVC 4 project which uses jQgrid for generating table data.In my generated grid i am providing an inline edit option for particular columns in a row.
My problem is like while editing a particular row if i press Enter or Esc key my selected row is going out of edit mode.
I want to disable those events Enter and Esc .
I googled about this problem and i get some interesting posts How to disable Save Handler on Jqgrid while doing editing
Here in the above reference post i can see that some of the lines are commented out from Jqgrid.src.js file which i dont think as a best solution.
Is there any other method so that i can disable both Enter and Esc Event in Jqgrid while doing inline editing.
Javascript COde
jQuery("#Grid").jqGrid({
url: baseUrl + '/api/Controller/method',
datatype: "json",
mtype: "POST",
colNames: ['Col1', 'Col2', 'Col3', 'Col4', 'Col5'],
colModel: [
{ name: 'col1', index: 'col1', align: 'center', editable: true, key:true },
{ name: 'col2', index: 'col2', align: 'center' },
{ name: 'col3', index: 'col3', align: 'center', editable: true, key:true },
{ name: 'col4', index: 'col4', align: 'center' },
{ name: 'col5', index: 'col5', align: 'center', editable: true, key:true }
],
jsonReader: {
root: 'data',
id: 'col2',
repeatitems: false
},
pager: $('#Pager'),
rowNum: 10,
rowList: [10, 25, 50, 100],
autowidth: true,
shrinkToFit: false,
viewrecords: true,
loadonce: true,
autoencode: true,
multiselect: true,
height: '100%',
width: '100%',
caption: "Record"
});
Sample Grid Structure
Note: Grid Image shown is not the actual grid generated with the above code.
Here in the above grid there are some columns are left editable.My scenario is like i want to put data in all editable column in each row , so that i can update the grid data to server by a button click placed below the grid(Button not shown in the above image).Here i am not using editUrl property of grid.
Currently if i edit first row and accidently if i press enter or Esc key the selected row will become non editable.I want to keep all editable cells in a row as editable untill i press the Submit button placed below the Grid.
My jQgrid Version is 4.5.4
Any help is appreciated.
It's difficult to answer on the question which don't contains neither JavaScript code nor exact references on jqGrid version which you use. You don't describe in which form you use inline editing in the grid.
The usage of Esc and Enter during inline editing can be managed by keys: true option. The exact syntax of the usage of keys option depend on how you use inline editing. For example you can call editRow directly or use some other methods mile inlineNav or the formatter: "actions" which calls editRow for you. The default value of keys option is already false, so you change the value somewhere in your code to true.
I have a grid that has a column in which the user can enter only a positive integer. Every other value is unacceptable.
For a text field i could have handled a similar scenario using a VType, but i am not able to add a VType to a column of a grid. Is it even possible to add one?
If yes, it would be great if someone could show me how to do it.
PFB the code for the grid:
xtype:'gridpanel',
id:'my-grid',
overflowY:'auto',
sortableColumns:false,
enableColumnHide:false,
enableColumnResize:true,
plugins:[
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit:1,
pluginId:'cellEditing'
})
],
store:new Ext.data.Store({
fields:['data1', 'data2'],
addRecords:false,
data:storeData
}),
columns:[
{
text:'NumberColumn',
dataIndex:'data1',
menuDisabled:true,
sortable:false,
flex: 4,
editor:{
xtype:'textfield',
allowBlank:false,
//tried adding vtype here...but didn't work...
},
renderer:function (value, metaData, record) {
return value
}
}
A vtype can be applied to a field never a column. A column only visualize a value while a fields allows you to enter and manipulate it. In your case you are using Cellediting which overlays the column with a Ext.form.Field instance, in your case a textfield which then allows you to enter/manipulate a value. So adding a valid vtype to a fieldconfig should work. Anyway there is no vtype for numeric so using it here is worthless in your case.
But your problem can easily be solved by using the following field:
{
xtype: 'numberfield',
allowDecimals: false,
minValue: 0,
allowBlank: false
}
i have a grid with a checkboxcolumn, all works fine but i would like to take different action between clicking on the checkbox itself and clicking besides it in the same field.
Is this feasable in ExtJs ? I work with version 3.3.1 but i guesss that an example from another version would get me started.
var checkColumn = new Ext.grid.CheckColumn({
header: 'Checklist OK ?',
dataIndex: 'checklist_ok',
width: 20,
align: 'center'
});
cmDiverse = new Ext.grid.ColumnModel({
defaults: {
"sortable": true,
"menuDisabled": false,
"align": "right"
},
store: storeDiverse,
columns: [{
"id": "id",
"header": "id",
"hidden": true,
"dataIndex": "id",
"width": 20
},
checkColumn, ...
gridDiverse = new Ext.ux.grid.livegrid.EditorGridPanel({
id: "gridDiverse",
enableDragDrop: false,
loadMask: true,
clicksToEdit: 1,
layout: 'anchor',
cm: cmDiverse,
....
Unfortunately you cannot differentiate between click inside and outside the checkbox, because all the listeners are on the column, and the checkbox is just a formatting of the text inside the column, not a real element.
I'm sure my questions have been addressed somewhere, but I've researched for a while now and can't seem to find the answers I'm looking for.
When using the inlineNav feature, is there a "delete" option? I haven't found any, so in order to use it, I have to create the grid using both the navGrid and inlineNav features, like this:
$("#attributeEditList").jqGrid( {
datatype: "local",
height: 150,
colNames: ['rowid', 'Vendor', 'Category', 'Key', 'Value', 'Flags', 'Status'],
colModel: [
{name: 'rowid', index: 'rowid', hidden: true, key: true},
{name: 'vendorCode', index: 'vendorCode', hidden: true},
{name: 'category', index: 'category', width: 120, editable: true, editrules:{required: true} },
{name: 'key', index: 'key', width: 120, editable: true, editrules:{required: true} },
{name: 'value', index: 'value', width: 200, editable: true, editrules:{required: true} },
{name: 'flags', index: 'flags', width: 80, editable: true, editrules:{required: true, integer: true} },
{name: 'status', index: 'status', hidden: true }
],
sortname: "category",
viewrecords: true,
caption: "Attributes",
rowNum: 20000,
pager: '#attributeEditPager',
editurl: "vendor/ajax/dummy.do",
data: vendor.attributes,
jsonReader : { repeatitems: false }
});
$("#attributeEditList").jqGrid( "navGrid", '#attributeEditPager', {
edit: false,
add: false,
del: true,
search: false,
refresh: false,
delfunc: deleteAttribute
}
);
$("#attributeEditList").jqGrid( "inlineNav", '#attributeEditPager' );
Is there any way to make the edits in the grid strictly client-side? I want my user to be able to make several edits (add/edit/delete) then post all of the changes in the grid, plus some other form changes outside of the grid, back to the server atomically. As far as I can tell, the editurl parameter is required, and must actually be a valid url, for editing to work.
Last, and I think this is the biggest issue I'm having, is when using the inlineNav feature. First, I click the "Add (+)" button to add a row, add the data, then click the "save" button. Then, if I click the "Add" button again, a new row is added, but the "Add" and "Edit" buttons remain active, while the "Save" and "Cancel" buttons are still disabled.
If you have any advice on these issues, please let me know.
Look at the demo from the old answer where I demonstrate how one can implement local form editing in jqGrid. You first question was about the "Delete" added by navGrid. So you can use the trick with setting processing: true which I suggested to make "Delete" button working locally. You should additionally use editurl: 'clientArray'. I posted my suggestion to trirand about one year ago (see here), but the local form editing is still not the part of jqGrid.
You are right that there are many situations in which inlineNav work buggy and if the user clicks on the buttons in a little other order one have wrong activated or wrong deactivated buttons. You have to activate/deactivate the buttons manually using $("#attributeEditList_ilsave").removeClass('ui-state-disabled'); or $("#attributeEditList_ilsave").addClass('ui-state-disabled');. The ids of the buttons will be constructed from the gridid and the postfix "_iladd", "_iledit", "_ilsave", "_ilcancel". I recommend you include such code in the onSelectRow or beforeSelectRow till the bugs will be not fixed in the main code of jqGrid.