I need to reset all the values of field elements of my page. The elements are: inputs, selects (combobox), checkbox and radio group.
Searching found the following code:
$("*").attr('value', '');
$("input[type='checkbox']").attr("checked",false);
$('select').each(function() {
if($(this).children().length > 0) {
$($(this).children()[0]).attr('selected', 'selected');
$(this).change();
}
});
Inputs and checkbox are ok with this code, but the other components present problems with the codes tested. The radio group needed or take any kind of selection or at least select the first. The combobox resets with this code but when trying to select a new value it is not storing your value.
Thanks!
The non textual inputs need to be refreshed. Here's an example of doing so:
//reset text input values, then refresh slider widgets
$(".ui-input-text").val('').filter('.ui-slider-input').slider('refresh');
//reset checkboxes and radio inputs, then refresh them
$(".ui-checkbox input[type='checkbox'], .ui-radio input[type='radio']").prop("checked", false).checkboxradio("refresh");
//reset all select menus and then refresh them
$('.ui-select select').val('').selectmenu('refresh');
return false;
Here is a demo: http://jsfiddle.net/MLewd/1/
Related
I am trying to add a new row dynamically when user selects 'NEW' in ag-grid. It has only one column. And I tried so hard to capture the value in the column without selecting any other column or press 'ENTER'. But most of the methods in ag-grid would detect the changes only some event fires.
[I have to use (keyup) method to detect the text entered but it doesn't detect the][1] column dynamically. I tried (cellClicked), (cellChanged) or getSelectedNodes() etc. I also tried 'checkBoxSelection'.But not able to capture the column value.
Appreciate your help on this. Attached the link for the image. Inserted the code. I can capture the userentered value in the column when he selects ADD but not able to capture with out going to other tab or press 'ENTER'.
private onCellValueChanged($event) {
console.log('onCellValueChanged');
const updateData: Object = {
_id : $event.data._id,
AN_workingGroups: $event.data.AN_workingGroups
}
console.log(updateData);
this.service.updateAnnexData(this.workingGroups, updateData).then((data) => {
console.log(data)
});
console.log('onCellValueChanged: ' + $event.oldValue + ' to ' + $event.newValue);
}
[1]: https://i.stack.imgur.com/9MfIi.pngenter code here
Using Angular 4 (typescript), I have some code like below using ag-grid 12.0.2. All I'm trying to do is load my grid and automatically (programmatically) select the first row.
:
this.gridOptions = ....
suppressCellSelection = true;
rowSelection = 'single'
:
loadRowData() {
this.rowData = [];
// build the row data array...
this.gridOptions.api.setRowData(this.rowData);
let node = this.gridOptions.api.getRowNode(...);
// console logging here shows node holds the intended row
node.setSelected(true);
// console logging here shows node.selected == true
// None of these succeeded in highlighting the first row
this.gridOptions.api.redrawRows({ rowNodes: [node] });
this.gridOptions.api.redrawRows();
this.gridOptions.api.refreshCells({ rowNodes: [node], force: true });
First node is selected but the row refuses to highlight in the grid. Otherwise, row selection by mouse works just fine. This code pattern is identical to the sample code here: https://www.ag-grid.com/javascript-grid-refresh/#gsc.tab=0 but it does not work.
Sorry I am not allowed to post the actual code.
The onGridReady means the grid is ready but the data is not.
Use the onFirstDataRendered method:
<ag-grid-angular (firstDataRendered)="onFirstDataRendered($event)">
</ag-grid-angular>
onFirstDataRendered(params) {
this.gridApi.getDisplayedRowAtIndex(0).setSelected(true);
}
This will automatically select the top row in the grid.
I had a similar issue, and came to the conclusion that onGridReady() was called before the rows were loaded. Just because the grid is ready doesn't mean your rows are ready.(I'm using ag-grid community version 19) The solution is to setup your api event handlers after your data has loaded. For demonstration purposes, I'll use a simple setTimeout(), to ensure some duration of time has passed before I interact with the grid. In real life you'll want to use some callback that gets fired when your data is loaded.
My requirement was that the handler resizes the grid on window resize (not relevant to you), and that clicking or navigating to a cell highlights the entire row (relevant to you), and I also noticed that the row associated with the selected cell was not being highlighted.
setUpGridHandlers({api}){
setTimeout(()=>{
api.sizeColumnsToFit();
window.addEventListener("resize", function() {
setTimeout(function() {
api.sizeColumnsToFit();
});
});
api.addEventListener('cellFocused',({rowIndex})=>api.getDisplayedRowAtIndex(rowIndex).setSelected(true));
},5000);
}
Since you want to select the first row on page load, you can do onething in constructor. But your gridApi, should be initialized in OnGridReady($event) method
this.gridApi.forEachNode((node) => {
if (node.rowIndex === 0) {
node.setSelected(true);
}
It's setSelected(true) that does this.
We were using MasterDetail feature, its a nested grid and on expanding a row we needed to change the selection to expanded one.
Expanding a row was handled in
detailCellRendererParams: {
getDetailRowData: loadNestedData,
detailGridOptions: #nestedDetailGridOptionsFor('child'),
}
and withing loadNesteddata, we get params using we can select expanded row as
params.node.parent.setSelected(true)
Hope this helps.
I have this problem with GWT: I need to skip a button from the focus cycle so I set the tab index to -1 with button.setTabIndex(-1), but in the generated html I get tabindex="0"... is this a bug?
It looks like it's on-purpose: FocusWidget's onAttach resets the tab index to 0 in onAttach when it was set to -1: https://gwt.googlesource.com/gwt/+/2.5.1/user/src/com/google/gwt/user/client/ui/FocusWidget.java
This behavior dates back to 3½ years ago (released in GWT 2.1.0): https://code.google.com/p/google-web-toolkit/source/detail?r=7642 so I'm surprised you're the first to report it (that I know of), but it indeed looks like a bug to me.
It seems it is impossible to have a negative tabindex.
At first, the doc of setTabIndex say :
Sets the widget's position in the tab index. If more than one widget
has the same tab index, each such widget will receive focus in an
arbitrary order. Setting the tab index to -1 will cause this widget to
be removed from the tab order.
And w3c say :
Elements that may receive focus should be navigated by user agents
according to the following rules:
Those elements that support the tabindex attribute and assign a positive value to it are navigated first. Navigation proceeds from the
element with the lowest tabindex value to the element with the highest
value. Values need not be sequential nor must they begin with any
particular value. Elements that have identical tabindex values should
be navigated in the order they appear in the character stream.
Those elements that do not support the tabindex attribute or support it and assign it a value of "0" are navigated next. These
elements are navigated in the order they appear in the character
stream.
Elements that are disabled do not participate in the tabbing order.
Source : http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#adef-tabindex
But if you want to skipe your button, try to set the tabindex < -1.
Example :
Button myButton = new Button("Hello");
myButton.setTabIndex(-2);
// "-1" is convert to 0, and the button is not skipped
I try myButton.setTabIndex(-1); and myButton.getElement.setAttribute("tabindex", "-1"), that is always convert to 0 in html.
I wish that help you.
Working with jsni.
For example:
public static native void setElementTabIndex(Element b, int ti)/*-{
b.tabIndex = ti;
}-*/;
//and call the native js function
setElementTabIndex(odButton.getElement(), -1);
As with setFocus, use deferred:
Scheduler.get().scheduleDeferred(new Command() {
#Override
public void execute() {
cb.setTabIndex(-1);
}
});
Where in my case cb = CheckBox()
Working in Google Web Toolkit (GWT) I am using a CellList to render the details of a list of Tariffs (using a CompositeCell to show a CheckBoxCell next to a custom cell of my own).
I want to filter the list by tariff length (12, 18, 24, 36 months etc). I would like to render a checkbox for each tariff length at the top of the list, and update the dataProvider as necessary when users uncheck and recheck a box.
I do not know in advance the set of tariff lengths, they will be extracted from the result set when the page is rendered. There could just be two (requiring two checkboxes), but possibly there could be 10 (requiring 10 checkboxes) - I only want to render a checkbox for each as needed.
So somehow I need to associate an int value with each checkbox, and then pass that int to a function that updates the list by removing all tariffs that match. I'm just not sure how to add the handler for the checkboxes and how to get the value for that particular box.
This is what I'm thinking:
// panel to hold boxes
private Panel contractLengthPanel = new HorizontalPanel();
textPanel2.add(contractLengthPanel);
// create a set of the terms, by looping the result set
Set<String> contractTerms = new HashSet<String>();
for(ElecTariff tariff : tariffs)
{
contractTerms.add(Integer.toString(tariff.getContractLength()));
}
// loop that set, creating a CheckBox for each value
for(String term : contractTerms)
{
CheckBox box = new CheckBox(term + " Months");
// set all boxes with the same name, and a unique id
box.getElement().setAttribute("name", "termBoxes");
box.getElement().setAttribute("id", "termBox" + term);
contractLengthPanel.add(box);
}
Now I'm not sure if I'm along the right lines here, but now I have each box as part of the same group (they have the same name) I would like to use that to add a handler that is called when a box is checked or unchecked, passing the box id (which contains the tariff length) to that function.
I hope this wasn't too confusingly written. Help appreciated.
There really is nothing like a "group of checkboxes" in HTML, and neither there is in GWT. There are kind of "groups of radiobuttons" though, but it's only about having their checked state mutually exclusive, it doesn't change anything to the way you work with them from code.
You have to listen to changes on each and every checkbox.
What you can do though is to use the same event handler for all your checkboxes; something like:
ValueChangeHandler<Boolean> handler = new ValueChangeHandler<Boolean>() {
#Override
public void onValueChange(ValueChangeEvent<Boolean> event) {
CheckBox box = (CheckBox) event.getSource();
String id = box.getFormValue();
boolean checked = box.getValue();
…
}
};
(note: I used getFormValue() rather than getElement().getId(); I believe it's a better choice: it's specifically made to associate a value with the checkbox)
In Jqgrid, I want to restrict user to select only one check box at any time. When user selects multiple check box only last selected to be in 'selected' state, remaining should be automatically un-selected.
I have set multi select attribute to true. But I am not able to do un-select previously selected item. Is it possible to do if so how?
Thanks
You can use the event beforeSelectRow and reset the selection:
beforeSelectRow: function(rowid, e)
{
jQuery("#list47").jqGrid('resetSelection');
return(true);
}
I've got a fiddle for you so you can check how it works.
You have to do some more stuff:
1. Set multiboxonly to true and multiselect to true
2. Define the events onSelectRow and beforeSelectRow:
3. Define global variable: var lastSel;
The OnSelectRow and beforeSelectRow implementation:
onSelectRow: function (rowId, status, e) {
if (rowId == lastSel) {
$(this).jqGrid("resetSelection");
lastSel = undefined;
status = false;
} else {
lastSel = rowId;
}
},
beforeSelectRow: function (rowId, e) {
$(this).jqGrid("resetSelection");
return true;
}
Having a checkbox in each column implies that you can click more than one at a time. What you are asking for is basically the multiselect: false behavior but with the checkbox column - are you sure you really want the checkboxes in this case?
I know this question is old, but I found a better solution in this Stack Post.
All you have to do is set the following two properties of the jqGrid:
multiselect:true // multi-select checkboxes appear
multiboxonly:true // checkboxes act like radio buttons where only one is selected at a time
I have updated the fiddle made by LeftyX to simply use the multiboxonly setting at this JsFiddle
This was what I needed. It may help someone else.