I have an Interactive Grid on my page that allows the rows to be selected. When the user clicks on the button, the page branches out to another page. I need to create a validation to ensure the page only branches out if some records were selected. What is the best way to do that?
I have no pretension my way is the best way, but it works:
You'll need to give your button a static ID (mine will be LinkButton).
You should then create a Dynamic Action on your grid on the event Selection change [Interactive Grid]. Make a True Action that Execute JavaScript Code, that code bit should do :
if(this.data.selectedRecords[0] != undefined) {
//This is what happens when rows are selected
document.getElementById("LinkButton").disabled = false;
}
else {
//This is what happens when no rows are selected
document.getElementById("LinkButton").disabled = true;
}
**Probably not the best solution, there most likely is a way of achieving this using the Grid Widget from APEX'S API, but I wasn't able to return any object from my grid using it. My answer would disable the button if any row is selected in any grid (if you have multiple reports/grids that is) in that page, instead of in a specific Interative Grid.
My answer was highly inspired by this person: http://thejavaessentials.blogspot.com/2017/03/getting-selected-rows-in-oracle-apex.html and this post : Disabling and enabling a html input button
**I tested it on APEX 19.1, but as the person above was working on APEX 5, my guess is that it should work on it too.
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
I have a Telerik MVC grid that includes a boolean value, CreateIncident. For a new row, I want to set that value to true. For an edit, if the value is already true, I want to disable the checkbox. The Kendo UI apparently added a method to determine if the row is new, but the same call is not accessible in the MVC version. I can intercept the Insert and Update events in C#, but that's after they've clicked on the Save button. I can intercept the edit event in Javascript, which is where the above Kendo answer makes the call.
Alternately, if there is a better way to handle this, I'm open to suggestions.
The Actual Answer is
if (e.model.isNew())
so when isNew() is True then you have a new row else if it is False you are in edit Mode
I found an answer. Inside the javascript, I can do the following check:
// If this wasn't just created and Create Incident is checked, we already have a value for this, so disable it.
if (e.dataItem.CreateIncident == true && e.mode == 'edit') {
$('#CreateIncident').attr("disabled", "disabled");
}
e.mode is set to 'insert' for new items and edit for older ones. Handy, that.
I have two Main reports. Each report has a corresponding region with a Nonmain Classic report (so 4 reports total). Clicking on a link in each of the Main reports reveals details in its corresponding Nonmain report.
Currently, clicking on a Main report will reload the whole page, and all the PL/SQL and SQL has to refire from all 4 reports.
It would cut down on the SQL calls if only the nonmain report refreshed. I assume AJAX would be the best bet to accomplish this.
How would I go about doing such a task?
Thank you.
P.S., all four reports are determined by a PL/SQL function returning a SQL statement. All headings also are determined by a PL/SQL function returning a colon-delimited string.
With your previous questions in mind, your classic reports rely on the session state of some page items. You are setting the value of these items in your colunmn links.
If you want to cut out the submit of the page then you need a way for the anchor tags to not fire their default action and provide the value for page items to be set to a dynamic action.
You have to put this in the column link attributes:
onclick="return false;#" class="reportlink1"
You then need to pass on some data, and i suggest using data tags
data-value1="#COL1#:"
Create a dynamic action, firing on click and uses a jQuery selector .reportlink1
What needs to happen now is to provide the page items with their needed values
Add a true action to execute javascript:
var lValue1 = $(this.triggeringElement).data("value1");
$("P1_ITEM1").val(lValue1)
With the item value set, create another true action of type "Refresh" and set it to affect your secondary report.
The final step is then to set the "Page items to submit" on the secondary report. This will cause the report to submit the values of the set page items to the session and ensures that the sql will return the correct values when the region is refreshed.
For some reason, Tom's approach did not work for me; I assume it must be the idiosyncrasies of my page. If anyone stumbles upon this question, try Tom's method first, and if for some reason it doesn't work then try the following adaptation with AJAX in the dynamic action:
If your nonmain reports rely on the session state of some page items, and those items are set via column links from your main report, you must put this in the column link attributes to prevent the submission of the page and to pass the values using data tags:
onclick="return false;" class="reportlink1" data-value1="#COL01#" data-value2="#COL02#"
Create a dynamic action, firing on click and using a JQuery selector .reportlink1
Provide the page items with their needed values VIA AJAX. Add a true action to execute synchronous javascript:
var v1 = $(this.triggeringElement).data("value1");
var v2 = $(this.triggeringElement).data("value2");
var get = new htmldb_Get(null, &APP_ID., 'APPLICATION_PROCESS=dummy', &APP_PAGE_ID.);
get.add('PX_ITEM1' , v1)
get.add('PX_ITEM2', v2);
gReturn = get.get();
get = null;
With the item values set, create another true action of type "Refresh" and set it to affect the secondary report.
Unlike Tom's solution, DO NOT set the Page Items to Submit on the secondary report.
I have an MVC 3 Razor Telerik grid. I have an Edit comand on the row.
When a user clicks on Edit (this places the grid in Edit mode with an Update and Cancel button), I want to set a property for two of the columns to readonly.
When the user clicks on Cancel or Update, I want to set the columns back to full permission.
I know there must be some properties in the controller I should be able to set when the Edit button is pressed for this, but have not seen any docs on how to accomplish this.
How can I do this?
I'm using version 2011.2.712.340 of the controls.
What your describing above sounds a little bit confusing. The purpose of the readonly property is to ensure that when your row enters edit mode the columns that had readonly explicitly set cannot be edited, which seems to be what you're looking for. When in regular read mode all columns will have the same permission whether or not readonly was set, since you are just viewing the data and not editing.
Edit after clarification from comment:
Seems like you want to have this field editable when you are inserting a record, but not when you edit the row. Well, this can be done using some JavaScript. If you use Ajax binding (the only way to fire this event) you can do the following by subscribing to the onEdit client-side event:
...
.ClientEvents(clientEvents => clientEvents.OnEdit("onEdit"))
...
And here's the JavaScript:
<script type="text/javascript">
function onEdit(e) {
var form = e.form;
var mode = e.mode;
if (mode == "edit") {
var country = form.Country; //Country is a public property of my Model
country.disabled = true;
}
}
As you can see above, I get the form with the associated edited row and specifically grab the field associated with the property I do not want to be edited and disable that input element.
I have a grid like this:
To edit a line, the user chooses one from the grid an click the "pen" icon. Then, the record is displayed in the form.
To save the form, choose the save button link. Ok.
Now I need to update the line in the grid.
I get this working, doing the follow in javascript:
$.post(this.href,
sf,
function (response) {
$("#form-edicao").html(response);
var $grid = $("#Grid").data("tGrid");
$grid.rebind(); //==this line update the grid
});
But this approach updates all the grid, return to the first page...
I need to update just one line.
In common table grids, I replace some html elements. How to do this in this mysterious grid?
Taking a look at the Client-side API of the Grid component I think that using .ajaxRequest() instead might be what you're looking for. .rebind() resets the state (page number, filter/sort expressions etc.) while .ajaxRequest() shouldn't.