I have created a page which loads many grids into the page when the page loads. The idea is that all the grids need to adjust the width to fit the width of the page when the page loads. This works perfectly for the 1 grid that is visible when the page loads, using these options:
shrinkToFit: true,
autowidth: true,
Notice that the columns fit perfectly, and no horizontal scroll bar shows up. All the other grids that load in hidden areas of the screen, using the same options above, do not load correctly:
I tried to fix this issue by using a method to manually set the width, using the setGridWidth, setting the width of the hidden grids to the width of the 1st grid, which is the right width. Using this method, the width of the hidden grid is correct, but then the shrinkToFit option is not setting the width of the columns correctly, see here:
While the grid looks almost correct, you can see the column widths do not fit correctly so the horizontal scroll bar shows up. This becomes an even bigger problem when I get the grid which loads many subgrids. It becomes a mess:
The horizontal scroll bars take up too much space, and I wish the shrinkToFit would work correctly, it would be really neat and clean.
I hope I explained the problem well enough, does anyone know how I can get the shrinkToFit option to work correctly even for these grids which get loaded in hidden areas of the page? Thanks!
EDIT
Here is the code for the definition of the subgrids. You can see I use setGridWidth at the end:
...
subGrid: true,
subGridOptions: {
"plusicon" : "ui-icon-triangle-1-e",
"minusicon" : "ui-icon-triangle-1-s",
"openicon" : "ui-icon-arrowreturn-1-e",
// load the subgrid data only once
// and the just show/hide
"reloadOnExpand" : true,
// select the row when the expand column is clicked
"selectOnExpand" : true
},
subGridRowExpanded: function(subgrid_id, row_id) {
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id+"_t";
var po_num = jQuery('#po_list').jqGrid ('getCell', row_id, 'po_num');
$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table></div>");
jQuery("#"+subgrid_table_id).jqGrid({
url:"/phpAJAX/Master/master_grid_v1.php",
datatype: "xml",
shrinkToFit: true,
autowidth: true,
mtype: 'POST',
postData:{
arg1:'pos',
po_num:po_num
},
colNames:[
'Row ID',
...
],
colModel:[
{width:20,name:'row_id', index:'row_id',editable:false,hidden:true},
...
],
loadonce:true,
pager: pager_id,
sortname: 'row_id',
sortorder: "asc",
height: '100%'
}).setGridWidth($("#inv_list").width()*.95);
}
Related
I want to specify a minimum height for each ag-grid row to 40px and allow for dynamic height for any row that exceeds 40px.
this.gridOptions = {
/* rowHeight : 40, */
headerHeight: 100,
pagination: true,
enableSorting: true,
enableColResize: true,
rowDeselection: true,
suppressHorizontalScroll: false,
autoHeight: true
};
gridOptions.autoHeight let's me dynamically change the height, but assigning something like gridOptions.rowHeight or using the getRowHeight(params) to set a default minimum height overrides the autoHeight.
Is there a way to resolve this?
Managed to resolve this issue, posting the answer here for anyone else who may have the same problem:
There were a few things I needed to change:
I was using a version (13.1.2) of ag-grid that didn't seem to be supporting the autoHeight feature. Updated ag-grid to version 18.1.2 and ag-grid-vue to 18.1.0 (I am using a Vue.js framework).
I was using autoHeight option incorrectly. I needed to use autoHeight: true; while configuring each column that determined the height of a row, rather than in gridOptions.
These steps adjusted the height of the rows based on the content.
Adding rowHeight: 40px; in gridOptions, set a minimum height for the rows after the autoHeight was applied.
How to force chart to show left flag?
http://jsfiddle.net/25hBZ/
$('#container').highcharts('StockChart',{
series: [
{data: [[1397760750356,1],[1401353540540,10],[1401455794172,100]], type: 'spline'},
{"name":"ELOXATIN","data":[[1397760750356,15],[1401455794172,15]],"type":"spline","id":"dataseries_17328","enableMouseTracking":false},
{"type":"flags","data":[{"x":1397760750356,"title":"A","text":"something"},{"x":1401455794172,"title":"B","text":"something"}],"onSeries":"dataseries_17328","shape":"squarepin"}
]
});
http://monosnap.com/image/3vs327Xw0A62ktOAENBJDc2O7jmCqr
I've tried with setting extremes, maxPadding, minPadding and nothing. The problem is only for flags on edges.
Any ideas?
The only workaround I can see is add an additional "null" in the "data" attribute.
{data: [[null,null],[1397760750356,1],[1401353540540,10],[1401455794172,100]], type: 'spline'},
Once you click on YTD or 1y, the items show up just fine except the navigation at the bottom can scroll left.
Added the following based on your comment:
xAxis: {
min: 1390000000000
},
That will ensure that you are properly zoomed in from the correct position. Though keep in mind, if your data is dynamic, you would need to round it somehow so it would be displayed.
I have read a lot of stuff on this, but dint find any luck!
Problem :
I am using datatables to achieve sorting on a table. On UI I have four tabs, each having one table. Now everything works fine until I use the "sScrollY" property. As soon as I set some value to this, by default width of my 'thead' is changing from 100% to 100px. ('tbody' part of the table is rendered just the same way.) If I click on one of the 'th's ,which results in a table redraw call(fnDraw) internally, adjusts thead's width properly.
Please help me getting rid of this.
Solutions I have tried:
setting table-layout: fixed; i have applied this style to all my tables
setting overflow auto to the wrapper div that wraps 'thead' in case of "sScrollY"; tried this and it dint work
call fnDraw on click of the tab; tried this, used the fn DrawCallback to confirm that draw method is called, but it dint rectify the thead's alignment.
call fnColumnResizing() ; this only works of I put it inside window.resize() and then resize the window manually.
set sWidth property while init-ing the datatables; this dint work either!
Code:
code I am using to init datatables is :
oTable = $('#dataTableId').dataTable( {
"sDom": "t",
"sScrollY": getDivHeight(), //getDivHeight() returns a string val eg. 300px
"bPaginate": false,
"bDeferRender": true,
"asStripeClasses": ['test', 'test'],
"bAutoWidth": false,
"aaSorting": [[0,'desc']],
"aoColumnDefs": [
{ "bSortable": true,"aTargets": [ 0 ]},
{ "bSortable": true,"aTargets": [ 1 ]},
{ "bSortable": true,"aTargets": [ 2 ]},
{ "bSortable": false,"aTargets": [ 4 ]},
{ "bSortable": true,"aTargets": [ 4 ]},
{ "bSortable": false,"aTargets": [ 5 ]}
],
"aoColumns": [null,null,null,{ "iDataSort": 4 },null,null,null]
} );
Thanks and Happy Coding!
When setting the sScrollY property, the following function gets called (sY = sScrollY)
/**
* Adjust a table's width to take account of scrolling
* #param {object} oSettings dataTables settings object
* #param {node} n table node
* #memberof DataTable#oApi
*/
function _fnScrollingWidthAdjust ( oSettings, n )
{
if ( oSettings.oScroll.sX === "" && oSettings.oScroll.sY !== "" )
{
/* When y-scrolling only, we want to remove the width of the scroll bar so the table
* + scroll bar will fit into the area avaialble.
*/
var iOrigWidth = $(n).width();
n.style.width = _fnStringToCss( $(n).outerWidth()-oSettings.oScroll.iBarWidth );
}
else if ( oSettings.oScroll.sX !== "" )
{
/* When x-scrolling both ways, fix the table at it's current size, without adjusting */
n.style.width = _fnStringToCss( $(n).outerWidth() );
}
}
I suspect that the .width() and outerWidth() are not working as intended for one of the following reasons:
functions are being called before the $(window).load event is fired. The solution to this would be to wrap the function inside a $(window).load(), instead of a $(document).ready()
You mentioned that you have several tabs with tables. If this is only happening on the tables that are in tabs which are initially hidden, its because some of the width commands don't work for hidden elements (display: none). See this example http://jsfiddle.net/XLET8/
The classic solution is to position the element off the screen, check the width, then hide it and put it back. (You can probably find a jquery plugin that will do that in one command.)
Alternatively, you can initialize the datatable when opening the tab. -- or by having a button which loads it manually. (I don't think that fnDraw calls the function shown above -- so the original -- incorrect width would still be loaded in the datatable config)
EDIT
I just came across this link which describes how to deal with datatables inside tabs.
I have created numerous slickgrids, but this is the first one that I am creating that I need to have the columns not be resizable and reorderable (draggable). What I really need is for my columns to fit my viewport at all times but not be resizable/reorderable, and not extend horizontally during a screen resize (increase or decrease).
I have found that if I put this into the column options. :'
resizable: false
This will stop them from being resized but upon doing this it resizes my columns on page load to width I specified per column. Which is normally what I would want, but I have a specific width of 1300px for my viewport. So, if I set my pixels just right the grid will behave nicely in the viewport and look great. However, this application that I am working on requires the ability to minimize or maximize the screen, upon doing so my columns which are now set to a specific width remain that width and a horizontal scrollbar appears pushing my columns past the 1300px range.
If I remove column widths and keep forcefitcolumns and then my columns are really tiny and it just looks terrible.
Example of one of my columns. :
{ id: "Mode", name: "Mode", field: "Mode", width: 125, sortable: true, formatter: TaskNameFormatter, editor: Slick.Editors.Text, resizable: false },
Example of my grid options. :
var GridOptions = {
showHeaderRow: true,
showHeaderRow: true,
headerRowHeight: 30,
explicitInitialization: true,
enableCellNavigation: true,
enableTextSelectionOnCells: true,
forceFitColumns: true,
multiColumnSort: true,
topPanelHeight: 25,
autoHeight: true,
enableColumnReorder: false
};
Example of my grid div. :
<div id="slickGrid" class="grid-body" style="min-width: 800px; max-width: 1300px; height: auto;"></div>
And obviously I have the grid resize. :
$(window).resize(function () {
Grid.resizeCanvas();
});
I am just wondering how you handle this situation, basically I need my columns to fill the viewport horizontally and maintain that size even during a window resize. Thoughts? Has anyone defeated this issue before? If I could just figure out how to dynamically keep my columns the appropriate size for the viewport I could call that again during a window resize.
***Note I have also tried the Grid.autosizeColumns and setting the min-width of each column and these do not work either.
https://github.com/mleibman/SlickGrid/issues/17
Found this seems to be doing the trick. :
You need to change the conditional for column resize attribute:
!c.resizable
to:
(!c.resizable && options.forceFitColumns !== true)
Per user tobiasstrebitzer
I am trying to avoid the vertical scroll bar for my splitter.
I am using kendo UI splitter with two panes,
In the first pane I have grid.
depending upon the selected record in the grid my right side content height varying.
i am trying to set that varying height to the splitter.
I googled to get the right pane content height,but I am not able to get the exact height properly.
var height = $('#splitter').prop('scrollHeight');
$('#splitter').height(height);
$("#splitter").css({ height: height })
I put this code in change event of grid,but it is not worked out for me.
I have defined splitter like
var splitter = $("#splitter").kendoSplitter({
panes: [
{ collapsible: true, size: "48%" },
{ collapsible: false, size: "52%" }],
orientation: "horizontal"
]
});
can any one tell me how to do this.
In CSS (apply to the appropriate class):
overflow-y:hidden; - Use this for hiding the Vertical scroll
Another way (trigger this whenever you want)
$("#splitter").css("overflow", "hidden");