I have a tabulator table with many items, and moving a row outside the displayed range of rows involves a number of steps (moving, dropping, scrolling, then moving again, etc.)
Has anyone come up with a method to scroll the table when the user drags a row above or below the displayed range? Here is a gif and a JSFiddle which demonstrates the problem.
https://jsfiddle.net/sunny001/puqwemnf/5/
const data = [];
for (let i = 0; i < 10000; i++){
data.push({id: i, name: 'name' + i})
}
const table = new Tabulator('#table', {
height: 400,
data: data,
movableRows: true,
columns: [
{
rowHandle: true,
formatter: "handle",
headerSort: false,
frozen: true,
width: 30,
minWidth: 30
},
{field: 'id', title: 'id'},
{field: 'name', title: 'name'}
],
selectable: true
})
Related
I have a react-datatable in which i am having first column as auto increment, But when i filter the other column serial number column is also getting changed.
Before
After
I want serial number always be serialized
Code for datatable column is as followed
const columns = [
{
name: "#",
selector: (row) => row.index,
sortable: true,
maxWidth: 50,
minWidth: 50,
},
{
name: "Name",
selector: (row) => row.lo_name,
sortable: true,
},
];
I am using jqgrid in my application. We have functionality to do inline editing and saving.Now editing is working fine but the problem is with focus. When i click on edit button all cells are focused as expected and later i perform modifications and save, now focus from that row won't go off.
Code what I have tried is:
col name and col model code:
colNames: ['Id','Category Name','Category Label','Sort Order','Default','Active','Action'],
colModel: [
{name:'id', hidden : true, key : true},
{name:'CategoryName',index:'1',sortable:false, width: 343, editable: true,
editoptions:{size:"40",maxlength:"40"}
},
{name:'CatLable', index:'2',width:250, editable: true,edittype:"select",
editoptions:{value:"#{contexts.sessionContext.get('categoryLabel')}"}
},
{name:'DispOrder',index:'3',sortable:false, width: 100, align:"center", editable: true, editrules:{number:true},
editoptions:{size:"3",maxlength:"3"}
},
{name:'IsDefault',index:'4',sortable:false,width:60,search:false, resizable: false},
{name:'IsActive',index:'5',sortable:false,width:60,search:false, resizable: false},
{name: 'Action', index: '6', width: 85, sortable: false, formatter: 'actions',
}
}
],
format options code:
{name: 'Action', index: '6', width: 85, sortable: false, formatter: 'actions', formatoptions: {
// we want use [Enter] key to save the row and [Esc] to cancel editing.
url: "#myurl",
keys: true,
"delbutton":false,
onEdit:function(rowid) {
lastsel2 = rowid;
}
}
}
Reload grid code:
gridComplete: function(){
unblockB2BUI();
var recs = parseInt(jQuery("#categoryResults").getGridParam("records"),10);
if (recs == 0) {
jQuery("#logGridWrapper").hide();
jQuery(".noResMsg").show();
}
else {
jQuery(".noResMsg").hide();
jQuery('#logGridWrapper').show();
}
}
Grid for editing:
Grid when try to save the edited values:
Update:
Grid after saving and going to edit one more row:
Someone please suggest me how can I come out of the focus when i click on save icon.
Thanks in advance.
At present I'm getting all the cells (with editable:true) in the row editable in which i clicked and not only the clicked the cell. The table is similar to the table in this link: http://www.ok-soft-gmbh.com/jqGrid/ClientsideEditing4.htm. I've gone through the link: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:cell_editing, but didn't help (may be due to my fault in the way i tried) and also tried the answers given in stackoverflow related questions (used the attributes: cellEdit: true, cellsubmit: "clientArray").
Please help me using the above link as reference http://www.ok-soft-gmbh.com/jqGrid/ClientsideEditing4.htm (I think mainly the "onSelectRow", "ondblClickRow" functions need to be updated. i tried onSelectCell etc. but failed! ).
Thanks in advance.
If you need to use cell editing you have to include cellEdit: true in jqGrid definition. If you use local datatype then you should use cellsubmit: "clientArray" additionally. If you want to save data on the remote source you have to implement editing in your server code and specify cellurl option of jqGrid. The documentation describes what jqGrid send to the server on saving of cell.
I'm currently working on an Angular 2 app with Typescript, and I had a different need where I wanted to be able to click a row in the grid, but only have one cell editable. I didn't like the user experience where the user had to click the actual cell to edit it. Instead, clicking the row highlights the row and then makes the one cell editable. Here's a screenshot:
The trick was that I needed to set cellEdit to false on the grid and then set the individual column editable to true when declaring my column model array, and write a change event for the editoptions of the column. I also had to write code for the the onSelectRow event of the grid, to keep track of the current row selected and to restore the previous row selected. A snippet of the Typescript code is below:
private generateGrid() {
let colNames = ['id', 'Name', 'Total', 'Assigned', 'Distributed', 'Remaining', 'Total', 'Assigned', 'Remaining', 'Expiration'];
let self = this;
// declare variable to hold Id of last row selected in the grid
let lastRowId;
let colModel = [
{ name: 'id', key: true, hidden: true },
{ name: 'name' },
{ name: 'purchasedTotalCount', width: 35, align: 'center' },
{ name: 'purchasedAssignedCount', width: 35, align: 'center' },
{ name: 'purchasedDistributedCount', width: 35, align: 'center' },
{ name: 'purchasedRemainingCount', width: 35, align: 'center' },
// receivedTotalCount is the only editable cell;
// the custom change event works in conjunction with the onSelectRow event
// to get row editing to work, but only for this one cell as being editable;
// also note that cellEdit is set to false on the entire grid, otherwise it would
// require that the individual cell is selected in order to edit it, and not just
// anywhere on the row, which is the better user experience
{ name: 'receivedTotalCount',
width: 35,
align: 'center',
editable: true,
edittype: 'text',
editoptions: {
dataEvents: [
{
type: 'change', fn: function(e) {
//TODO: don't allow decimal numbers, or just round down
let count = parseInt(this.value);
if (isNaN(count) || count < 0 || count > 1000) {
alert('Value must be a whole number between 0 and 1000.');
} else {
self.updateLicenses(parseInt(lastRowId), count);
}
}
},
]
}
},
{ name: 'receivedAssignedCount', width: 35, align: 'center' },
{ name: 'receivedRemainingCount', width: 35, align: 'center' },
{ name: 'expirationDate', width: 45, align: 'center', formatter: 'date' }
];
jQuery('#licenseManagerGrid').jqGrid({
data: this.childTenants,
datatype: 'local',
colNames: colNames,
colModel: colModel,
altRows: true,
rowNum: 25,
rowList: [25, 50, 100],
width: 1200,
height: '100%',
viewrecords: true,
emptyrecords: '',
ignoreCase: true,
cellEdit: false, // must be false in order for row select with cell edit to work properly
cellsubmit: 'clientArray',
cellurl: 'clientArray',
editurl: 'clientArray',
pager: '#licenseManagerGridPager',
jsonReader: {
id: 'id',
repeatitems: false
},
// make the selected row editable and restore the previously-selected row back to what it was
onSelectRow: function(rowid, status) {
if (lastRowId === undefined) {
lastRowId = rowid;
}
else {
jQuery('#licenseManagerGrid').restoreRow(lastRowId);
lastRowId = rowid;
}
jQuery('#licenseManagerGrid').editRow(rowid, false);
},
});
}
Additionally, I wanted the escape key to allow the user to abort changes to the cell and then restore the cell to its previous state. This was accomplished with the following Angular 2 code in Typescript:
#Component({
selector: 'license-manager',
template: template,
styles: [style],
host: {
'(document:keydown)': 'handleKeyboardEvents($event)'
}
})
// handle keypress so a row can be restored if user presses Escape
private handleKeyboardEvents(event: KeyboardEvent) {
if (event.keyCode === 27) {
let selRow = jQuery('#licenseManagerGrid').jqGrid('getGridParam', 'selrow');
if (selRow) {
jQuery('#licenseManagerGrid').restoreRow(selRow);
}
}
}
I am new to Ext JS and I need to update an old app. The EditorGridPanel has an 'ADD' button and it works fine. However, I need to add a 'DELETE' button that deletes the row from the grid. Here is the code to the grid. Thanks for your help.
/*==== INVOICE DATA START =======================================================*/
var iLineItemCM = new Ext.grid.ColumnModel([
{id:'i_line_item_name', header: "Line Item Name", dataIndex: 'i_line_item_name', width: 280,
editor: new Ext.form.TextField({allowBlank: false})}
,{header: "Amount", dataIndex: 'i_line_item_amt', width: 80, align: 'right', renderer: 'usMoney',
editor: new Ext.form.NumberField({
allowBlank: false,
allowNegative: false,
maxValue: 100000
})}
]);
var iLineItemRec =
new Ext.data.Record.create([
{name: 'i_line_item_name' ,mapping: 'i_line_item_name' ,type: 'string'}
,{name: 'i_line_item_amt' ,mapping: 'i_line_item_amt' ,type: 'string'}
]);
var iLineItemStore = new Ext.data.Store({
url: '',
reader: new Ext.data.JsonReader({
root: 'rows'
},
iLineItemRec
)
});
var iLineItemGrid = new Ext.grid.EditorGridPanel({
store: iLineItemStore,
cm: iLineItemCM,
width: 'auto',
height: 'auto',
//title:'Edit Plants?',
frame:false,
//plugins:checkColumn,
clicksToEdit:1,
viewConfig: {
//forceFit: true,
autoFit:true
},
id: 'iLineItemStore',
tbar: [{
text: 'Add Line Item',
handler : function(){
var r = new iLineItemRec({
i_line_item_name: '',
i_line_item_amt: ''
});
iLineItemGrid.stopEditing();
iLineItemStore.insert(0, r);
iLineItemGrid.startEditing(0, 0);
}
}]
});
///////////////////
From the docs for Cell Selection Model: http://docs.sencha.com/ext-js/2-3/#!/api/Ext.grid.CellSelectionModel
The cell model is specified as default.
getSelectedCell( ) : Array
Returns the currently selected cell's row and column indexes as an array (e.g., [0, 0]).
So... something like
{ text: 'Remove',
tooltip:'Remove the selected item',
handler: function(){
iLineItemGrid.stopEditing();
var r = iLineItemGrid.getSelectionModel().getSelectedCell();
iLineItemStore.removeAt(r[1]); } }
I'm facing a dilemma working with an Ext-JS GridPanel: the data used to load its store is dynamic so I don't know beforehand how many rows will need to be shown on the grid.
As such, I'm having a hard time with the grid's height: I've tried setting autoHeight to true but the grid will only display the first row, hiding the rest; when I set its height explicitly, white space appears on the grid if the number of rows doesn't fill the space specified by the height.
Ideally, the grid should expand/shrink vertically to show all of its rows.
Is there any way to make the grid's height dynamic, based on the number of rows it'll contain?
I could wait for the grid to render, get a count of rows and recalculate the grid's height based on that but it seems hacky and I'm looking for something cleaner.
This is my code for reference:
var store = new Ext.data.ArrayStore({fields:[{name: 'sign_up_date'}, {name: 'business_name'}, {name: 'owner_name'}, {name: 'status'}]});
// buildResultsArray is a method that returns arrays of varying lengths based on some business logic. The arrays can contain no elements or up to 15
store.loadData(buildResultsArray());
var resultsGrid = new Ext.grid.GridPanel({
store: store,
columns: [
{id: "sign_up_date", header: "Sign Up Date", dataIndex: "sign_up_date", width: 70},
{id: "business_name", header: "Business Name", dataIndex: "business_name", width: 100},
{id: "owner_name",header: "Owner Name", dataIndex: "owner_name", width: 100},
{id: "status", header: "Sign Up Status", dataIndex: "status", width: 70}
],
stripeRows: true,
columnLines: true,
enableColumnHide: false,
enableColumnMove: false,
enableHdMenu: false,
id: "results_grid",
renderTo: "results_grid_div",
//height: 300,
autoHeight: true,
selModel: new Ext.grid.RowSelectionModel({singleSelect: false})
});
Thanks for the help.
In ExtJS 3 it's not working out-of-box, but it's easy to implement by extending GridView:
AutoGridView = Ext.extend(
Ext.grid.GridView,
{
fixOverflow: function() {
if (this.grid.autoHeight === true || this.autoHeight === true){
Ext.get(this.innerHd).setStyle("float", "none");
this.scroller.setStyle("overflow-x", this.scroller.getWidth() < this.mainBody.getWidth() ? "scroll" : "auto");
}
},
layout: function () {
AutoGridView.superclass.layout.call(this);
this.fixOverflow();
},
render: function(){
AutoGridView.superclass.render.apply(this, arguments);
this.scroller.on('resize', this.fixOverflow, this);
if (this.grid.autoHeight === true || this.autoHeight === true){
this.grid.getStore().on('datachanged', function(){
if (this.ownerCt) { this.ownerCt.doLayout(); }
}, this.grid, { delay: 10 });
}
}
}
);
Usage:
new Ext.grid.GridPanel({
autoHeight: true,
view: new AutoGridView()
});