jqGrid: Expected Behavior for Checkboxes in Table Formatting - javascript

I am working with jqGrid to display a list of data. Each row has a checkbox on the leftmost side, with the top row acting as a column header. The checkbox on the leftmost side of the column header acts as a "Select All" button for all of the rows being displayed. In this scenario, if a user manually selects all of the checkboxes for each row, should the "Select All" checkbox automatically select itself?
See attached image for the checkbox in question.

Not necessary. It would be nice though.

You can do this way:-
$("#selectAll").click(function(){
grid.jqGrid('resetSelection');
var ids = grid.getDataIDs();
for (var i=0, il=ids.length; i < il; i++) {
grid.jqGrid('setSelection',ids[i], true);
}
});
$("#clear").click(function(){
grid.jqGrid('resetSelection');
});
​
This example is taken from here.

In my point(and my customer's request also) of view, It is necessary. The main reason I want to make sure the header checkbox gets selected in my grids is so the user can subconsciously determine that yes, all the rows in the grid are definitely selected right now. If you consider, many rows in the jqgrid (some row are not visible) , how can i make sure all rows are selected (?).

Related

Deselect selected rows from ag grid angular

Is there any grid api to deselect ag-grid selected rows programatically?
I'm trying to perform some operation on the selected row, basically an async operation , after which I need to deselect this row from the grid .
Used grip api deselectAll function . It worked !
this.gridOptions.api.deselectAll();
For anyone that finds this in the future:
Allow manual row deselection by setting gridOptions.rowDeselection = true as Victor said.
Programatically deselect all rows using gridOptions.api.deselectAll() as OP discovered.
To programatically deselect a single row, use rowNode.setSelected(false).
rowNode.setSelected(isSelected, clearSelection) can be used to select rows as well, and will deselect all rows other than the subject rowNode if clearSelection is true.
I believe it is weird but setting rowDeselection to true didn't work for me. What I wanted was simple: Being able to deselect a row when it was selected already. So I checked the Row Selection section of AG Grid's documentation and I find this:
rowMultiSelectWithClick: ... Clicking a selected row in this mode will deselect the row.
Huh! Yeah that sounds like what I need! But I don't want multiple selection...! I want single selection ONLY. So I thought maybe setting rowSelection to single will fix it and the selection will be single and deselectable. And... yes it works! The reason I was in doubt initially when doing this is using "rowMultiSelectWithClick" together with "single rowSelection" sounds contradictory, but it works anyways and this is the thing that matters really! :)
So e.g., if you're using it in React (quite similar in Angular or Vanilla JavaScript), just add:
<AgGridReact
rowSelection="single"
rowMultiSelectWithClick={true}
//...
>
set gridOptions.rowDeselection to true with rowSelection as multiple will deselect a selected by click when holding control key.
You could try the deselectAll() method in the GridApi. Though, it doesn't appear that AgGrid has an option to deselect specific rows.
To deselect a specific row/node use api.getSelectedNodes() instead of getSelectedRows(). Then for each node use node.data for the row info you need and then node.setSelected(false) to deselect when done.
let selected = gridOptions.api.getSelectedNodes();
_.each(selected, function(node) {
let row = node.data;
//stuff
node.setSelected(false);
});

Oracle APEX Tabular form select list disable

Using Oracle Apex 4.2
I have a tabular form where you can create a new row and can update existing data. I am having a problem with trying to disable or make items read only in a select list on the tabular form.
For example, the select list has in it;
orange, green, blue, red
I want to be able to disable or read only the items blue and orange in the select list based on a value from another column.
Any help would be appreciated.
This is a quick test in Apex 5, but i think you can use similar approach in 4.2
1. Create Dynamic Action On Page Load
- set Action to Execute JavaScript Code
- Selection Type to jQuery Selector
- Inspect element to find his id (in my case "f01_0001")
2. Change "if" condition to match your criteria. For example:
var op = document.getElementById("f01_0001").getElementsByTagName("option");
for (var i = 0; i < op.length; i++) {
// lowercase comparison for case-insensitivity
if (op[i].value.toLowerCase() == "red") {
op[i].disabled = true;
}
}
I am guessing you want to apply disabled style to 2 options of select item based on value from other item.
Assuming that,
first column of tabular form is text field and has value that needs to be referenced
fifth column of tabular form is the one with select item with blue and orange options
there are multiple rows in the table
collection of input items that have common name "f01" but different IDs based on row position. For e.g., "f01_000X" where x is row index.
collection of select items that have common name "f05" but different IDs based on row position. For e.g., "f05_000X" where x is row index.
stylize select options blue and orange when text field value in first column is "abc". stylize such that the option is non selectable.
stylize on page load(not on referenced text field value change or region refresh)
Solution,
Loop through all text items on page load, identify row index of current item, get handle of select item's blue and orange options and also referenced text field with help of identified row and then style it accordingly.
Code on how to go about with this,
Javascript Function and Global Variable Declaration
function updateRowStyle(rowIndex) {
var inp_reference = $("#f01_" + rowIndex);
var opt_blue = $("#f05_" + rowIndex + " option:contains('blue')");
var opt_orange = $("#f05_" + rowIndex + " option:contains('orange')");;
if (inp_reference.val() === "ABC") {
opt_blue.prop("disabled", true);
opt_orange.prop("disabled", true);
} else {
opt_blue.prop("disabled", false);
opt_orange.prop("disabled", false);
}
}
Execute when Page Loads
$("[name=f01]").each(function() {
updateRowStyle(this.id.split("_").pop());
});

the combo box editor in cell editing grid does not deselect after choosing a value

I am having an editor grid with four columns and i am trying to implement a sql builder. The where statement will have four fields namely "condition1" "operator" "condition2" "and/or".
I am using a combo box to select between and/or/none and there is a delete button as row action. when I delete a row and if that row is the last,the value of and/or combo in the previous row will be set as "none". I am able to achieve that but the problem is , when the combo box is selected in the previous row and i delete the row next to it, the value changes in the store but not in the view. the value changes in the view when the combo box is not selected in the previous row.
my code is :
if(rowIndex == grid.all.endIndex)
{
//get the previous record and set the vale to none
var previousRowRecord = grid.store.getAt(rowIndex-1);
previousRowRecord.set('andor','NONE');
//delete the current record
grid.getStore().removeAt(rowIndex);
grid.getView().refresh();
}
else
{
grid.getStore().removeAt(rowIndex);
}
How to deselect a combo box once the value is selected ? i think this can be a work around
Not sure if I understood you correctly (a screenshot would help out a lot here), but it may sound like the combo box is still in the edit state when you are deleting the row below. If so, try the following:
First make sure the grid editor plugin has an id:
plugins: [{
ptype: 'cellediting',
...
pluginId: 'celleditplugin'
}],
Then, before deleting the row, do the following:
yourGrid.getPlugin('celleditplugin').completeEdit();

JqGrid check to see if the row is selected

Hi im trying to check to see if a row is selected in jqGrid and if it is then toggle the selection.
I know i can deselect the current row using
`.jqGrid('setSelection', rowid, false);`
and
.jqGrid('resetSelection');
applys this to every row in the grid. But i need to check if the row is already selected before i deselect it.
But what i need to do is an if statement that checks if the selected row is selected and if so do some code but i don't know how to get the true or false value from the row. I've tried using and alert to see what the setSelection reruns but it just displays [object object]. Thank you for any help.
You can use .jqGrid("getGridParam", "selrow") and .jqGrid("getGridParam", "selarrrow") (be carefull in the strange name of the option) to get internal options which hold the last selected rowid and the array of rowids of selected rows. So, if you need to check whether the row with the rowId is selected and you use multiselect: true option, then you can use the following code template
var selRowIds = $("#grid").jqGrid("getGridParam", "selarrrow");
if ($.inArray(rowId, selRowIds) >= 0) {
// the row having rowId is selected
}

Allow only one selection per column and row in a webpage's grid of radio buttons

I have a grid of 5x5 radio buttons, with the each row being a "group" (sharing the same name).
I want to make it so that when A3 is selected, B3 C3 D3 and E3 can not be selected and for example if B4 is selected no other button in row B or column 4 can be selected.
I have tried using multiple names, but as far as my testing goes this doesn't work. I have tried to find a solution with Jquery but nothing seems to work. Is the only way to achieve this using a bit of complex JavaScript?
This is easiest done by adding classes to each radio button, one for column and one for row. As a radio button is checked, all that needs to be done is to disable those with one matching class (i.e. matching row or column).
$('input[type="radio"]').change(function() {
var classes = $(this).prop('class').split(' ');
for (i in classes)
$('.'+classes[i]).attr('disabled', true);
});
A JSFiddle that demonstrates the technique.
Rows are handled automatically if they have the same name.
Disabling other radio-buttons prevents you from changing your mind. I'd consider deselcting conflicting Radiobuttons.
$(".radiobutton").on("change", function(ev) {
var clicked = $(ev.target);
$(".radiobutton[data-col=" + clicked.data("col") + "]").attr("checked", false);
clicked.attr("checked", true);
});
Try this

Categories

Resources