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);
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
When you create a jqgrid there is a default button on the bottom of the grid that allows you to create new records.
However, when you open the modal, all input fields are empty.
In my situation I need this button, but I also need the exact same thing but with the possibilty of adding a few parameters so some of the fields are already filled in. The parameters would come from the selected row at that moment.
Like when I click a row where the date is set to 01/01/2099 i need the add-modal to open with the date already set to that date.
You can use beforeShowForm or afterShowForm to make any changes in the Add Form during opening. For example you can read the values from currently selected row and fill some fields of the form with new values. To be open Add form on click or double-click on the row you need just call editGridRow inside of onSelectRow/ondblClickRow callback.
I'm using kendo grid. One of the requirements is that the data of the hidden columns will be fetched only when the column becomes visible.
I want to use default column seletion (in the column menu), so when the checkbox of column is checked I want to catch it and go to the server to get relevant data and show the column only after the data arrives (or maybe even to rebuild the grid, whatever is possible). I can't find how to catch this click event and prevent default behavior?
I have the amazing SlickGrid configured to access data asynchronously and post user changes back to the server asynchronously. In general terms, the server may modify a few fields of a row based on the user's changes. As such, after the row is updated I would like SlickGrid to refresh only that row without changing the rest of the view.
Does anyone know how to do this?
In my case, the field that changes on the server is a timestamp associated with the record that is updated by a database trigger. If the timestamp is out of date, the user has an old copy of data, and if they submit changes, they may overwrite a new copy. Since I can't find a way to trigger a refresh, the user cannot modify their own changes without refreshing the browser window (forcing a complete refresh).
You should be able to do this using grid.invalidateRow() and grid.render(). SlickGrid will re-render the affceted rows (assuming they are displayed in the currently visible viewport) without refreshing the entire page.
// Mark row 42 as changed and re-render the display
grid.invalidateRow(42);
grid.render();
For an example check out SlickGrid Example 14. (Click the Start Simulation button to see it in action)
function updateSlickgrid() {
dataView.setItems(tableName);
grid.invalidate();
}
Note : tableName could be the array or id etc.
I prefer storing all the slickgrid data in the array ex tableName = [];
Keep using the above function when it comes to displaying the data in slickgrid
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.