I am working on extJS grid column and I can resize my grid column. But I want my column won't be resize below the actual width. It mean I can not resize the width to left side.
How can I get this.
What I am trying here is ,
columnresize : function(ct,column,width,eOpts){
var actualColumn = this.myXmlDoc.getElementsByTagName('column');
var actualSize = actualColumn.width;
if(actualSize > width){
column.resizable = false;
}
}
But in this case column is resizing and then no option for resizable.
I just want it won't resize below the actual length.
Thanks in advance.
Use minWidth:
The minimum value in pixels which this Component will set its width
to.
Related
Is there any option to use gridstack.js with each grid-stack-item height based on inner content like image.
In my scenario each images having different height so it's not showing correctly on card.
It gives scrollbar inside grid-stack-item to view image, that is wrong.
Any option or workaround or other JS plugin/library that will restrict fixed height based on any factor.
Current behavior
Expected behavior
Height will be 100% based on width so image aspect ratio preserves.
I managed to do by setting up cellHeight : 10 then get image in resizestop event and update updateWidget.
Below is sample code for that resizestop event.
$('.grid-stack').on('resizestop', function (e, item) {
let stackItem = me.findGridStackItem(item.element.find('img').data('Id'));
if (stackItem) {
setTimeout(() => {
stackItem.option.height = Math.ceil(($(stackItem.nativeElement).find('img').height() + 5) / 10);
me.gridStackMain.updateWidget(stackItem);
}, 200);
}
});
the problem you are facing is about creating "masonry layout". I think gridstack is not the tool you need to use to resolve this problem. Try https://masonry.desandro.com/ or any other masonry layout lib.
I am using a div sliding thing, as you can see in this fiddle example
$(document).ready(function() {
$("#moving").click(function(){
$("#moving").toggleClass("left");
$("#right").toggleClass("right");
});
});
Here is the complexity that I am using:
I have 12 Right Side DIVS, they are all set display: none, except one.
On the moving DIV I have a list of links to other hidden DIVs. They are shown or hidden with show or hide jQuery function....
It all works with height set to 700px (so I can accomodate a lot of content)
How can I make the height automatic according to the content? If, let's say Div number 5 has more content and scroll is required... how can I expand it and show it?
I hope you guys can help me. Thank you very much in advance.
Using jQuery something like this will use the largest of the children's heights for all the children div's of #wrapper.
$(window).on('load', function () {
var maxHeight = 0;
jQuery("#wrapper > div").each(function () {
var thisHeight = jQuery(this).height();
maxHeight = thisHeight > maxHeight ? thisHeight : maxHeight;
}).height(maxHeight);
});
Added a sample here:
https://jsfiddle.net/mq2c2129/15/
http://dev.clickymedia.co.uk/rdicoursefinder/course-finder/
If you view the link, you will see that there are a number of filters acting at the same time. The overall height of the box is adjusted dependant on the amount of items showing by the filter plugin.
We then have a popup box when you click on each item. This also has a varying height, and pushes the next items down. We need the height of the container to adjust, taking into account the original height of the container before the item is clicked, and the popup box's height.
I have written some jQuery to do this, however, as you will see, each time it is adding the height of the blue popup box to the overall height again and again when you click the item to show the box, instead of once one is showing, adjusting the height of the container accordingly.
The jQuery I have used for the height is below:
var originalHeight = $('#filter-results').height();
var thisHeight = 70 + $('.resultsShowing').height();
var overallHeight = originalHeight + thisHeight;
$('#filter-results').height(overallHeight);
Any help would be much appreciated!
This line
var originalHeight = $('#filter-results').height();
will need to be outside your click() event, and should be done only once on $(document).ready()
This is because you're using the new height every time you're generating more height.
You need to move the originalHeight to one specific point, the first time you need it, and leave it alone there. Then, only thisHeight needs to get updated, and the result height should bet the former (static) + the latter (dynamic).
Remove this first of all
window.setInterval(function(){
///etc
}), 1);
It's killing my machine in Chrome.
if you want to know the blue element height before you display it, you should create it in memory:
var blueBox = $('<div />').html( ... );
var height = blueBox.height();
now you can add this height to the overall container and display blue element:
blueBox.appendTo('.overall');
ps. sorry about pseudo code
There are some ready JavaScript (jQuery) splitters, but they require panels height to be set. The problem is, that my website doesn't support fixed height, it just can't. Other thing is that this container can change it's height dynamicly, so I'd like to this splitter to adjust to the panels height.
Is there a script or a way to avoid that?
My idea was to set container's height the bigger panel's height, like:
var lheight = $("#LeftPanel").height();
var rheight = $("#RightPanel").height();
if(lheight > rheight){
$("#container").css("height", lheight+"px");
} else {
$("#container").css("height", rheight+"px");
}
but this doesn't seems to be a nice way for me.
Do you have any suggestions?
You can pass a new value to .height(), like this:
var h = Math.max($("#LeftPanel").height(), $("#RightPanel").height());
$("#container").height(h);
In this case we're just using Math.max() to get the taller one, and setting the height to that.
I want my jqGrid to shrink and expand based on the number of rows it has. Let say it currently has 10 rows, the height of the jqGrid will shrink to 10 rows (so that no gaping empty rows is exposed).
If however there are too many rows, the height of the grid will expand to a maximum 'height' value and a scroll bar will appear.
That's built into the grid. You set height to 100%. There's a demo on this page if you go "Advanced -> Resizing.
Try:
jQuery(".ui-jqgrid-bdiv").css('height', jQuery("#bigset").css('height'));
In the jQGrid callback function loadComplete. #bigset is the id for the table I used. This worked perfectly for me.
I have faced the similar problem and none of the solutions worked perfectly for me.
Some work but then there is no scrollbar.
So here is what I have done:
jQuery("#grid").jqGrid('setGridHeight', Math.min(300,parseInt(jQuery(".ui-jqgrid-btable").css('height'))));
This code has to be placed in the loadComplete handler and then it works fine.
The first parameter of the Math.min is the desired height when there is enough data to fill in the list. NOTE that this same value has to be set as height for the grid.
This script choses the minimum of the actual height and the desired height of the grid.
So if there are not enough rows the grid height is shrinked, otherwise we always have the same height!
call the below function from afterInsertRow and when deleting a row:
function adjustHeight(grid, maxHeight){
var height = grid.height();
if (height>maxHeight)height = maxHeight;
grid.setGridHeight(height);
}
Though the height 100% worked fine in the demo, it didn't work for me. The grid became much bigger, maybe it tried to occupy the parent div's height. Amit's solution worked perfectly for me, thanks! (I'm new as a contributor here, and so need a higher 'reputation' to mark any votes up :) )
Here is a generic method I came up with based on Amit's solution. It will allow you to specify the max number of rows to display. It uses the grid's header height to calculate max height. It may need tweeking if your rows aren't the same height as your header. Hope it helps.
function resizeGridHeight(grid, maxRows) {
// this method will resize a grid's height based on the number of elements in the grid
// example method call: resizeGridHeight($("#XYZ"), 5)
// where XYZ is the id of the grid's table element
// DISCLAIMER: this method is not heavily tested, YMMV
// gview_XYZ is a div that contains the header and body divs
var gviewSelector = '#gview_' + grid.attr('id');
var headerSelector = gviewSelector + ' .ui-jqgrid-hdiv';
var bodySelector = gviewSelector + ' .ui-jqgrid-bdiv';
// use the header's height as a base for calculating the max height of the body
var headerHeight = parseInt($(headerSelector).css('height'));
var maxHeight = maxRows * headerHeight;
// grid.css('height') is updated by jqGrid whenever rows are added to the grid
var gridHeight = parseInt(grid.css('height'));
var height = Math.min(gridHeight, maxHeight);
$(bodySelector).css('height', height);
}
Add below code inside loadComplete function
var ids = grid.jqGrid('getDataIDs');
//setting height for grid to display 15 rows at a time
if (ids.length > 15) {
var rowHeight = $("#"+gridId +" tr").eq(1).height();
$("#"+gridId).jqGrid('setGridHeight', rowHeight * 15 , true);
} else {
//if rows are less than 15 then setting height to 100%
$("#"+gridId).jqGrid('setGridHeight', "100%", true);
}