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

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.

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.

Select and deselect row after another selection - ReactJS Hooks

Have a list of licenses plates that start with a disabled button and no line selected.
Here is what should to do:
When select a row, button "Go foward" enable;
When select a row already selected, deselect it and disabled button again.
When list have a row selected and user click in another row, deselect old row and select the new one.
The snippet code i did:
https://codesandbox.io/s/busy-galileo-mw3p3?fontsize=14&hidenavigation=1&theme=dark
Facing this problems:
Need 2 clicks to set css style 'custom-col-row-active' to row selected. Button is enable already first click.
When a line is already selected, when you click on the other lines, they are selected as well. With 1 click on a selected line, all are deselected.
I know need use data table to deselect line already select, but i don't know how to get the full data table, since i only get the data when i click in a specif row.
Any tips here?
#Rafael, I don't know much about tabler-react, but this is just my suggestion for you. Your handleSetActivedRow seems to have problem. I don't understand why you have written onClick={(e) => handleSetActivedRow(e)}. You are calling a function inline when onClick itself and again you are taking it to an other function handleSetActivedRow. This is bad coding; instead you can do like this onClick={handleSetActiveRow}. secondly, you need to check again your handleSetActiveRow function. I don't understand why you want to return? when it is not necessary. What you need to check on is that you want to set the className to -active when you click on an element.

How to get specific selection of checkbox from a popup datatable in Webix?

I have a popup data table in each row of a maintable with some checkboxes in it.
I am selecting/checking items randomly by clicking the checkbox buttons for each row and printing the values checked with the help of Print button.
I am observing that only the last selection of checkbox buttons are overwriting all the earlier selections.
How can I get the appropriate selection of checkbox buttons corresponding to each row?
Snippet: https://snippet.webix.com/11irkt7o
Thanks.
You code uses a single instance of popup table for each rows, so as result whey you are calling $$pt.eachRow you are itterating other the last active value, all previous values are lost.
The better solution will be to use click handler of close button, to get all checked rows and store that data in the master row
{view:"button", label:"Close", click:function(){
ids = collectCheckedRows($$('p_table'));
$$('mytable').updateItem(selectedRow, { checked : ids })
this.getTopParentView().hide()
}}
Now, to print all values you can use
$$('mytable').eachRow(function(id){
console.log(id, this.getItem(id).checked);
});

jqgrid get rowData values without selecting multi-select checkbox

I have a jgrid with multiple rows and 5 columns without check-boxes. In 5th column it has screen permissions. I had given the sample of jqgrid below.
So when i am changing screen permissions either by clicking on the close mark or clicking on plus mark i am deleting existing or adding other available permissions to the screen.
Here i am doing same operation for multiple rows in grid. When i am clicking on the SAVE button outside of the grid i need to get the edited row values and need to send back to controller.
I tried this functionality with the selarrow function of jqgrid. but i am not getting these edited row values without selecting the checkbox of the row.
Could any one help me how to get this edited row values without selecting the checkboxes of the row.
You can use the below code:
var lastSel;
jQuery("#gridid").jqGrid({
...
onSelectRow: function(id){
if(id && id!==lastSel){
jQuery(this).restoreRow(lastSel);
lastSel=id;
}
jQuery(this).editRow(id, true);
},
...
});
onSelectRow :Raised immediately after row was clicked.
rowid: is the id of the row,
status: is the status of the selection,
e: is the event object. Can be used when multiselect is set to true. true if the row is selected, false if the row is deselected.
You Can refer this as well:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events

In a jqGrid, how can I get the row that another element is in?

I have a jqGrid which has a column called "Actions". In this column, each row has a number of buttons which are supposed to perform various functions on the data in that row.
Unfortunately, the only grid parameter I've found that remotely matches what I want to do is selrow. This gets the selected row. But if the user clicks one of the action buttons, this doesn't necessarily mean that row is "selected" (i.e., the user has clicked on it previously).
Is there a way I can get the row of the button the user presses? Or does it not make sense to have buttons inside of the jqGrid to begin with?
If you would use for example onCellSelect to detect which button is clicked you will have directly the rowid of the button which is clicked. The answer will get you more details about the implementation.
If you would prefer to implement custom click event handler you can just find the closest <tr> element. It's id is the rowid of the clicked button. So you can use something like $(e.target).closest("tr.jqgrow").attr("id") where e is the event of the click handler.

Categories