In jqGrid, how can I call a method after subGridRowColapsed completes? - javascript

I'm using jqGrid with subgrids and I'm looking for a way to call a method after I collapse a subgrid. Right now I have:
subGridRowColapsed: function (subgrid_id, row_id) {
position_slider();
}
My position_slider() method uses the grid height to reposition a slider element. The problem is that this is being called before the subgrid is actually collapsed, so the height of the grid has not yet been updated. How can I call this method after the subgrid is collapsed? I thought about using a short timeout, but that might not be reliable.
Thanks!

I found a solution. In the subGridRowColapsed, I trigger a reload of the grid and then in my gridComplete I call the function I wanted to be called after the subgrid was collapsed:
...
gridComplete: function () {
position_slider();
},
...
subGridRowColapsed: function (subgrid_id, row_id) {
$('#grid').trigger("reloadGrid");
}
...
Hopefully this helps anyone looking to do something similar.

Related

DataTable Fixed Header at page bottom (on first page load)

I have a DataTable with FixedHeader option that has the following initialization populated in my $(document).ready function. Both the headerOffset values that are jquery looked-up and hard-coded at 40 have been attempted, with the same results.
"fixedHeader": {
// "headerOffset": $("#top-navbar").outerHeight()
"headerOffset": 40
},
The DataTable is populated from an ajax call and has a series of my own render: functions on half of the columnDefs but I don't think that's related.
I'm not sure why, but the first time the page is loaded, the fixedHeader doesn't follow the top of the screen - but is sitting at the very bottom of the page below the table. When I click refresh - the header works just fine.
Any thoughts?
Thanks in advance.
I had the same problem, and in the absence of a satisfactory solution, my current workaround is to trigger a window resize event that will make the Datatable make rendering recalculations:
table.DataTable({
// ...
drawCallback: function() {
$(window).resize();
}
});

GridStack- Setting the static grids

I am trying to make the grids static. No movement at all.
I tried:
var options = {
staticGrid: true,
};
$('.grid-stack').gridstack(options);
and also this
var options = {
setStatic: true,
};
$('.grid-stack').gridstack(options);
and this
var options = {
staticGrid: true,
};
$('.grid-stack').gridstack(options);
$('.grid-stack').data('gridstack').setStatic(true);
None of them seems to work, I used this link for documentation.
They have also mentioned a method setStatic but there are no examples of usign this method.
According to the Gridstack docs the staticGrid:true parameter is correct if you want to initialise and define the grid as STATIC at startup (your first method).
The SetStatic(true) is a function you can call on for toggling this state programatically.
If you view the source code live you will see a new CSS class has been added to the grid wrapper DIV; a class called 'grid-stack-static'. The appearance of this class confirms the parameter option staticGrid:true has been accepted and actioned.
BUT as I found myself (with v0.30 of the library), grid widgets in my initialised grid are still resizable and movable. In my opinion this suggests a bug.
You can lock down movement and resizing at a widget item level by using the item attributes data-gs-no-resize="yes" and data-gs-no-move="yes".
Seems counterproductive to have to do this if you have said 'static' already.
I have lodged an issue on Github to query this behaviour.
BTW it has been suggested to call on and use the setStatic( true ) function after grid init; as a temporary fix for this bug. Which was your third method - AND this worked for me.
Only difference between your 3rd method and mine is the function is wrapped in a document.ready function (and I am using $=jquery shortcut for convenience/compatibility on my system).
Worked:
(function ($) {
// Shortcut $=jquery
$(document).ready(function () {
// start grid
$(function () {
var options = {
staticGrid:true
};
$('.grid-stack').gridstack(options);
$('.grid-stack').data('gridstack').setStatic( true );
});
// END DOC READY
});
// SHORTCUT FIX
})( jQuery );
Just set the attribute gs-static="true"on the grid-stack's parent Grid element (on which gridstack has been initialized).
<div class="grid-stack" gs-static="true">
<div class="grid-stack-item">
<div class="grid-stack-item-content">Item 1</div>
</div>
<!-- .. and so on -->
</div

Determine if DataTables is done in version 1.10. Is there a callback?

How can I determine if DataTables() is done rendering in version 1.10 and above? Is there a callback somewhere I can set to a function. I'd like to hide my table until DataTables is finished and then reveal it once it is done loading.
With version 1.10, I haven't come across a callback, and I think a lot of the old callbacks are now deprecated as their links redirect me to legacy.datatables.net
You can use init.dt event as follows:
$('#example').on('init.dt', function(e, settings, json){
console.log( 'Table initialisation complete: '+new Date().getTime() );
});
$('#example').dataTable();
From the manual:
init event is called when your table has fully been initialised, data loaded and drawn, particularly when using an ajax data source.
NOTES
If you're going to hide/show the table, you would need to use columns.adjust() API method to recalculate column widths once table becomes visible.
For example:
$('#example-container').hide();
$('#example').on('init.dt', function(e, settings, json){
$('#example-container').show();
$(this).DataTable().columns.adjust();
});
$('#example').dataTable();

isUndoAvailable and isRedoAvailable undefined in handsontable

This is first time I use the handsonTable. I am trying to have a menu button with items undo/redo outside the context menu of the handsontable, and to make those items enabled/disabled, I need to check if the undo and redo are available after the table is rendered. At my surprise, when I call the functions isUndoAvailable() and isUndoAvailable inside the afterRender handler (as stated in the documentation https://github.com/handsontable/handsontable/wiki/Methods ), it causes the undefined JS error.
Here's a jsfiddle example of what I'm trying to do :
var container = document.getElementById('example');
var hot = new Handsontable(container,
{
data: data,
minSpareRows: 1,
colHeaders: true,
contextMenu: true,
afterRender: function(isForced){
if(this.isUndoAvailable()){
// do something
}
}
});
Please have a look at this jsfiddle example. Am I doing something wrong ?
Thanks in advance.
It seems you have stumbled upon an edge case, in which the undo/redo plugin (seems) to load only after the afterRender callback.
hot.isUndoAvailable()
This works in other callbacks, at least a few I tried just now.
Here's an updated version of your fiddle, just call isUndoAvailable outside of the afterRender callback and it will work.

Sorting Before Event in jQuery jqGrid

I am working on jQuery's jqGrid and I am not using paging in my jqGrid. My code fetch more than 1000 rows data and all data shows in jqGrid without paging and use loadonce: true property. Now my requirement is that when user sort any column it takes 3-5 seconds to sorting data so i want to show at that time loading image. I wrote
beforeRequest: function () { jQuery(".imgLoading").show(0);},
gridComplete: function () {jQuery(".imgLoading").hide(0);}
these 2 events and it works fine when data comes with server and manipulating with server.
But I want to sorting on client side by using loadonce: true and want to show loading image also but I don't know on which event I will write down image show hide code.
Please tell me the name of BeforeSortEvent and AfterSortEvent of jqGrid.
I checked on this URL : http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events but didn't find right event.
Please help me out.....
Try:
onSortCol: function(index, iCol, sortorder) {
jQuery(".imgLoading").show(0);
},
gridComplete: function() {
jQuery(".imgLoading").hide(0);
}
EDIT
Since you said the alert() fires off, I'm thinking your problem is in the way you are showing/hiding those .imgLoading elements.
Try:
onSortCol: function(index, iCol, sortorder) {
alert("I'm about to SHOW the loading message");
$(".imgLoading").show();
},
gridComplete: function() {
alert("I'm about to HIDE the loading message");
$(".imgLoading").hide();
}
Be sure those two alert()'s fire off, and if they do, then something is still off with those .imgLoading elements you are trying to show/hide.

Categories

Resources