0

on fiddle fiddle code a jqpivot shows sales data of cars. Following problem could be a css issue or a configuration issue. When i ran the same code in IE with the size of height of grid set to 100. 

{
    iconSet: "fontAwesome",
    cmTemplate: { autoResizable: true, width: 75 },
    shrinkToFit: false,
    useUnformattedDataForCellAttr: false,
    autoResizing: { compact: true },
    groupingView: {
        groupField: ["x0"],
        groupColumnShow: [false],
        groupText: ["<span class='group-text'>{0}</span>"]
    },
    width: 600,
    height:100,
    toolbar: [true, "top"],
    pager: true,
    rowNum: 7,
    threeStateSort: true,
    sortname:['x1'],
    caption: "<b>Car sales statistics</b>",
    rowList: [5,7, 10, 20, 100, "10000:All"]
});

As shown on the image below, when the user scrolls down and stops at a point and clicks on row the highlighter shows that the row is not in one line instead there is a visual split. visual split. with a large dataset this is very visible to the naked eye on IE. How do i fix this issue?

Oleg
  • 220,925
  • 34
  • 403
  • 798
Dore.Ad
  • 163
  • 2
  • 10

1 Answers1

1

I can't reproduce the problem in IE, but I'd recommend you to add

$grid.trigger("jqGridResizeStop.setFrozenColumns");

in your code to force recalculation of the height and the position of all elements of frozen divs. See https://jsfiddle.net/OlegKi/rkxutxuv/7/ as an example.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • this issue is IE issue here's the proof refer to this youtube video https://youtu.be/G3EJDSMLHB8 its a IE's zoomer issue. Typically IE shows a breaking effect of rows when scrolling down. If i zoom in then scroll the issue i stated above is very visible. but once i zoom in i must reload the page to stop the alignment issue. However i have added the recommended code by you thanks : ) – Dore.Ad Jan 08 '17 at 01:56
  • 1
    @Dore.Ad: One should add *resize* event handler to detect zoom. See http://stackoverflow.com/a/25036623/315935, http://stackoverflow.com/a/14517805/315935 and so on. One use `$(window).bind("resize", function () {...}).triggerHandler("resize");` and call `setGridWidth` inside of `resize` handler. One will don't need to reload the page. – Oleg Jan 08 '17 at 02:02
  • at the moment i'm testing on chrome and IE now the problem is solved but there is still one visible issue with IE browser and i don't see this on chrome, when i vertically scroll the records the lines breaks for a second and then realigns. Is this a IE bug? – Dore.Ad Jan 08 '17 at 03:17