I have added a container div around the slickgrid (the container has a heading etc just to make it all look neat and tidy).
I have made the div resizable using jquery and instructed it to resize the grid and viewport simultaneously.
It works wonderfully (everything resizes in unison) but the number of visible rows does not update until I scroll.
Is there a way to force the viewport to refresh?? grid.render does not work.
$(".container").resizable({
alsoResize: ".grid, .slick-viewport",
resize: function (event, ui) { }
});
$(".container").on("resize", function (event, ui) {
dataView.refresh();
grid.render();
});
In case anybody has the same problem, the answer is grid.resizeCanvas();
The code now looks like this:
$('.container').each(function () { // I have several grids + containers
var gridID = $(this).attr('id'); // get the container ID
$(this).resizable({
// for some reason, there was a problem with $(this) - I had to use
// an explicit reference by passing the container ID
alsoResize: '#' + gridID + ' .grid, #' + gridID + ' .slick-viewport',
resize: function (event, ui) { }
});
$('.container').on('resize', function (event, ui) {
grid.resizeCanvas()
});
}
You might also want to look at an answer I gave for an auto grid resize, it's auto-resizing with the viewport and so changing the size of your browser will be reflected on the grid size...
See it here: Slickgrid: Final column auto size to use all remaining space
Related
I am using free jqgrid 4.14. I am having a problem with the vertical scrollbar in the tree grid.
I have defined a height for the tree grid. Now when the grids loads and I try to expand it this happens.
But as soon as I am resizing the window the scrollbar width is not taken from last column width instead it has it own. See
So, I thought of making load vertical scrollbar at start
.ui-jqgrid .ui-jqgrid-bdiv { overflow-y: scroll }
but then also it is taking width from the column.
I am loading grid with these settings -
datatype: "jsonstring",
datastr: grid_data,
colNames: scopes.grid_header_column_value[grid_id],
colModel: scopes.gridcolumns[grid_id],
height: height,
viewrecords: is_pager_enable,
multiSort: true,
ignoreCase: true,
grouping: is_group_enable,
headertitles:true,
sortorder: sort_order,
sortable: false,
pager: "#" + pager_id,
treeGrid: true,
treeGridModel: 'adjacency',
treedatatype: "jsonstring",
ExpandColumn: 'name'
Also, I am applying these properties -
$("#" + grid_id).closest('.ui-jqgrid-bdiv').width($("#" + grid_id).closest('.ui-jqgrid-bdiv').width() + 1);
$(".ui-jqgrid-sortable").css('white-space', 'normal');
$(".ui-jqgrid-sortable").css('height', 'auto');
$(".ui-jqgrid tr.jqgrow td").css('white-space', 'normal');
$(".ui-jqgrid tr.jqgrow td").css('height', 'auto');
$("div.ui-jqgrid-sdiv").after($("div.ui-jqgrid-bdiv"));
I am also using jqGridAfterLoadComplete event so that on loading also it performs the same operation which it should perform in resizing from here
So, how can force the vertical scrollbar to take width from outside of grid.
Update: Added image after the solution
Here is the image which specifies exactly what I want.
Here the scrollbar is not needed but still, it is initialized as empty without taking column width
Problem while resizing:
I am using jquery event when the window is resized so to resize the jqgrid according to the screen but here the problem is if I resize the window to smaller screen and expand the tree grid, scrollbar comes.
The code is for resizing is like this -
$(window).bind('resize', function () {
resizeGrid.call($('#' + grid_id));
});
resizeGrid = function () {
var newWidth = $(this).closest(".ui-jqgrid").parent().width();
$(this).jqGrid("setGridWidth", newWidth, true);
};
Like this -
here the scrollbar have extra space and it is coming outside the given space.
Also, now if I resize window to full size and collapse all the rows the empty is there for the scrollbar.
It looks like this -
Try to add the callback treeGridAfterExpandRow with the following code:
treeGridAfterExpandRow: function () {
this.fixScrollOffsetAndhBoxPadding();
}
I'm not sure that I exactly understand, which behavior you need to have. Probably the usage of two callbacks treeGridAfterExpandRow and treeGridAfterCollapseRow
treeGridAfterExpandRow: normalizeWidth,
treeGridAfterCollapseRow: normalizeWidth
with normalizeWidth defined as
var normalizeWidth = function () {
var $self = $(this), p = $self.jqGrid("getGridParam");
this.fixScrollOffsetAndhBoxPadding();
if (!p.autowidth && (p.widthOrg === undefined || p.widthOrg === "auto" || p.widthOrg === "100%")) {
$self.jqGrid("setGridWidth", p.tblwidth + p.scrollOffset, false);
}
};
will more close to your requirements. The above code extend the width of the TreeGrid to the width of the scroll bar if the vertical scroll bar will be visible.
I am working with jsPlumb and am trying to create a simple toolbox of 2 elements. These elements need to be dragged and dropped onto the canvas where further action such as creating connections in between them and deleting them can be performed. But for now, I've been able to accept 2 div under the droppable method. Depending on the accepted div, the class to be added and the fields to be appended to the element change. The working version of the following code: https://github.com/NayantaraJeyaraj/MultipleElements
$(".project").draggable
({
helper : 'clone',
cursor : 'pointer',
tolerance : 'fit',
revert : true
});
$(".query").draggable
({
helper : 'clone',
cursor : 'pointer',
tolerance : 'fit',
revert : true
});
And the droppable method:
$("#container").droppable
({
accept: '.project, .query',
containment: 'container',
drop: function (e, ui) {
droppedElement = ui.helper.clone();
ui.helper.remove();
$(droppedElement).removeAttr("class");
jsPlumb.repaint(ui.helper);
var newAgent = $('<div>').attr('id', 'pro' + i).addClass('pro');
newAgent.text('Element ' + i);
$(droppedElement).draggable({containment: "container"});
$('#container').append(newAgent);
jsPlumb.draggable(newAgent, {
containment: 'parent'
});
newAgent.dblclick(function(e) {
jsPlumb.detachAllConnections(newAgent.attr('id'));
jsPlumb.removeAllEndpoints($(this));
jsPlumb.detach($(this));
$(newAgent).remove();
});
i++;
}
});
What I need this piece of code to do is, to add the "pro" class to the newAgent( as shown in the code) when the accepted div is '.project' else if the accepted div is '.query' it needs to add the "que" class instead of the pro class. But here, currently it adds the pro class for both instances. How ca I detect which is being accepted and then add the class accordingly?
I worked a long with jsplumb for my project and i think you can take a look at this codepen :-
http://codepen.io/soniabhishek/pen/XjNYGp?editors=1010
//This is specific function when drop occurs
jsPlumb.draggable(c1_1,{
stop: function(params){
console.log("dropped", params)
}
});
Here i have some basic example of drag drop, multi select, as well as group concepts.
And in particular look for stop function which you particularly looking for.
Thanks.
I'm resizing a div with jQuery resizable and I only want to resize its height.
I managed to only resize while dragging bottom helper :
$('div').resizable({
handles: 's',
});
But if I hold shift key, width is changing.
See http://jsfiddle.net/6p20qjmr/3/
How can I disable this behavior?
Edit: The div container width may change after initial resizable call.
$(function() {
var $elt = $(".resize");
var width = $elt.width();
$elt.resizable({
handles: 's',
maxWidth: width,
minWidth: width
});
});
This may not be the best solution, but I am not super familiar with JQuery UI's resizable functionality. I'm not even sure why holding shift changes the functionality. If you could explain that, I may be able to provide a better solution that seems less hacky.
Fiddle: http://jsfiddle.net/6p20qjmr/
I find a way to achieve what I want using resize parameter and reseting width after every resize event:
$(".resize").resizable({
handles: 's',
resize: function() {
$(this).css('width', '');
}
});
See http://jsfiddle.net/6p20qjmr/4/
var $el = $('.resize').resizable({});
var resizable = $el.data('ui-resizable');
var old_mouse_drag = resizable._mouseDrag;
resizable._mouseDrag = function(e) {
e.shiftKey = false;
return old_mouse_drag.call(this, e);
};
Try: http://jsfiddle.net/e1wagrh9/
Some of my webpages contain several text elements that expand and collapse with a jQuery "accordion" effect:
function show_panel(num) {
jQuery('div.panel').hide();
jQuery('#a' + num).slideToggle("slow");
}
function hide_panel(num) {
jQuery('div.panel').show();
jQuery('#a' + num).slideToggle("slow");
}
This causes the window size to change so jScrollPane has to be reinitialized, which will also change the length of the scrollbar. To achieve a smooth length adjustment of the scrollbar, I set the "autoReinitialise" option to "true" and the "autoReinitialiseDelay" to "40" ms:
$(document).ready(function () {
var win = $(window);
// Full body scroll
var isResizing = false;
win.bind(
'resize',
function () {
if (!isResizing) {
isResizing = true;
var container = $('#content');
// Temporarily make the container tiny so it doesn't influence the
// calculation of the size of the document
container.css({
'width': 1,
'height': 1
});
// Now make it the size of the window...
container.css({
'width': win.width(),
'height': win.height()
});
isResizing = false;
container.jScrollPane({
showArrows: false,
autoReinitialise: true,
autoReinitialiseDelay: 40
});
}
}).trigger('resize');
// Workaround for known Opera issue which breaks demo (see
// http://jscrollpane.kelvinluck.com/known_issues.html#opera-scrollbar )
$('body').css('overflow', 'hidden');
// IE calculates the width incorrectly first time round (it
// doesn't count the space used by the native scrollbar) so
// we re-trigger if necessary.
if ($('#content').width() != win.width()) {
win.trigger('resize');
}
});
The effect is ok, but on the cost of a very high CPU usage which makes my fan go wild.
This is a jsfiddle which shows the settings and the effect: http://jsfiddle.net/VVxVz/
Here's an example page (in fact it's an iframe within the webpage shown): http://www.sicily-cottage.net/zagaraenausfluege.htm
Is there a possibility to achieve the same "smooth" transition of the scrollbar length without using the "autoReinitialise" option, maybe with an additional script, some modification of the jscrollpane.js, or simply a css animation of the scrollbar and then calling the reinitialise manually?
I'm absolutely useless at javascript so any help would be greatly appreciated.
There is no need to initialise jScrollPane on your content everytime window is resized. You should do it only once - on $(document).ready(). Also, there is no need in using autoReinitialize if your content is staic. You should reinitialise jScrollPane to update scrollbar size only when you slideUp/slideDown one of your container or on window.resize. So, code become less and more beautiful :)
function togglePanel(num) {
var jsp = $('#content').data('jsp');
jQuery('#a' + num).slideToggle({
"duration": "slow",
"step": function(){
jsp.reinitialise();
}
});
return false;
}
$(document).ready(function () {
var container = $('#content').jScrollPane({
showArrows: false,
autoReinitialise: false
});
var jsp = container.data('jsp');
$(window).on('resize', function(){
jsp.reinitialise();
});
// Workaround for known Opera issue which breaks demo (see
// http://jscrollpane.kelvinluck.com/known_issues.html#opera-scrollbar )
$('body').css('overflow', 'hidden');
// IE calculates the width incorrectly first time round (it
// doesn't count the space used by the native scrollbar) so
// we re-trigger if necessary.
if (container.width() != $(window).width()) {
jsp.reinitialise();
}
});
I have 3 columns that are resizable. When one is made wider, the one to it's left is made smaller. Essentially there are only 2 handles. Left col and Mid col. So when Mid col is made thinner, Right col expands accordingly. All three of them are contained with a 900px parent div, so the sum of all three is always 900. They have max and min widths set statically.
My issue is that if you take the left handle and move it all the way to the right you're still able to use the right handle and expand the mid col past the edge of the parent div.
I thought of a way to solve that issue by writing up a function that checks the widths of the columns and then subtracts left and right columns from the parent div width, I called it mWid. This leaves me with the number I want to set as the maxWidth for Mid col.
Now the issue is that mWid is not gettings updated for here "maxWidth: mWid"
Here is what the function for the right handle looks like:
$(function() {
$("#midResizable").resizable({
handles: 'e',
containment: '#container',
maxWidth: mWid, // gets set once, but doesn't update! WHY?
minWidth: 195,
resize: function(event, ui) {
contWidth = $('#container').width()
newWidth = $(this).width()
leftWidth = $('#leftResizable').width()
rightWidth = $('#rightResizable').width()
$("#rightResizable").css("width", (contWidth-15)-(newWidth)-(leftWidth)+"px");
checkWid()
}
});
});
function checkWid() {
rightWidth = $('#rightResizable').width()
leftWidth = $('#leftResizable').width()
contWidth = $('#container').width()
mWid = (contWidth-15)-(rightWidth)-(leftWidth)
}
Check this out: http://jqueryui.com/demos/resizable/#option-maxWidth
Looks like maxWidth: mWid, only gets called on init.
The maxWidth needs to be explicitly set after that, like this:
$( "#midResizable" ).resizable( "option", "maxWidth", mWid );
you can use the below code in start method of resizable. It will update the maxWidth and maxHeight dynamically whenever you try to resize the div element.
$('.droppedBtn').resizable({
.... //you resizable properties
start: function(event,ui)
{
$( ".CLASSNAME" ).resizable( "option", "maxWidth", layout.lWidth);
$( ".CLASSNAME" ).resizable( "option", "maxHeight", layout.lHeight);
},
stop: function(event,ui){
}
});