Slickgrid: value entered in a cell disappears after moving out of cell - javascript

In a Slickgrid cell, i click and enter a value. Once i move out of this cell using a mouse click the value entered disappears. But if i enter the value in the cell and tab out then the value stays in the cell. I would like to know if this should be manually handled.
OnClick event i am calling
grid.updateRow(grid.getDataItem(args.row));
grid.invalidate();
grid.render();
Thanks,
Asha

You're doing something wrong, updateRow() argument is a row index in the grid but you're passing an item object so that won't work, also if I remember correctly updateRow is only used for re-rendering or refreshing a specific row index, it's not for updating the data but more for rendering purposes (perhaps the naming is confusing).
I personally only use the SlickGrid DataView and the functions to call for updating items are different, you can see how to that in this other Stack Overflow answer Change slickgrid cell data after edit
If you're using the grid object, as it's written in the other SO answer I referenced earlier, then it would be
grid.invalidateRow(args.row);
data[args.row][grid.getColumns()[args.cell].field] = a.msg;
grid.render();
Personally I always use the SlickGrid DataView as it's much more user friendly and comes with a lot more benefit like data grouping and many other functionalities. Again take a look at the other SO answer that I wrote in previous paragraph, that is the correct way to do it

Related

Tabulator table/grid dirty flag

Is there's a way to check if the table is dirty for the editor fields?
Seems like I can't see it on the documentation about the dirty table. If there's no implementation yet, then I would like to suggest a feature about it and that would be really nice to have.
All I know is you can get the initialValue and value of the cell then compare it.
E.g.(Table.isDirty(); will return true if fields are modified)
Something like Ext JS grid. The grid can check if inputs are dirty in one call only.
Thank you
There is no isDirty function as such, but there are events that are called when the table data is edited which will allow you to keep track of this.
When you have instantiated your table you should register the cellEdited event using the on function. When the table is edited by a user this function will be called, passing in the Cell Component for the edited cell
table.on("cellEdited", function(cell){
//cell - cell component
});
For full details, checkout the Cell Events Documentation

How to add empty data row in Datatable using angular2+?

I want to add empty data row. My requirement is like columns are dynamic. I have tried using dtInstance to add the row. it's throwing some error.
here is the link
https://stackblitz.com/edit/how-to-replace-all-the-columns-dynamically-in-data-table-gvfose?file=app/app.component.ts
Please let me know if more details required.
I dont think that's possible with Angular-datatables out of the box, but you can use Angular-xeditable to achieve that as in this question. A better way to do it in my humble opinion would be, when the user clicks the 'add' button, we show a pop-up, they fill the data, we update the back-end or the reference table and rerender the table.
You gave the Data table wrong model. you are mixing between different models in your code.
I've fixed it as well adding two empty rows, make sure to align with the model defined by columnsDataObj
https://stackblitz.com/edit/how-to-replace-all-the-columns-dynamically-in-data-table-zemuq2?file=app/app.component.ts
There is a simple demo for your requirement that puts the other button to save the empty column you want to access the data.
For easy to use, add DATA button that would be shown the blank row with input, the style you desire to set up the CSS and don't forgot the CSS scope for your by Encapsulation.
DEMO
If the operation field is superfluous, rid it off and place the event for three columns after entering with your logical condition.
Annoying Button
The add DATA could be replaced with the below code, setup the life hook instead for insert the method in the constructor.
ngAfterViewInit (){
this.addData();
}

How do I set the focus on the first editable cell in a row onRowClicked?

I have an ag-grid that I need to be able to edit via the keyboard. I have the editType set to fullRow and I'd like to be able to add javascript so that when I fire the onRowEditingStarted event, it goes to the first editable cell because occasionally, my grid is larger than the screen.
I can get the rowIndex, but I cannot get a hold of the collection of columns to look at the properties. I want to keep the rowIndex, but get the first editable column and set focus there. (Right now, it's whatever is incidentally selected to fire the event.)
Does anyone have an example that I can look at?
I've tried looking through the objects produced here:
onRowEditingStarted: function(params) {
console.log("started row editing");
console.log(params);
}
This gives me an event where I can get the rowIndex and the columnApi. I would expect somewhere in here is a collection to do a for loop, but I don't see it.
You could do something like in your onRowEditingStarted
// scrolls to the first column, or first editable column. you can pass in the correct index
var firstEditCol = params.columnApi.getAllDisplayedColumns()[0];
/////
params.api.ensureColumnVisible(firstEditCol );
// sets focus into the first grid cell
params.api.setFocusedCell(params.rowIndex, firstEditCol);
This example from docs is a good starting point

How to check all checkboxes representing a DB column in Oracle ApEx with one click?

I have a Tabular Form with a few columns, one of which is a numeric entry that has values 1 or 0, represented by a checkbox.
I'd like to create a "master-checkbox" that would check all the checkboxes in this column, but it wouldn't sumbit the page, the user would have to do it manually by "Apply Changes".
I figured out that I need to use apex.item and some javascript and unfortunately, that's as far as I got.
Actually, it wasn't as easy as the google results suggest.
Apex' checkbox appears to be just a cosmetic thing and the real thing is hidden.
My colleague helped me to do something like this:
$("td[headers=APPROVED] input[type=checkbox]").attr("checked", 1); // this is the "visual" part
$("td[headers=APPROVED] input[type=hidden]").val(1); // and this is he one that gets stuff done
"APPROVED" is the name of the column I am manipulating.

ExtJS Using Tab to navigate between two grids

I have a panel that contains two grids, both of which are editable using the cell editing plugin. Within the grids, users can use the tab key to move between editable fields. However, I can not seem to find the right way to get the tab key to allow the user to move from the last editable cell in the first grid to the first editable cell in the second (there are no components between the two grids). The user is just stuck in the last editable field of the first grid.
I tried using FocusManager, but this made keyboard navigation far more complex, rather than less, requiring use of the arrow keys to get into and out of each form element and grid.
I added this code to the parent panel:
var nav = new Ext.util.KeyNav(Ext.getDoc(), {
tab: function(e) {
console.debug('TAB HIT!', arguments);
},
scope: this
});
nav.enable();
just to see what tabs were detected, but it only activated when the tab key was clicked and a form element in the parent panel itself had focus.
I guess there are a few elements I need to learn, how to I pass focus from element to element, and how do I detect the first and last element in a grid? Or is there some way to do this built into ExtJS? Any suggestions or advice would be greatly appreciated.
I would use the new cellkeydown event for grid panels.
Implement a handler for that event which checks the key type, and whether the cell is the last column in the grid, then starts a cell edit in the first column of the corresponding row in the other grid.
You can find out if it was a TAB key from the 7th argument passed by this event.
You can find out if it is the last cell in the grid from the 3rd argument passed by the event.
The rowIndex is the 6th argument - use that so you know which row to start editing in the other grid.
Event handlers can be added to components using the on method by the way.
You can also look up the functions that need to be called to start cell editing in the API here.
If you had more code and maybe a bounty I might be able to get more specific but that's the gist of how I would do it.

Categories