We Keep Coding

How to select/Deselect all checkboxes in oracle apex form

I have a page region in Oracle Apex, that contains many checkboxes (apex form).
I want a functionality to add a checkbox at the header of every checkbox item, that will Select/Deselect all the checkbox items underneath.
I am new to Apex development, and need help on this.

Here's a solution that assumes the text above the checkboxes is from the item's label (somehow I don't think that's the case). If needed, I can update the answer to better fit your page when I know more about it.
First, go into each checkbox where you want to add this "toggle" functionality. Scroll down to the CSS Classes attribute and put toggle-cb in the field.
Next, go to the page level attributes and add the following code to the Function and Global Variable Declaration attribute:
function enableToggle() {
var $wrapperDiv = $(this);
var $label = $wrapperDiv.find('.t-Form-label');
var $item = $wrapperDiv.find('.apex-item-checkbox');
var buttonHtml = '<button type="button" class="t-Button t-Button--tiny t-Button--simple">Toggle all</button>';
$label.html($label.text() + ' ' + buttonHtml);
$label.find('button').on('click', function(event) {
var $button = $(this);
var $checkboxes = $item.find('input[type="checkbox"]');
var checkedCount = $checkboxes.filter(function() {
return this.checked === true;
}).length;
var check = checkedCount < $checkboxes.length;
$checkboxes.each(function() {
this.checked = check;
});
event.stopPropagation();
$button.blur();
});
}
Finally, add the following code to the Execute when Page Loads attribute of the page:
$('.toggle-cb').each(enableToggle);
This will add a button to each item's label (provided the checkbox has the toggle-cb class) that does the toggle:
See the following to learn more about the code used above:
https://www.youtube.com/watch?v=Pjur4Zkkwsk&list=PLUo-NIMouZ_sgdQpMbXXwhHKpwRggCY34&index=1

sapui5 ui table how to unselect the rows by unchecking the row checkbox

Im facing a small issue in UI table. How can we remove the selected rows if we unselect the checkbox for a row? To get the row data im using below code and it is working fine without any issues.
getEnterDetailCount:function(oEvent){
var oRowContext = oEvent.getParameter("rowContext");
var oContextObject = oRowContext.getObject();
roomsArray.push(oContextObject);
};
Using the above method, If i select the row im able to get the Complete Row Data.
But if i unselect the row, Still it is considering as a row selection and count is getting increased.
In XML im using rowSelectionChange event to check and uncheck the checkbox on the row
Can someone please help me to fix this issue?
Thank you in advance.
Regards,
Pavantej

For sap.m.table you can use getSelectedItems to get all selected rows from your table. Loop all selected rows and put them in your array.
getEnterDetailCount:function(oEvent){
var oContextObject;
var roomsArray = [];
var oTable = this.getView().byId("myTable");
var aSelectedItems = oTable.getSelectedItems();
aSelectedItems.forEach( function(v,i){
oContextObject = v.getBindingContext().getObject();
roomsArray.push(oContextObject);
});
};
For sap.ui.table you can use getSelectedIndices()
getEnterDetailCount:function(oEvent){
var oContextObject;
var roomsArray = [];
var oTable = this.getView().byId("myTable");
var aSelectedIndices = oTable.getSelectedIndices();
aSelectedIndices.forEach( function(v,i){
oContextObject = oTable.getContextByIndex(v).getObject();
roomsArray.push(oContextObject);
});
};

jQuery Datatable, Outputting values of textboxes to selected row's columns

I currently have a jQuery Datatable, which upon a row being clicked on, the data from that row is outputted to textboxes and select boxes. I'm trying to make it so whatever is entered into the textboxes, will be saved/entered into the selected row upon pressing the saverow button.
Here's my JSFiddle: JSFiddle
Javascript:
var table = $('#example').DataTable();
(function () {
var table = document.querySelector('#example');
var name = document.querySelector('#nameinput');
var format = document.querySelector('#formatinput');
var address = document.querySelector('#addressinput');
var report = document.querySelector('#reportinput');
var alarm = document.querySelector('#alarminput');
table.addEventListener('click', onTableClick);
function onTableClick (e) {
var tr = e.target.parentElement;
var data = [];
for (var td of tr.children) {
data.push(td.innerHTML);
}
name.value = data[0];
address.value = data[1];
format.value = data[2];
report.value = data[3];
alarm.value = data[4];
console.log(alarm.value);
}
$("#saverow").click(function() {
var table1 = $('#data-table').DataTable();
var data = [];
data[0] = name.value;
data[4] = alarm.value;
console.log(name.value);
console.log(alarm.value);
table1.draw(true);
});
})();`
With the saverow code, I thought by trying to make the columns equal to the value of the textbox, then redrawing the table would work. The console does have the correct output when you type something new into the textbox then pressing Save. I just cant figure out how to put that back into the selected row.
I'm not wanting to do the inline editing if possible. Trying to keep it in this format.

I don't know if this counts as an answer, but you're not actually doing anything with that data variable in the save row click. You take the datatable, do nothing to change it, and then redraw it. So it's not surprising nothing is happening.
See this change to your fiddle to get the rows adding:
https://jsfiddle.net/o92g9goL/14/
Primarily, you need to set the table and datatable into different arrays. Also do it inside the main function. Also you need to actually add this code:
datatable.row.add(data).draw(false);
As for the editing, you'll need to make sure that you don't just prepopulate it, but make an actual reference to that row, otherwise how will it know to update it?

Jquery - check column checkboxes then do something with those rows

I've been trying to find a good match to my question, but nothing really concrete. I'm still learning and don't know exactly what I'm missing.
So my code can be found here: Fiddle
This is a simplified version of what I'm working with. In the final version, I will upload a csv file to the html table you see there (id="dvCSV"). Upon uploading, the table will look like it is shown (with added dropdowns and a column of checkboxes). The checkboxes come "pre-chcecked" when I generate them but what I want is the user to be able to turn "off" the rows that I do not want to calculate on.
I'll run you through the process:
This function reads the columns that the user designates. I don't know which column they will upload the data into.
function CheckLocations() {
//Checks the uploaded data for the locations of the Lat/Lon Data based on user dropdowns
colLocs[0] = ($('#Value_0 :selected').text());
colLocs[1] = ($('#Value_1 :selected').text());
colLocs[2] = ($('#Value_2 :selected').text());
colLocs[3] = ($('#Value_3 :selected').text());
LatColumn = colLocs.indexOf("Lat");
LongColumn = colLocs.indexOf("Long");
}
function AllTheSame(array) { //if they do not designate the checkboxes, I prompt them to
var first = array[0];
return array.every(function (element) {
return element === first;
});
}
This function takes all of the data in the designated columns and places them into an array for calculation.
function data2Array() {
//gets the lat and long data from the assigned columns and transfers them to an array for calculation
$("#dvCSV tr td:nth-child(" + (LatColumn + 1) + ")").each(function () {
var tdNode = $("<td/>");
tdNode.html(this.innerHTML);
LatData.push(tdNode.text());
});
LatData.splice(0, 2);
LatData.unshift(1, 1);
$("#dvCSV tr td:nth-child(" + (LongColumn + 1) + ")").each(function () {
var tdNode = $("<td/>");
tdNode.html(this.innerHTML);
LongData.push(tdNode.text());
});
LongData.splice(0, 2); //these two lines remove the first two items then replace them with 0
LongData.unshift(1, 1);
}
The first of these functions removes the checkbox column after calculations are done then new calculated columns are appended at the end. The second one was my attempt to read the checkboxes into an array. Ideally I'd want an array of values true or false, then do the calculations and return the calculated values back to the dvCSV table. For the td's where no calculation was performed, the cell would be empty.
function removeChecks() {
$("#dvCSV th:last-child, #dvCSV td:last-child").remove();
}
function makeCheckArray() {
var searchIDs = $("#dvCSV tbody td:last() input:checkbox:checked").map(function () {
return $(this).val();
}).get();
alert(searchIDs);
}
Hopefully I made the problem clear. Any help would be appreciated.

Pass a class when your table is generated into the tr element. Then create an on change method for your checkboxes. Read more here: http://api.jquery.com/on/
Also if you cannot get the inserted rows id's from your table then start a counter outside of your js like this
counter = 0;
Then inside of your loop add counter++
SO..
<tr class="row-1">
<td>
</td>
</tr>
Then add this snippet outside all of your other JS
$( "tr" ).on( "change", function() {
//do something
$(this+'.row-'+(counter)).hide();
});
This should get you headed in the right direction.

Expand and collapse in table row

I have a table which is being generated from server side and it looks like this.
Now the requirement is to hide all the column of Category B, remove duplicate rows for Category A and show entries of corresponding entries of Category B in expand-collapse way. Each A1 Name Column cell will have a expand button and when it is clicked the entries of B columns of that row will be shown below that.
I'm able to hide B category and remove duplicate rows by
var hide_duplicate_row = function () {
var seen = {};
$('td:nth-child(2)').each(function () {
var txt = $(this).text();
if (seen[txt])
$(this).closest('tr').hide();
else
seen[txt] = true;
});
};
var show_only_head = function(){
$('td:nth-child(4),th:nth-child(4)').hide();
$('td:nth-child(3),th:nth-child(3)').hide();
}
hide_duplicate_row();
show_only_head();
Fiddle: http://jsfiddle.net/ME3kG/3/
but I'm stuck with the expand collapse part, how do I populate the B category's row data in this way? Any input on this will be appreciated, thanks.
Full table:
Desired table:

Here is the plan for this:
Goes through the table rows one by one:
$('table tr').each(function () {
On each row get the content you need:
var cell_3 = $("td:nth-child(3)", this).html(); // a3
var cell_4 = $("td:nth-child(4)", this).html(); // a4
While you are still processing the current row modify the A1 column like this:
$( "td:nth-child(1)", this ).append( '<div class="toggle">' + cell_3 + ' - ' + cell_4 + '</div>' );
Now you should have a newly generated DIV in each A1 column. You'll need to assign a toggle functionality on 'click' event and you should be done. The END.
It seems you are developing using jQuery and this is the reason to explain you the idea, not giving you the exact code. :-)
EDIT 1:
Here is the final code, according to the few specific requirements: http://jsfiddle.net/ME3kG/26/ and some formatting: http://jsfiddle.net/ME3kG/30/

Add a div in your td which is hidden onload and display it on click event