When you click on a row in jqgrid it gets "selected" (applies some coloring and styles), other "selected" rows get deselected. However, when I click on an input button element in one of the cells in a row nothing happens... the row is not "selected". How would I make the clicking of this button (or link or whatever) cause the row to be "selected" (and deselected when a different row is clicked)?
Solution:
In the gridComplete method of jqgrid I can attach a click handler to each button, get the ID of the button's parent row and then call jqgrid's setSelection method on it, passing in the required row id as a parameter.
$('#mygrid').find('input[type=button]').each(function() {
$(this).click(function(){
var therowid = $(this).parents('tr:last').attr('id');
$('#mygrid').jqGrid('setSelection', therowid );
});
});
On "tricky" thing about this is that instruction on the jqgrid website show two different ways to go about doing this. The above uses the new API which does things rather differently so you will find a mix of suggestions online that switch between this new API and the older one.
Related
I'm using the standard Oracle APEX Interactive grid. When I click the button to add a new row, it adds the row to the bottom of the list. Which is not convenient. If I select a record first, then click add row, it adds the new row below the selected record.
How do I change the functionality so that adding a row adds the row to the top of the grid?
You're not mentioning the apex version you use. It shouldn't make a difference, but for the record, I prepared my solution in apex 20.2.
The "Add row" button that you click is originally associated with grid action called "selection-add-row". You can check that by inspecting button element with your browser's developer tools - it should has a data-action attribute set to "selection-add-row".
Actions with context of particular Interactive Grid can be modified via javascript - either during runtime (as for eg. dynamic action) or during Interactive Grid initialization (by using JavaScript Initialization Code property in Advanced section of IG attributes).
You have at least two ways to achieve your goal. The first is to change behavior of "selection-add-row" action. I suggest to use following code as Javascript Initialization code:
function(config) {
config.initActions = function( actions ) {
actions.remove('selection-add-row');
actions.add({
name: "selection-add-row",
label: "Add row",
iconBeforeLabel: "true",
action: function(event, focusElement) {
let model = $(actions.context).interactiveGrid('getCurrentView').model;
model.insertNewRecord();
}
});
}
return config;}
It removes the action and adds the new one with the same name. New action adds new row on top of grid instead of adding below selected row. The drawback here is that you're loosing original apex action - but no harm done if you're not panning to use it anyway.
The second solution would be to not remove the original action and create new action that does the same but with different name. In this case you need to somehow change the data-action attribute of "Add row" button to the name of new action (or remove the button completely, and create your own).
More info about actions and whole IG customization: https://docs.oracle.com/en/database/oracle/application-express/20.2/aexjs/interactiveGrid.html
For example I have many many rows which contains 2 columns: checkbox and input, and popup window with editing. In DataSource I have 'Update' event, which call method for updating from controller.
Question: Is it possible to make such situation: User check checkbox on first row -> open popup for second row -> submit changes. Only second row should be updated, not all.
I want pass to server item only from current row. Actual result is that all changed rows passed to method 'Update'
This situation appears because in my application combined "incell" and "popup" editing for Kendo Grid.
When a grid's edition mode is set to "popup", it automatically generates a dialog box to let the user modify the editable fields of the selected row.
Using the grid's "update" method, the values are then persisted in the DB and if the PHP handler routine returns the newly updated row, the grid will magically display the properly modified values of the targeted row while keeping it selected !
MY NEED: I must do the exact same thing but with a self made edition dialog(kendoWindow).
I cannot use the one automatically generated by the grid. (For lots of very good reasons...)
Once closed, my self made edition dialog calls an AJAX routine that persists the data in the DB and returns the newly modified row.
How can i update the grid's dataSource with the PHP returned values and while keeping the targeted row selected ?
NOTE: The Grid's row can only be updated after the "update" call to the PHP server returns since some of the values are modified in the PHP code... values that are displayed in the grid.
I'm not sure if this will fit your needs, but you can change the popup editor by using the editable.template setting. That might let you customize the popup to do whatever else you need it to do.
To select a row you need to locate the <tr> element and pass it to .select() on the grid widget. If you happen to know the UID generated by the DataSource, then you can do:
var rowElement = $(gridWidget.element).find('tr[data-uid="' + uid + '"]');
gridWidget.select(rowElement);
I have a grid (master/detail) with keys bound. I'd like to have the first row in the master grid automatically selected when the page starts.
I used setSelection in the GridComplete event and can get the row selected. However, the up/down arrows (and the detail grid) do not function until the user actually clicks on a row with the mouse.
Does anyone have any ideas about how to get a row selected programatically so that the grid operates as if the user had clicked the row?
Thanks,
-Bill
The problem is that the grid does not have focus, so keyboard commands are not routed to it when the grid is initially displayed. You can work around this by explicitly calling focus after setting your initial selection:
jQuery("#myGrid").setSelection(myID).focus();
I have a grid control displaying data about a Company. I want one column to be "Employee". On click on the any cell of "Employee" column I want to pop up the one Form called "Employee Details" and would like to feel the data.
How can I do this?
As I understand the modal form on click of a jqgrid cell deals with data only related to that row. I want to show different data on the pop up form, i.e. other than the grid data.
Pl help.
Shivali
Probably you can use unobtrusive links in the column (see this and this answers). The advantage of this technique is that instead of typical links you can define any custom action on click on the link. The look of the link can be defined by CSS, but it seems to the that the link can show the user better as other HTML elements, that the user can click on it.
Alternative you can use a button in the column with respect of the custom formatter, but with the same technique as described before you can free define which action will be done on the click.
Inside of the click event with the parameter 'e' you have e.currentTarget as the DOM element of <a> for the link or <input> or <button> if you use buttons in the grid column. To find the row id you can use var row = $(e.currentTarget).closest("tr.jqgrow") or var row = $(e.target).closest("tr.jqgrow") to find the <tr> element. The row id will be row[0].id.