Jqgrid: hide cell based upon drop down in another cell - javascript

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?

Related

Dependable dropdown in inline row editing in 2 ag grid cell

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.

Clear previous selection only if checkbox is not clicked in jQgrid?

I have a grid setup with multiselect: true because I need to be able to delete more than one row at the same time. On the onSelectRow event I am loading some data based on the ID and displaying it to the end user. So far so good.
This is the example where everything works fine, the data for ID=219109 is being displayed:
Now look at the following example:
In the example above the first row still highlighted and then I clicked a second one. Because of multiselect is enabled I was able to select both at the same time. The onSelectRow event still working properly which means is loading the data for the ID=282006 but visually it could be confusing for the end user.
What I want to do is to reset the previous selected rows and just highlight the last one I have clicked.
For example using the same images:
Load a fresh grid with no rows selected
Click on ID=219109: highlight and select this row
Click on ID=282006: clear the grid and highlight this row
However this should only happen when I click in any other place than the checkbox.
In the image above if I click on any column rather than the first one (the one having the checkbox) I should be able to clear the grid selection and choose the last one but if I click on the checkbox it does not matter because is the only way to delete more than one at the time.
I have tried the following:
onSelectRow: function () {
var rowid = $(this).jqGrid('getGridParam', 'selrow');
$(this).jqGrid("resetSelection");
$(this).jqGrid("setSelection", rowid);
}
But it's not working since the behavior is not consistent. You can check the demo here.
Any ideas in how to achieve this?
It seems to me that you need just add the option
multiboxonly: true
and remove your current onSelectRow code. See https://jsfiddle.net/OlegKi/949pLpfv/3/. If the user clicks multiple times on checkbox the rows will be selected. The click on another part of the row will deselect all previously selected rows and select only the clicked row.

Jquery datatable traverse rows

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.

EXTJS propertyGrid key column checkbox

Is there any way to put a checkbox to any row first column in property.Grid like in the picture?

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