ExtJS RowButton that cancel row selection - javascript

I'm trying to add row buttons to a grid panel. These buttons should capture the click event, do their stuff, and prevent the row to be selected.
The problem is that the row behaviour that changes the row selection is running before the button's event (like if the row was capturing it instead of wait to event bubbling).
Is there any way to add a row button that perform its action before the row selection to be able to cancel the event and therefore cancel any other behaviour?

What is your intent?
Is it to completely disable row selection for this grid?
Or prevent row selections from "losing focus"/reseting when a row button is clicked?
If you want to disable row selection from the entire grid (1), set the config item disableSelection to true.
If you want to prevent row selections from being reset everytime the user clicks on your row buttons (2), you can extend Ext.grid.RowSelectionModel and override the initEvents method to register handleMouseDown to handle the cellmousedown instead of the rowmousedown (this will give u access to the columnIndex that originated the event) GridPanel event. Then add some logic to the handleMouseDown method to not update the row selection if the columnIndex is equal to the column index of yours row buttons. In other words, only execute the original handleMouseDown logic if the columnIndex is not equal to the column index of your row buttons.
Hope this helps.

I hadn't got the idea of watch the column, it's very simple to register a listener to cancel the selection of rows. (I would rather the row to wait the event bubbling, but...)

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.

In jQuery how do I do something after an event has completed

Use case:
I have a table that users enter order lines into. The table is a list of products, they can page up and down in the table. If they've entered a quantity into one product and then page down they need to be focused on the input field in the same column they started from, but at the new row, the page down has moved to.
Problem:
The page down changes the hover location. So I can get which row has the hover state and change focus to the correct column in that row. I need code to execute after the page down has completed and a new row has: hover.
But because page down is async, getting the row with the hover state in my event handler returns the current row, not the one that will have: hover when the page down completes. How do I write a page down event handler so that code is executed after the page down has completed?
Attaching a promise to the table with code that executes after the 'keydown' type event is complete doesn't work. It runs before the new row has: hover state.
You can use document.activeElement to get the element that has focus, get the column from that and set the focus using $(columnSelector).focus() to newly populated records column.
Another way is to have focus event handler and maintain the last focused column name in a variable.

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: issue with clickable rows

I have a table with a class "myClass" on each row that triggers a jQuery function by click on the table row.
This works fine so far, the only problem I have is that some of the table cells contain buttons and then a click on a button also triggers the above event.
Is there a way I can prevent that the row click event is triggered when I click on a button in that row ?
I only want the event to fire by click on the row background but not by click on any button within a row.
Many thanks for any help with this, Tim.
At the top of your click event handler, put the following:
if ($(event.target).prop('type').toLowerCase() !== 'table' ||
! $(event.target).hasClass('myClass')) {
event.stopImmediatePropagation();
return;
}
What this does is say 'if the actual element isn't a table or doesn't have the class "myClass" then stop the event here and now (the return part). The stopImmediatePropagation() means that it won't propagate back up to the original selector (your 'table.myClass' in this case).
If you want the user to be able to click on ANYTHING inside your table except buttons, you would use this:
if ($(event.target).prop('type').toLowerCase() === 'button') {
event.stopImmediatePropagation();
return;
}
This will allow clicks on other elements like inputs, images, spans, divs, etc. to still trigger it. If this is not the desired behavior, you should consider putting your click event on the table cells instead of the entire table, and then just check that the target type isn't a td.

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