We Keep Coding

jqgrid autowidth and shrinkToFit not fitting exaclty

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);
}

"Floating" Gridview Header

Is there a way in ASP.NET to have a "floating" header, much like a header you would see in an Excel sheet that follows you down the page as you scroll?
Or alternatively, an easier route may be to have the header appear after every line, for example:
Header 1 | Header 2 | Header 3
val 1 | val 2 | val 3
Header 1 | Header 2 | Header 3
val 4 | val 5 | val 6
Can either of the above options be done? I get the feeling either route is going to take some javascript wizardry.

I was in the same boat like for one of my previous projects as the requirement was to freeze the header and some of the columns for easy scrolling. I used to try out all the recommendations out there in internet using css expression and javascript solutions but it always breaks in one or the other browsers and it was never complete until I came across a nice plugin that does the job pretty good.
Link to GridViewScroll Demo and the github's link
Here is how I used it in my application and it works flawlessly.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="gridviewScroll.min.js"></script>
<link href="GridviewScroll.css" rel="stylesheet" />
function pageLoad(sender, args) {
gridviewScroll ();
}
function gridviewScroll() {
gridView1 = $('#GridView1').gridviewScroll({
width: 915,
height: 449,
railcolor: "#F0F0F0",
barcolor: "#CDCDCD",
barhovercolor: "#606060",
bgcolor: "#F0F0F0",
freezesize: 5,
arrowsize: 30,
varrowtopimg: "../../../images/arrowvt.png",
varrowbottomimg: "../../../images/arrowvb.png",
harrowleftimg: "../../../images/arrowhl.png",
harrowrightimg: "../../../images/arrowhr.png",
headerrowcount: 1,
onScrollVertical: function (delta) {
// store the scroll offset outside of this function in a hidden field and restore if you want to maintain vertical scroll position
},
onScrollHorizontal: function (delta) {
//store the scroll offset outside of this function in a hidden field and restore if you want to maintain horizontal scroll position
}
});
}

Try the following (asp.net forums):
1. Add locked Css:
td.locked, th.locked {
position:relative;
left:expression((this.parentElement.parentElement.parentElement.parentElement.scrollLeft-2)+'px');
}
2. In RowDataBound event add css to GridView cell:
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Cells[0].CssClass = "locked";
}
}

A pure css based solution can break in some browsers. For that you must make use of some javascript too.
The condensed version of the most favored approach is to clone the original table. Put both tables (hereafter referred to as table1 and table2) inside div containers. The div containers will overlap a bit, and most importantly clip stuff we do not need to show. And the two divs will be stacked (siblings). The first div will contain table1 and its viewable area will be resized to only show the table1 header row. Its scrollbars will also be hidden. table2 will be placed inside the 2nd div with sufficient -ve margin so that its header is not visible to the user. Further more we have to take care of events incase we want to scroll horizontally.
Ps: Will show some code once I have time...

Slickgrid force columns to fit viewport size when enablecolumnorder equals false and resizable equals false?

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

Extjs / Javascript: How to put images vertically - aligned with other fields (textboxes,combos) in a multiple line panel with hbox layout?

How can I arrange some images in a panel with 'hbox' layout and in the same time, keep them aligned with the other fields in the form ?
Common form fields in ExtJs have a margin-bottom of 5px and a height of 22px, so the only way I can think right now is to put the image considering this field defaults. The problem comes when i have multiple lines in my panel, in Internet Explorer especially.
Basically, I want my form to look like this:
What I tried so far (first I created the image directly, not as an item in a container --> the same result):
createImageItem: function(config)
{
return Ext.create('Ext.container.Container', { width: 16, height: 22,
items: [{ xtype: 'image', padding: 3, src: 'resources/images/arrowLeft.png'}],
margin: '0 5 5 5'
});
}
In Chrome looks fine, but in IE the images go up with 1px every row. I don't know why.
Is there any other way to do this? I would be perfect to be a nicer way and don't bother about the pixels and calculations.
Thank you!
I am using ExtJs version 4.0.7

You could use the Ext.isIE property to set the dimensions based on the browser, for example:
margin: Ext.isIE ? '0 5 6 5' : '0 5 5 5' //or whatever the appropriate values are
You'll still have to worry about counting pixels, but at least it will look the same in both browsers.

how to remove vertical scroller

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");