I need to add a new record to one of the interactive grids on my page via javascript code.
I know how to get an record from the grid:
var model = ig$.interactiveGrid("getViews","grid").model;
var record = model.getRecord(rowID);
But how do I add a record? Is there a function for that?
What I am trying to do is get selected rows from one grid and insert it into the underlying table in another grid. I got my javascript code to grab the records selected in grid1 and loop through them. Now I am getting the model of the grid2 and want to insert the records from grid1 into grid2
Try to insert a new record and immediately update the values.
var widget = apex.region('staticIdOfIG').widget();
var grid = widget.interactiveGrid('getViews','grid');
var model = grid.model;
//insert new record on a model
var myNewRecordId = model.insertNewRecord();
//get the new record
var myNewRecord = model.getRecord(myNewRecordId);
//update record values
model.setValue(myNewRecord, 'NAME_OF_COLUMN1', 'value1');
model.setValue(myNewRecord, 'NAME_OF_COLUMN2', 'value2');
Example: https://apex.oracle.com/pls/apex/f?p=145797:8
*Click on button "INSERT ROW WITH VALUES"
Workspace: stackquestions
login: test
pwd: test
page: 8
Related
I have two region one form and one interactive grid like a master detail(company and company contact person ) how i can make the interactive grid mandatory ,the user can't submit page ,he/she need add at least one row in interactive grid ,
I can do that or I need to change the interactive grid to collection and count the row in validation
This one is a little tricky because of the way processes and validations work with Interactive Grids (they are executed once per submitted row). To work around this, I'll use a page item and a validation that works with it.
The basic idea of this solution is based on the fact that a new row will not have a primary key value. Here are the steps to reproduce (my example was on page 14, update the following as needed).
Create an Interactive Grid (IG) region. The primary key column should be Query Only (which ensures it's null for new rows).
Create a Hidden page item named P14_NULL_FOUND. Set Type under Server-side Condition to Never so that it never renders on the page.
Create an After Submit (before Validations) process. This process will NOT be associated with the IG so it will only fire once. Set the PL/SQL Code attribute to:
:P14_NULL_FOUND := 'NO';
That will clear out the value of the page item prior to the next process.
Create another After Submit process that runs just after the previous one. Set Editable Region to the IG. Then set the PL/SQL Code to something like the following:
if :PK_COLUMN_IN_IG is null
then
:P14_NULL_FOUND := 'YES';
end if;
You'll need to replace ":PK_COLUMN_IN_IG" with the name of the primary key column in the IG, such as ":EMPNO". This process will be run once for each submitted row in the IG. If a null value is found for the primary key column, then that would mean the user added a new row and the value of P14_NULL_FOUND would be set to 'YES'.
Create a new validation. This validation will NOT be associated with the IG so it will only fire once. Set Type to PL/SQL Expression. Set PL/SQL Expression to:
:P14_NULL_FOUND != 'NO'
Then set Error Message to something relevant.
At this point, you should be able to run the page and verify that the processes and validation are working correctly.
There is an another solution;
Create a page item like PX_ROWCOUNT which will hold the data of the row count of your IG.
Assign a static ID to your IG region.
Write a JS function to count the rows of the grid then set it to the page item. Sample function;
function f_setRowCount(){
var grid = apex.region("staticIDOfYourIG").widget().interactiveGrid("getViews", "grid");
var model = grid.model;
var rowCount = 0;
model.forEach(function (record) {
rowCount ++;
});
$s("PX_ROWCOUNT",rowCount);
}
To submit your page and run this function, change your submit button's behavior to Defined by Dynamic Action. Execute your function when user clicks to that button then submit your page via DA.
Add validation to Processing section of the page and check your page item there; PLSQL Expression => :PX_ROWCOUNT > 0
The solution by Hamit works nicely, except of the case of deletion of a row.
My suggestion is to amend the above code by adding inside the loop an if statement to check whether the row is editable or no.
So the code will be
var grid = apex.region("staticIDOfYourIG").widget().interactiveGrid("getViews", "grid");
var model = grid.model;
var rowCount = 0;
model.forEach(function (record) {
if (model.allowEdit(record)) {
rowCount ++;
}
});
$s("PX_ROWCOUNT",rowCount);
I have an interactive grid with a bunch of records, and I want to set up a button on the page that changes one column in all records currently selected.
Running APEX 18.2, the IG has a whole bunch of columns and I want to change just one of them, but on a whole bunch of rows, so I do need a button.
The IG has ROWID as PK because the actual PK is assembled from 4 different columns.
I have spent some time googling this issue and have found a couple people with solutions:
http://thejavaessentials.blogspot.com/2017/03/getting-selected-rows-in-oracle-apex.html
This is the first, and simplest solution. But it doesn't return any rowid or anything like that, it returns the value in the first column.
Then I also found
http://apex-de.blogspot.com/2018/09/update-several-rows-in-tabular-form-grid.html
and
https://ruepprich.wordpress.com/2017/03/23/bulk-updating-interactive-grid-records/
Which are pretty similair and seem to be the best for me, but I get a Javascript error in the console: http://prntscr.com/n5wvqj
And I dont really know much Javascript, so I dont know what went wrong or how to best fix it.
I set up a Dynamic action on button click that executes Javascript and I have the selected element being the region named CUR_STAT.
var record;
//Identify the particular interactive grid
var ig$ = apex.region("CUR_STAT").widget();
//Fetch the model for the interactive grid
var grid = ig$.interactiveGrid("getViews","grid");
//Fetch the model for the interactive grid
var model = ig$.interactiveGrid("getViews","grid").model;
//Fetch selected records
var selectedRecords = apex.region("CUR_STAT").widget().interactiveGrid("getViews","grid").view$.grid("getSelectedRecords");
//Loop through selected records and update value of the AVT_OBR column
for (idx=0; idx < selectedRecords.length; idx++)
{
//Get the record
record = model.getRecord(selectedRecords[idx][0]);
// set Value for column AVT_OBR on "D"
model.setValue(record,"AVT_OBR", 'D');
}
The column named AVT_OBR is a select list with display values(DA, NE) and return values(D, N). But I tried having it be a text field and it didnt help.
I want to be able to select multiple columns and change the data in those entries.
If possible I would also like to be able to change data in such a way in a hidden column. Or if I could get all the ROWIDs for selected records and execute a PLSQL block with them.
Ended up with noone responding so I spent a lot of time and finally came up with a solution.
var g = apex.region('myIG').widget().interactiveGrid('getViews','grid');
var r = g.getSelectedRecords();
for(i = 0; i < r.length; i++) {
g.model.setValue(r[i], 'myColumn', 'Value');
}
For some reason none of the solutions I found had worked. But I learned from those solutions and made this simple piece of code that does what I need.
Also, I was wanting to set up so I could do this set value on a hidden column, I achieved this by just having the column visible and editable, but then when running the page I clicked on the column and hid it, and set the current view as the default report.
If anyone stumbles upon this question, I hope it helps.
I'm newbie in Ember.js framework, and I have a problem, I need a multiple selection of rows in a table. I'm using jQuery Datatables, with Ember-Data, and I need to have an ID of the selected rows, something like push to the array and I have no clue how to do this.
For multiple selection, make sure you initialize the table with the select option set to "multi":
this.$("#myDT").DataTable({
select: "multi"
});
When you want to get the list of all the rows selected, use a jQuery selector to get all the rows that have the selected class and get their data. In this example, the ID is the first column in the data, hence the [0]
var selectedRows = Ember.$('#myDT tbody tr.selected');
var selectedIDs = [];
Ember.$.each(selectedRows, function (i, element) {
selectedIDs.push(table.row(element).data()[0]);
});
You can read more about DataTables API (for things like getting row data using the row.data() method here: https://datatables.net/reference/api/
I am creating a dashboard with Google Viz and am having trouble with the select event when the data is filtered. It works fine when the page loads and nothing is filtered. However, after filtering the data, it does not select the correct row from the dataTable on 'select' events. Here is my jsfiddle and my listener:
http://jsfiddle.net/5E7zX/1/
google.visualization.events.addListener(rBubbleChart, 'select', function() {
var selection = rBubbleChart.getChart().getSelection();
var item = selection[0];
var school = data.getValue(item.row, 1);
alert('school is: ' + school);
});
When it is unfiltered, the alert box displays the school that was selected. However, when it is filtered on a school, the alert box does not display the correct school (the exception is Air Base Elem because that is the first school in the list).
Any thoughts on how to get the correct row of data once the data is filtered? Thanks.
The selection indices refer to the data as seen by the chart, which is not necessarily the same as your base DataTable, so you need to check against the data used by the chart by calling the getDataTable method to fetch the chart's data, and then referencing that when getting a value:
google.visualization.events.addListener(rBubbleChart, 'select', function() {
var selection = rBubbleChart.getChart().getSelection();
// get the data used by the chart
var dt = rBubbleChart.getDataTable();
// test selection array length, since it can be zero when a user deselects a point!
if (selection.length) {
var item = selection[0];
var school = dt.getValue(item.row, 1);
alert('school is: ' + school);
}
});
I need to apply chart range filter based on date on hidden column in google table. For this i created Google table instance like this
var data = new google.visualization.DataTable();
i added the column in this table then i created google dataview object like this
var view = new google.visualization.DataView(data);
view.hideColumns([0]);
where data is datatable instance from here i hiding the first column but instead of hiding it's getting deleted. How t ojust hide this column
You need to set the view.columns parameter of the Table's ChartWrapper object. This creates a private DataView for the Table to use, showing only the columns you specify in the columns parameter, eg:
view: {
// show only columns 1-4 in the Table
columns: [1, 2, 3, 4]
}