Jquery datatable traverse rows - javascript

I have specific requirement for datatable using query. I am looking for solution.
I have datatable with rows , each row is either parent row of any other row or child row of other parent row.
I want to Implement button as one of the column, when it is clicked it should scroll me to the parent row. Each row has its own guid and holds value of its parent row's guid.
Open for all kind of solution.
Thank you for your time.

Related

Modifying row index javascript

I have a table that is able to sort the columns and it is working fine.
The rows in the table consists of parent and child rows which when click on the parent row will show the child rows. Otherwise the child rows will remain hidden.
I intend to sort the rows based on the parent rows but not the child rows result or else the table will be a mess. I try to use jQuery to remove all the child rows before sorting and append them after the sorting function but the sorting function for the column wont work for the second time. This could be the row indexes had messed up. I suspect this happened because when I remove and store child rows in a variable, the row indexes still remain. So when I re-insert the child rows based on the parent rows, the row indexes of those child rows will remain same.
Is there anyway to explicitly modify the row index of the rows without swapping their positions?
Tried to use jQuery in such way as:
$('tr.child-row')[0].rowIndex = 3
But it just wont work.
You can change the order of two rows in a table.
http://jsfiddle.net/4v2owx37/2
This is a simple code that changes order of two rows.
function swap_position(first_index, second_index){
if(second_index > first_index){
$("tr").eq(first_index).insertBefore($("tr").eq(second_index));
$("tr").eq(second_index).insertBefore($("tr").eq(first_index));
}
else if(first_index > second_index){
$("tr").eq(second_index).insertBefore($("tr").eq(first_index));
$("tr").eq(first_index).insertBefore($("tr").eq(second_index));
}
}
swap_position(1,4);
swap_position(5,3);

Jqgrid: hide cell based upon drop down in another cell

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?

Jtable jquery expand Child table

I am using Jquery Jtable, I need to expand a child table (I have the "master" row ID).
How can I achieve this?
I would like to show a child table expanded, not collapse as is shown as default.
Thanks,Nk
Trigger the click event:
$('#divTable').jtable('getRowByKey',1).find("img").trigger('click');

jqGrid: Hiding a row while sorting

I have a custom sort on a few columns of data in my grid. I'm trying to hide some of the rows of data based on their value while I'm doing the sort. In the function, I have the cell value and the row object, but I don't see the row ID which is what I was going to use to hide that row of data. Is there a way to get the row ID, or is there a better way to attack hiding rows while sorting?
The grid content will be reloaded during sorting. So you can use rowattr to set some attributes on the rows. Inside of rowattr callback you have access to the object which represent the data of the row. Look at the answer. It adds CSS class myAltRowClass to some rows based on the content from one specific column. You can do the same. You need just defines display: none to CSS class myAltRowClass. Alternatively rowattr callback can return {"style": "display: none"}; on some rows.

How to add a button next to a table row

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

Categories