Here is the JSFiddle example of table I'm using. I'm getting ID of selected row using window.id.
So I need to code a function so that when the user wants to move row 51 to row 3. (user click on row 51 and then clicking on button UP it moves row by one row up until row 51 is on position 3). I also need to all rows to dynamically renumber when clicking on button UP or DOWN button.
Related
I am using a Tabulator table with the reactiveData option enabled. When I add rows to the table, the row number column, using the "rownum" formatter, shows "0" for all rows until I click on the sort button in the column header. Then it'll correctly display row numbers. I suspect that it might be something to do with underlying array not triggering the right event to trigger the rownum formatter when a row is updated/added/deleted. How can I get this to show the right row number when the rows are added to the table without requiring the end user to click on the sort button?
The column in question:
{title:"#", field:"rowNumber", formatter:"rownum", visible:true, download:false},
Expected: each row should have the row number in this column.
Result: each row has a "0" in this column until the sort button in the column header is clicked.
Edit: I've determined that each row has a "position" value of 0 prior to clicking the sort button. According to the docs, position is supposed to start at 1. So it seems like position is not being updated correctly somewhere.
I started implementing ag grid in angular. Everything is good in listing. But for inline full row editing I am facing 2 issues.
I have 2 cells having dropdown. I am using custom cell editor component for each dropdown cell. now I want that If I change the value of dropdown in first cell then it should change the dropdown data in second cell.
I have an action column. having edit button. So When I click on edit, I hide the edit button and show save and cancel button and call this function. It make all columns editable.
this.gridApi.startEditingCell()
But issue is even if I click any row below current editing row then my editable row become non editable and my action column still show save and cancel. Now I do not know how to change the cell renderer of a column when row become non editable or how to prevent this action
I will suggest you to use cellRenderer with editable: true inside cellRendererParams .
This will resolve the issue of becoming previous row non-editable while clicking on another row or outside the grid as in this state all of grid row's will be behave as editable.
And to manage your action items i think it's better to manage them by comparing the previous rowData and updated rowData.
If you will use the cellEditor with cellEditorParams then the issue of non-editable row will come in the picture as in this case you can make only single row editable at a point of time.
Please let me know if i can help you further in this .
Thank you.
I am using inline editing in a jqgrid. In one of my cells I have a drop down list. When an item is selected in this list I would like to hide or show a different cell on the same row. Please note I don't want to hide the entire column just the cell in the same row only. Is this possible?
How to select group of rows through shift keys in javascript. For example, I have a ASP.NET Grid View that has few rows. When I click on a row and then press shift key and then click on another row, how to select the rows in between these first row selected and the latest row clicked.
I need to implement this in Javascript. I have a gridview that contains some of the columsn which are hidden and not displayed in the UI columns.
I am creating a table. The last row is an input field where the user can add records. What I want is an "add"-button next to that row which the user clicks to store the new data. Visually the button is going to be outside the table, to the right.
I don't know how to do this and need some guidance. How do I add this kind of button?
In the last cell of the last row put a <div> with position:relative and inside that div put your button with position:absolute and move the button outside the table with right: -width_of_the_button. And you would add new rows before the last row in the table, so that the button is always in the last row
You need that <div> because some browsers (Firefox) don't respect position:relative on table cells and rows.
add a blank set of tds for all the other rows and in the last row you have the add button. How does that sound?
You could put the table inside the first column of another two column table, then add the button to the second column and align it vertically to the bottom.
Here's a jsfiddle for the table method - http://jsfiddle.net/ipr101/zFEQT/1/
This question deals with lining up buttons to table rows via css -
Aligning buttons with a row in a table using css