I am making a new Datatable and there is such functionality in it that I could extend a row if someone has pressed on it:
// Add event listener for opening and closing details
$('#datatable-buttons tbody').on('click', 'tr', function(){
var tr = $(this);
var row = a.row( this );
if(row.child.isShown()){
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
row.child(format(row.data())).show();
tr.addClass('shown');
}
});
So, if someone has pressed on a button at an extended line than I could listen it:
$('#datatable-buttons tbody').on('click', 'td button', function(){
var tr = $(this);
var row = a.row( this );
However I have tried 100 ways to submit a form of this line and nothing works proper.
This is simple function which extends a row:
function format ( d ) {
var editform = '<form> ... <button type="submit" class="btn
btn-primary mb-2" >Submit</button></div> </div></form>';
return editform;
}
So, now I could only listen to it when button is pressed but I don't know how to take this data and submit a form.
Once again: 1. Datatable have rows and doesn't have any buttons. 2. If you press on any one of the rows - it will extend and show it's details (new area below of the row will appear). 3. It is a form on this area. 4. I can't to submit it.
UPDATE: jsfiddle You can see an issue pressing any row and submitting a button. So you could have an alert but not the form data.
From your JSFiddle code and the comments, it seems you were trying to suppress the form submission with a view to using an AJAX request to submit the data instead. However, you'd done it by trying to modify the "action" attribute of the form tag, and in doing so introduced a syntax error.
Although you might be able to make this technique work, it's not the recommended way, and does have some drawbacks. It's better to handle the form's "submit" event using a standard jQuery (delegated) event handler:
$('#table_id tbody').on('submit', 'form', function(event) {
event.preventDefault();
//...and then your AJAX code goes here
});
event.preventDefault will stop the regular form submission from happening, so that you can then run the AJAX code.
Here's an adapted version of your JSFiddle showing it in action: https://jsfiddle.net/moa1nr9j/
I am Trying to select a kendo Grid Row .when press "ENTER"
key.
i tried below code:
("#grid").data("kendoGrid").table.focus();
this actually selects the table and focus to the cell.
But i want to select whole row.
By Simply add this you can achieve this....try once..
var selectFirstColumnOfKendoGrid = function () {
var grid = $("#kendogrid").data("kendoGrid");
var firstCell = grid.table.find("tr:first td:first");
grid.current(firstCell);
grid.table.focus();
$('body').animate({ scrollTop: 0 }, 0);
}
in my app kendogrid is the id ...
Try something like this :) The selector may be wrong because I don't know your HTML.
$(document).keypress(function(e) {
if(e.which == 13) { //enter keycode
$("#grid tr:first").focus();
}
});
Selecting the first row of a grid is:
grid.select($("tr:first", grid.tbody));
But I do not understand when you want to press "enter"... but might be a little tricky since keyboard key presses are bound to default handlers.
I have an ASP.NET page with a Telerik RadEditor (rich text box). When tabbing through a page, when a user gets to the text box, focus gets set to the various toolbar icons before it goes to the textarea. I added some jQuery to one page to set the focus on the text area when tabbing out of the last cell on a form:
$('input[type=text][id*=tbCost]').keydown(function (e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) { //If TAB key was pressed
e.preventDefault();
var editor = $('body').find("<%=RadEditor1.ClientID%>"); //get a reference to RadEditor client object
editor.setFocus(); //set the focus on the the editor
}
});
I am looking for a way to implement this functionality in the control so that it will work regardless of the page it is on. For example, in the above code, focus is only set if the user is tabbing out of the tbCost cell. I would like to be able to set the focus to the text area when a user tabs into the toolbar items.
Is there any way to detect when an element is about to get focus? I know I can see if an element has focus, but I can't think of a way to implement this functionality.
Thanks
Solution:
If anybody has this same question in the future and wants an example, here is the code I used:
$(document).ready(function () {
$('.reToolCell').focusin(function () {
var editor = $('body').find("<%=RadEditor1.ClientID%>");
editor.setFocus();
});
});
You might consider binding to a focus on the toolbar icons and redirecting focus to the text area. Although this might have unintended side effects if users are trying to tab-focus these tools in order to use them.
//on focus eventHandler for all your icons that calls a function
#('.elementtype, class or a generic way of identifying the icons'.onfocus(myFunction(this))
//the function take a parameter of your element, moves to the next sibling element and sets the focus
myFunction = (element) {
element.next().focus();
}
I have this datatable an YUI datatable inside a dialog. The datatable has only 2 columns where only one is editable with formatter: "checkbox". I'm wondering is there any way to collect only the changed data or how should I get all the data to submit it with AJAX request.
Here an sample how to listen to the checkbox click event and select the row of the datatable. You should change the code of selecting the row by a ajax query to post your data changed.
myDataTable.subscribe("checkboxClickEvent", function (oArgs) {
var elCheckbox = oArgs.target;
var oRecord = this.getRecord(elCheckbox);
if (elCheckbox.checked) {
myDataTable.selectRow(oRecord);
} else {
myDataTable.unselectRow(oRecord);
};
});
Hope this helps.
In a change event listener for the check box (the click event listener), you could add the obtained records into a (global) array by using something similar to
changedArray.push(oRecord);
And when you want to send it, send changedArray. You could also prevent multiple adds.
if (!changedArray[oRecord.keyElement]) {
changedArray.push(oRecord);
changedArray[oRecord.keyElement] = true;
}
I have a simple in-line edit in my grid, and I want to commit the change when the user tabs off the textbox. The default behavior of jqGrid forces the user to press 'Enter' to commit the change, but this is non-intuitive for our users.
onSelectRow: function(id) {
$(gridCoreGroups).editRow(id, true, undefined, function(response)
{
alert("hello world");
}
}
I've worked my way through the events provided, but they all happen as a result of the user pressing 'Enter', which I want to avoid. Is there something I can wire up that would trigger an action when the user tabs off this cell?
For in line editing you can accomplished this several ways. To bind an onblur event to the input field using the onSelectRow trigger, eliminating the need for edit and save buttons, do something like this:
$('#gridId').setGridParam({onSelectRow: function(id){
//Edit row on select
$('#gridid').editRow(id, true);
//Modify event handler to save on blur.
var fieldName = "Name of the field which will trigger save on blur.";
//Note, this solution only makes sense when applied to the last field in a row.
$("input[id^='"+id+"_"+fieldName+"']","#gridId").bind('blur',function(){
$('#gridId').saveRow(id);
});
}});
To apply a jQuery live event handler to all inputs that may appear within a row (jqGrid labels all inputs as rowId_fieldName ), loop throw the number of rows in your grid and do something like this:
var ids = $("#gridId").jqGrid('getDataIDs');
for(var i=0; i < ids.length; i++){
fieldName = "field_which_will_trigger_on_blur";
$("input[id^='"+ids[i]+"_"+fieldName+"']","#gridId").live('blur',function(){
$('#gridId').jqGrid('saveRow',ids[i]);
});
}
Note: To use blur with .live() like above, you'll need jQuery 1.4 or the patch located at:
Simulating "focus" and "blur" in jQuery .live() method
Be careful with rowIds. When you get into sorting, adding and removing of rows, you may find yourself writing some tricky jQuery to convert row ids to iRows or row numbers.
If you're like me and you went with individual cell edit, you'll want to modify the afterEditCell trigger with something like:
$('#gridId').setGridParam({afterEditCell: function(id,name,val,iRow,iCol){
//Modify event handler to save on blur.
$("#"+iRow+"_"+name,"#gridId").bind('blur',function(){
$('#gridId').saveCell(iRow,iCol);
});
}});
Hope that helps..
This is pretty horrible, but its my take on this problem, and is prob a bit easier and more generic - it presses enter programmatically when the item loses focus :)
afterEditCell: function() {
//This code saves the state of the box when focus is lost in a pretty horrible
//way, may be they will add support for this in the future
//set up horrible hack for pressing enter when leaving cell
e = jQuery.Event("keydown");
e.keyCode = $.ui.keyCode.ENTER;
//get the edited thing
edit = $(".edit-cell > *");
edit.blur(function() {
edit.trigger(e);
});
},
Add that code to your jqgrid setup code.
It assumes that the last edited item is the only thing with .edit-cell as a parent td.
My solution was to use basic jQuery selectors and events independently of the grid to detect this event. I use the live and blur events on the textboxes in the grid to capture the event. The two events are not supported in combination with each other, so this hack ended up being the solution:
Simulating "focus" and "blur" in jQuery .live() method
I know this question is old however the answer is outdated.
A global variable called lastsel must be created and the following added to the jqGrid code
onSelectRow: function (id) {
if (!status)//deselected
{
if ($("tr#" + lastsel).attr("editable") == 1) //editable=1 means row in edit mode
jQuery('#list1').jqGrid('saveRow', lastsel);
}
if (id && id !== lastsel) {
jQuery('#list1').jqGrid('restoreRow', lastsel);
jQuery('#list1').jqGrid('editRow', id, true);
lastsel = id;
}
},
I had the same issue and tried the answers above. In the end I went with a solution that inserts an "Enter" key press when the user is leaving the tab.
// Call this function to save and unfinished edit
// - If an input exists with the "edit-call" class then the edit has
// not been finished. Complete the edit by injecting an "Enter" key press
function saveEdits() {
var $input = $("#grid").find(".edit-cell input");
if ($input.length == 1) {
var e = $.Event("keydown");
e.which = 13;
e.keyCode = 13;
$input.trigger(e);
}
}
Instead of using selectRow use CellSelect.
onCellSelect: function (row, col, content, event) {
if (row != lastsel) {
grid.jqGrid('saveRow', lastsel);
lastsel = row;
}
var cm = grid.jqGrid("getGridParam", "colModel");
//keep it false bcoz i am calling an event on the enter keypress
grid.jqGrid('editRow', row, false);
var fieldName = cm[col].name;
//If input tag becomes blur then function called.
$("input[id^='"+row+"_"+fieldName+"']","#gridId").bind('blur',function(e){
grid.jqGrid('saveRow', row);
saveDataFromTable();
});
//Enter key press event.
$("input[id^='"+row+"_"+fieldName+"']","#gridId").bind('keypress',function(e){
var code = (e.keyCode ? e.keyCode : e.which);
//If enter key pressed then save particular row and validate.
if( code == 13 ){
grid.jqGrid('saveRow', row);
saveDataFromTable();
}
});
}
//saveDataFromTable() is the function which validates my data.