I've a grid using cell-edit mode. The problem is: after the last cell is modified, the focus is still in that cell.
Then, no ENTER/ESC is pressed, directly click the next page to do input for next page. After some days, they find the last cell of each page is NOT saved as expected.
How to deal with this?
I've tried to modify jqgrid.src.js to bind('blur') on the cell-edit element to call the saveCell like this
....
$("input, select, textarea", cc).bind("keydown" .
....
//my code start here
.bind("blur", function (e) {
$($t).jqGrid("saveCell", iRow, iCol);
)
//my code end here
This will save the modification as expected. BUT, the NEXT-PAGE/PRE-PAGE of the grid does not work anymore until a reload.
I think this is a common problem for jqgrid users.
Does anyone can help me?
I'd recommend you to use onPaging callback as the place for saving the editing cell by saveCell. See the answer.
Related
I apologize if my question was already answered but I didn’t find any relevant answer.
I would like to dynamically edit cell value therefore I used:
var setButton = document.getElementById('setButton');
setButton.addEventListener('click', function(event) {
hot.getActiveEditor().beginEditing();
hot.render();
})
it edits cell but I don’t see original value, only empty.
Example:
https://jsfiddle.net/janzitniak/qdg420v8/6/
Note: Please select to any cell and then click to Set value to selected cell button.
Thank you for any help.
Solution
Long story short: Call enableFullEditMode() before you call beginEditing().
Not sure about the render() call though - I think that call can be removed.
JSFiddle
Storytime
I was looking for a solution to a similar problem, and had to look into the code to figure it out. In hindsight this was straightforward.
First there is some code which will reset the content of textareas to an empty string, to work with IME (or at least the comment says so)
And then there is code which will only set the original value into the cell, when the full editor mode is enabled.
I have a function that runs in load complete event, however, depending on which loadComplete I use in my grid, one way it works and one way it does not.
For example, I want to modify color of particular div on the the table after load complete. so I have
$(grid).jqGrid(
{...options...
loadComplete: function()
{
changeColor();
}
...remaining grid options/events
)};
I can see the code inside the changeColor work, but then coloring reverts back to before code when grid is done.
BUT If I have this...
$(grid).jqGrid(
{...options...
'loadComplete': changeColor,
...remaining grid options/events
)};
the code changes color and stays there. I also tried gridComplete: function() and got same result as using loadComplete:function().
Based on what I am seeing, it appears to me that the grid continues to load after loadComplete:function() but not after 'loadComplete':.
I also discovered, by accident, that if grid contains both loadComplete:function() and 'loadComplete', the 'loadComplete' fires.
I can work around the issue described above(I don't like to), but if anyone know why this occurs i would appreciate an answer.
Using jqGrid 5.0.2.
Thanks.
I have a grid with a pager. I need to stop the pager from loading another page while on the current page a row is in inline edit. So when i create the grid i define the onPaging function
....
onPaging : function(){
if (inEdit()>0){
alert("Finish editing the current line");
return 'stop';
}
}
....
the function inEdit simply counts how many lines have the attr editable.
This does the job, however later when i call the restoreRow function on the row that was in edit when the paging was stoped the function fails to restore the row to the previous state.
Later Edit:
The problem occurs later when this function is called to cancel the edit
function cancelEdit(id){
/*this line does nothing at all --> */ $('#list').jqGrid('restoreRow',id);
//The only way restore worked is by calling a grid reload but that is not really a solution
$('#list').trigger("reloadGrid", [{page:$('#list')[0].p.page}]);
$('#'+id+' [name=editButton]').show();
$('#'+id+' [name=submitButton]').hide();
$('#'+id+' [name=cancelButton]').hide();
}
PS: The Edit/Save/Cancel/Delete are custom buttons
I think if you look at doing what you are doing but checking out Oleg's post at
jqGrid - Inline edit - Detect dirty / changed cells
and using that flag to prevent paging you will be able to accomplish what you are trying to do.
There is a problem when I put Kendo Dropdown List info Fancybox - Popup.
For detail:
I have page A :this page contains Kendo Dropdown list (with id = #myDropdown).
I have page B : I put my Fancybox caller here- I mean I use Fancybox to load page A (by ajax)
Everything look well , but I got a problem here:
You know, when I initialize a Dropdown List, Kendo-UI will create an "anchor" Tag for UI-effect purpose.
Ex:
DropdownList has id = #myDropdown
Kendo will create one more Tag with id = #myDropdown-list.
After closing the Fancybox-popup , The "#myDropdown" was removed from DOM, but "#myDropdown-list". It still on the DOM overtime, and it willing to be double after I call the popup again(ofcourse if dont refresh current page).
And The Kendo-DateTimePicker as the same too.
p/s: and so sorry about by english if it was too bad :D. I hope you get my question.
im going to put my "popup" in iframe.But I dont know if it is good when using iframe in this case...
Using IFrame or not is not the cause of the error. I tried with a container and without it to load the fancybox via ajax, but it didn't make a difference.
What I found is sort of a hack, however it solves the problem. Let's suppose we have a code which creates the popup and the popup's content is located in the href 'popupFrame':
$.fancybox({
'href': 'popupFrame',
'type': 'ajax',
beforeClose: removeKendoHelpers
});
The other part is the function which is called before closing the popup:
function removeKendoHelpers() {
$("#myDropdown-list").remove();
}
Of course you can create the removeKendoHelpers as an inline function and if there are more parts to remove then put that code into the removeKendoHelpers function as well.
One interesting remark: in the fancybox API onCleanup and onClosed are listed as options but they do not work, instead use beforeClose or afterClose.
UPDATE:
Actually a lot of problem is solved with calling the kendo widget's destroy() method. It solves the removing problems for the widgets except for one of the three helper divs of the DateTimePicker, so the close looks like the following:
function removeKendoHelpers() {
$("#myDropdown-list").data("kendoDropDownList").destroy();
$("#datetimepicker").data("kendoDateTimePicker").destroy();
}
And to resolve the date time picker's actual problem which is I think a bug in the kendop framework (I will report this and hopefully get some feedback) the last function only needs to be extended with:
$(".k-widget.k-calendar").remove();
OTHER solution:
This one is more crude but works like a charm for me even if the page has multiple kendo controls and even if you open another fancybox from your fancybox.
Wrap the fancybox creation in a function, like:
function openFancyBox() {
$("body").append("<div class='fancybox-marker'></div>");
$.fancybox({
'href': 'popupFrame',
'type': 'ajax',
beforeClose: removeKendoHelpers
});
}
This will create a new div at the very end of the body tag, and the function at the closing of the fancybox uses this:
function removeKendoHelpers() {
$(".fancybox-marker").last().nextAll().remove();
$(".fancybox-marker").last().remove();
}
I hope these solves all your problem!
So I have created a context box upon right click that has Add/Edit/Delete Rows. I also have a bunch of code launched before the Dialog is shown. My problem is that when I use the context menu it doesn't go through some of the code. I have tried to call on the functions directly but it doesn't format correctly.
I am mainly concerned with the edit button, here is the code I am using to bring up the edit Dialog
function editRow() {
var grid = jQuery("#<%= Jqgrid1.ClientID %>");
var rowKey = grid.getGridParam("selrow");
if (rowKey) {
// I have tried calling functions here and it still doesn't work
grid.editGridRow(rowKey, grid.editDialogOptions);
}
else {
alert("No rows are selected");
}
}
So if I use this to display the editform it isn't formatted correctly nor does it go through the functions all correctly.
I am using the ASP Webforms version of Jqgrid so I call the function by doing this
<cc1:JQGrid1 ID="Jqgrid1
//other attributes
ClientSideEvents-BeforeEditDialogShown="ChangeMonitor"
//Rest of code />
So this works just fine, and I'm trying to get the Edit button on the context menu to display correctly.
My thought was to use Jquery to trigger a click on the actual Edit button once someone used the context menu. I couldn't find an ID that would work however.
Is there an easy way to connect my context menu Edit button, with the actual Edit button in the toolbar?
Well I found a solution to my problem.
The id field of the button was edit_ct100_cpMainContent_Jqgrid1_top so I just triggered a click with this code.
$("td[id^=edit][id$=top]").trigger("click")
For some reason when I used the _ct100_cpMainContent_Jqgrid1 it wasn't working, but now it does. Hope this helps someone.