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.
Related
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.
Am using the free jqgrid , to keep it short, am getting method not found on fixScrollOffsetAndhBoxPadding when I try to set the height of the jqgrid via the below code in beforeProcessing().
$grid.setGridHeight(200).trigger("reloadGrid");
The reason I need to set the height is, when rownNum is <10, i want height as auto. but wen the rowNum is >10, i need the grid to have a vertical scrollbar. But when setting this height, I get to see the javascript error which says, fixScrollOffsetAndhBoxPadding is not an object or property.
error:
SCRIPT438: Object doesn't support property or method 'fixScrollOffsetAndhBoxPadding'
jquery.jqgrid.min.js, line 202 character 381
I think that the origin of your problem could be wrong usage of setGridHeight or the usage of setGridHeight before you created the grid in $grid (for example $grid can be wrong and you should use $(this) instead). You didn't posted where in your code you use the lines. Free jqGrid set fixScrollOffsetAndhBoxPadding property of $grid[0] during creating of the grid (before onInitGrid is called).
One more important remark: you should be always very carefully in the usage of reloadGrid inside of other callbacks. You should understand the reloadGrid works synchronously. It means that the next line after reloadGrid will be executed after trigger("reloadGrid") is finished. For example you loads the 5-th page returned from the server. The call of trigger("reloadGrid") will reset page parameter of jqGrid, it can change datatype, place new Ajax request and so on. So I strictly recommend to use trigger("reloadGrid") only inside of setTimeout. In the way you can allow jqGrid to process the current request till the end and later make reloading:
$grid.setGridHeight(200);
setTimeout(function () {
$grid.trigger("reloadGrid");
}, 50);
It the above will not help then you should 1) use jquery.jqgrid.src.js instead of jquery.jqgrid.min.js to report the error; 2) write which version of free jqGrid you use (4.9.1, 4.9 or the current code from GitHub); 3) post more full example which can be used to reproduce the problem. One can easy localize the origin of the problem by debugging of the code, but one have to guess about the reason if one see only one line of code (or some small code fragment).
Does anyone know how to catch the 'scroll' event in CKEDITOR? there is easy to identify change and other events, but I am unable to cathc Scroll event..
CKEDITOR.instances[i].on('change', function() {alert('text changed!');});
but when want to use same for scroll it does not working
CKEDITOR.instances[i].on('scroll', function() {alert('I am scrolling!');});
does anyone know some workaround?
Thx a lot
M
First thing you need to know is that CKEditor's instance (which you get from CKEDITOR.instances object) is not a DOM element. It indeed fires some events like change, focus, blur, or save, but they are just short cuts or facades to more complex things.
Therefore, if you want to add a DOM event listener, then you need to retrieve the "editable" element (an element in which editing happens). It can be accessed by the editor.editable() method. However, the tricky thing about editable element is that it's not always available, it's not ready right after starting editor initialization and that editor may replace this element with a new one (usually after switching between modes). Therefore, editor fires a contentDom to notify that the new editable is available and the editable has an attachListener method which, unlike the on cleans the listener when editable is destroyed.
The way to use all those methods is explained in the documentation and there are code samples, but just to save you one click:
editor.on( 'contentDom', function() {
var editable = editor.editable();
editable.attachListener( editable.getDocument(), 'scroll', function() {
console.log( 'Editable has been scrolled' );
});
});
Update: I forgot that for 'scroll' event you have to listen on document. I updated the code above.
I am using the following directive to create a ckEditor view. There are other lines to the directive to save the data but these are not included as saving always works for me.
app.directive('ckEditor', [function () {
return {
require: '?ngModel',
link: function ($scope, elm, attr, ngModel) {
var ck = ck = CKEDITOR.replace(elm[0]);
ngModel.$render = function (value) {
ck.setData(ngModel.$modelValue);
setTimeout(function () {
ck.setData(ngModel.$modelValue);
}, 1000);
}; }
};
}])
The window appears but almost always the first time around it is empty. Then after clicking the [SOURCE] button to show the source and clicking it again the window is populated with data.
I'm very sure that the ck.setData works as I tried a ck.getData and then logged the output to the console. However it seems like ck.setData does not make the data visible at the start.
Is there some way to force the view window contents to appear?
You can call render on the model at any time and it will simply do whatever you've told it to do. In your case, calling ngModel.$render() will grab the $modelValue and pass it to ck.setData(). Angular will automatically call $render whenever it needs to during its digest cycle (i.e. whenever it notices that the model has been updated). However, I have noticed that there are times when Angular doesn't update properly, especially in instances where the $modelValue is set prior to the directive being compiled.
So, you can simply call ngModel.$render() when your modal object is set. The only problem with that is you have to have access to the ngModel object to do that, which you don't have in your controller. My suggestion would be to do the following:
In your controller:
$scope.editRow = function (row, entityType) {
$scope.modal.data = row;
$scope.modal.visible = true;
...
...
// trigger event after $scope.modal is set
$scope.$emit('modalObjectSet', $scope.modal); //passing $scope.modal is optional
}
In your directive:
ngModel.$render = function (value) {
ck.setData(ngModel.$modelValue);
};
scope.$on('modalObjectSet', function(e, modalData){
// force a call to render
ngModel.$render();
});
Its not a particularly clean solution, but it should allow you to call $render whenever you need to. I hope that helps.
UPDATE: (after your update)
I wasn't aware that your controllers were nested. This can get really icky in Angular, but I'll try to provide a few possible solutions (given that I'm not able to see all your code and project layout). Scope events (as noted here) are specific to the nesting of the scope and only emit events to child scopes. Because of that, I would suggest trying one of the three following solutions (listed in order of my personal preference):
1) Reorganize your code to have a cleaner layout (less nesting of controllers) so that your scopes are direct decendants (rather than sibling controllers).
2) I'm going to assume that 1) wasn't possible. Next I would try to use the $scope.$broadcast() function. The specs for that are listed here as well. The difference between $emit and $broadcast is that $emit only sends event to child $scopes, while $broadcast will send events to both parent and child scopes.
3) Forget using $scope events in angular and just use generic javascript events (using a framework such as jQuery or even just roll your own as in the example here)
There's a fairly simple answer to the question. I checked the DOM and found out the data was getting loaded in fact all of the time. However it was not displaying in the Chrome browser. So the problem is more of a display issue with ckEditor. Strange solution seems to be to do a resize of the ckEditor window which then makes the text visible.
This is a strange issue with ckeditor when your ckeditor is hidden by default. Trying to show the editor has a 30% chance of the editor being uneditable and the editor data is cleared. If you are trying to hide/show your editor, use a css trick like position:absolute;left-9999px; to hide the editor and just return it back by css. This way, the ckeditor is not being removed in the DOM but is just positioned elsewhere.
Use this java script code that is very simple and effective.Note editor1 is my textarea id
<script>
$(function () {
CKEDITOR.timestamp= new Date();
CKEDITOR.replace('editor1');
});
</script>
Second way In controller ,when your query is fetch data from database then use th
is code after .success(function().
$http.get(url).success(function(){
CKEDITOR.replace('editor1');
});
I know, that this thread is dead for a year, but I got the same problem and I found another (still ugly) solution to this problem:
instance.setData(html, function(){
instance.setData(html);
});
I have google chart on my page, but right now chart is drawn when Google Visualization library is loaded on the page load, and I have to give data dynamically through ajax, so is it possible to change the callback method, or is there any alternative?
I managed with it as i wanted, It can be helpful for someone, and if there is better solution for this please do suggest.
I removed this setOnLoadCallback function - google.setOnLoadCallback(drawChart);
This call back will call the drawChart() as soon as the visulization library is loaded,
(but I didn't wanted it, i wanted to call it on button click).
so I called drawChart(); function directily in the button click function code.
Then I faced problem with rendering the dynamic data to the datatable, when I was putting hard coded values, the chart drawn fine, but as I put variables instead of those values, it was unable to generate chart.
so i parsed the variable into integer by parseInt(doc_pre),
And it worked fine.
You can check this :
Jquery Charts