when inline-editing a text column in the w2ui.grid the ENTER key applies the change AND starts editing one row below.
How can I prevent the editing of the line below, but only apply the changes to the current row?
Thank you.
You can do this by cancelling the edit event if the previous keycode was ENTER.
w2ui.grid.onEditField = function(event){
if(event.originalEvent.keyCode === 13){
event.preventDefault();
}
};
fiddle: http://jsfiddle.net/ty77umx1/1/
Related
I have a DatePicker for selecting birthday.
This is going to be used for some filtering, and after the filtering, I will like the value to be reseted, i.e. the DatePicker should go blank.
Any help???
If you want to clear the TextField of the DatePicker, you can use :
datepicker.getEditor().clear();
If you want to clear the value and the textfield, use :
datePicker.setValue(null);
if you want to set the the value of a datepicker to its default value or the current date you can use this
datepicker.setValue(LocalDate.now());
or if you want to clear the textfield of the datepicker`
datepicker.getEditor().clear();
just add this code
}).keyup(function(e) {
if(e.keyCode == 8 || e.keyCode == 46) {
$.datepicker._clearDate(this);
}
});
You can use backspace to clear field even if it has in read only mode.
Source
I have a popup with a DataGrid (with editable cells) and a validating button. If I set a value in a cell just before and don't leave it by selecting another cell, I don't get this value when validating. I know how to go through each cell of this grid and see if there is a focused one :
dojo.query("#myGrid .stdCell").forEach(function(node, idx){
if(dojo.attr(node,'class').indexOf('dojoxGridCellFocus') > -1) {
// But what to do here?
}
}
I think I have to blur this cell or focus another element of the popup but how can I do that? Or is there a simpler a function for this?
Thanks for your help.
Finally got it working with a little workaround.
I added to my grid :
onBlur="onTableBlur"
And in my JS file :
var onTableBlur = function() {
if (this.edit.isEditing()) {
this.edit.apply();
}
};
I have a grid I created in Gridx which lists a bunch of users. Upon clicking a ROW in the grid (any part of that row), a dialog pops up and shows additional information about that user and actions that can be done for that user (disable user, ignore user, etc.) - when one of these options is selected from the pop up, I want to DISABLE that row. The logic for getting the row, etc. I can take care of, but I can't figure out how to make a grid row actually "appear" disabled and how to make that row no longer clickable.
Is there a simple way to do this? If you aren't familiar with gridx, solutions that apply to EnhancedGrids or other Dojo grids are also appreciated.
Alright now that I have a little more information here is a solution:
Keep a list of all the rows you have disabled so far either inside the Grid widget or in its parent code. Then on the onRowClick listener I would write code like this:
on(grid, "onRowClick", function(e) {
if(disabledRows[rowIndex]) {
return;
}
// Do whatever pop up stuff you want and after
// a user selects the value, you can "disable"
// your row afterwards by adding it to the disabled
// list so that it can no longer be clicked on.
var rowIndex = e.rowIndex;
disabledRows[rowIndex] = true;
// This is just some random class I made up but
// you can use css to stylize the row however you want
var rowNode = e.rowNode;
domClass.add(rowNode, "disabled");
});
Note that domClass is what I named "dojo/dom-class". Hope this helps!
This is perhaps not exactly what you are seaching for:
If you want to hide one or more rows by your own filterfunction you could just add to these rows in the DOM your own class for nodisplay. Here I show you a function for display only those rows which have in a choiceable field/column a value inside your filterlist.
function hideRowFilter(gridId, fieldName, filterList)
{
var store = gridId.store;
var rowId;
store.query(function(object){
rowId = gridId.row(object.id,true).node();
if (filterList.indexOf(object[fieldName]) == -1)
domClass.add(rowId, "noDisplay"); // anzeigen
else
domClass.remove(rowId, "noDisplay"); // verstecken
});
}
CSS:
.noDisplay { display: none; }
So I can for example display only the entries with a myState of 3 or 4 with this call:
hideRowFilter(gridId, 'myState', [3, 4]);
Note that domClass is what I named "dojo/dom-class"
Currently you only need one checkbox to be checked in order to activate the button. I would like to make it so 3 of the checkmarks need to be checked in order to activate.
http://jsfiddle.net/chriscoyier/BPhZe/76/
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
Here you go! The issue is you should use the ":not()" selector.
http://jsfiddle.net/douglasloyo/BPhZe/470/
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function() {
submitButt.attr("disabled", checkboxes.is(":not(:checked")));
});
You can count how many checkboxes are set using:
var numChecked = $("input[type='checkbox']:checked").length;
Here's a fiddle: http://jsfiddle.net/9whF5/ Change the condition if you want at least three boxes to be checked. As is, the fiddle requires exactly three boxes to be checked.
Here you go. It even disables if the third is unchecked.
Here's the working fiddle: http://jsfiddle.net/BPhZe/471/
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function() {
if ($(":checkbox:checked").length >= 3){
submitButt.attr("disabled", false);
}
else{
submitButt.attr("disabled", true);
}
});
i have a page which generate check boxes dynamically and i have
the following event which fires every time a user click on any of the check boxes
$(':checkbox').click(function() {
});
My question is how can i get the text of the check box that has been trigger by the user?
Thank you
Taking #CliffC query and changing it, This should work. Its an explicit query so you will always get the correct label
$(':checkbox').click(function() {
alert( $(this).parent().find("label[for=" + this.id +"]").text());
});
found the solution
$(':checkbox').click(function() {
alert( $(this).parent().find("label").text());
});