Search code examples
asp.netc#-4.0obout

Why the Text Header doesn't move when i scroll the grid?

i´m using Obout grid - Column Sets

There are two possibles scenarios.

1.- The Text Header moves when i scroll the grid and i set in the scrollingSetting the property NumberOfFixedColumns to 0 , here everything works fine.

enter image description here

2.- The Text Header doesn´t moves when i scroll the grid and i set in the scrollingSetting the property NumberOfFixedColumns different to 0

enter image description here

So i wanna use a fixed column but it doesn´t work properly.

The code use for this in the web page:

<link href="../App_Themes/Theme7/styles/oboutgrid/column-set.css" rel="stylesheet"
    type="text/css" />
<script type="text/javascript">
    window.onload = function () {
        //Grid1.addColumnSet(level, startColumnIndex, endColumnIndex, text);
        grdCatalogo.addColumnSetScrollGrid(0, 0, 8, '');
        grdCatalogo.addColumnSetScrollGrid(0, 9, 10, 'Cliente');
    }
</script>

the code of the column-set.js:

oboutGrid.prototype.addColumnSetScrollGrid = function (level, startColumnIndex, endColumnIndex,     text) {

if (typeof (this.GridColumnSetsContainer) == 'undefined') {
    this.GridColumnSetsContainer = document.createElement('DIV');
    this.GridColumnSetsContainer.className = 'ob_gCSContScroll';

    this.GridColumnSetsContainer.style.width = this.GridMainContainer.style.width;


    this.GridMainContainer.appendChild(this.GridColumnSetsContainer);
}

if (typeof (this.ColumnSets) == 'undefined') {
    this.ColumnSets = new Array();
}

if (typeof (this.ColumnSets[level]) == 'undefined') {
    this.ColumnSets[level] = new Array();

    this.GridHeaderContainer.firstChild.style.marginTop = (level + 1) * 25 + 'px';

    var levelContainer = document.createElement('DIV');
    levelContainer.className = "ob_gCSContLevel";
    levelContainer.style.width = this.GridHeaderContainer.firstChild.firstChild.offsetWidth + 'px';

    this.GridColumnSetsContainer.appendChild(levelContainer);
}
//        if ($(this.GridMainContainer).css('width') <= $(this.GridColumnSetsContainer).css('width')) {
//            var newWidth = $(this.GridColumnSetsContainer).css('width') - $(this.GridMainContainer).css('width');
//            $(this.GridColumnSetsContainer).css('width',newWidth);
//        }


var columnSet = document.createElement('DIV');
columnSet.className = 'ob_gCSet';
this.GridColumnSetsContainer.childNodes[level].appendChild(columnSet);
//var position = this.GridHeaderContainer.position();
var position = this.GridHeaderContainer.getBoundingClientRect()
var top = position.top;
var left = position.left;
$(this.GridColumnSetsContainer).css({ "top": top });
$(this.GridColumnSetsContainer).css({ "margin-left": left });

var columnSetContent = document.createElement('DIV');
columnSetContent.innerHTML = text;
columnSet.appendChild(columnSetContent);

columnSet.style.width = columnSetWidth + 'px';
if (endColumnIndex < this.ColumnsCollection.length - 1) {
    var tempLevel = level;
    if (!(level == 0 || this.GridHeaderContainer.firstChild.childNodes[endColumnIndex + 1].style.top)) {
        tempLevel -= 1;
    }

    var newTop = (-1 - tempLevel) * (25);

    this.GridHeaderContainer.firstChild.childNodes[endColumnIndex + 1].style.top = newTop + 'px';
}

if (this.ColumnsCollection.lenght != 0) {
    var columnSetWidth = 0;
    for (var i = startColumnIndex; i <= endColumnIndex; i++) {
        if (this.ColumnsCollection[i] != null && this.ColumnsCollection[i] != 'undefined' && this.ColumnsCollection[i].Visible) {
            columnSetWidth += this.ColumnsCollection[i].Width;
        }
    }
}

columnSet.style.width = columnSetWidth + 'px';


var columnSetObject = new Object();
columnSetObject.Level = level;
columnSetObject.StartColumnIndex = startColumnIndex;
columnSetObject.EndColumnIndex = endColumnIndex;
columnSetObject.ColumnSet = columnSet;

this.ColumnSets[level].push(columnSetObject);
}

oboutGrid.prototype.resizeColumnSets = function () {
for (var level = 0; level < this.ColumnSets.length; level++) {
    for (var i = 0; i < this.ColumnSets[level].length; i++) {
        var columnSetWidth = 0;
        for (var j = this.ColumnSets[level][i].StartColumnIndex; j <= this.ColumnSets[level]    [i].EndColumnIndex; j++) {
            if (this.ColumnsCollection[j].Visible) {
                columnSetWidth += this.ColumnsCollection[j].Width;
            }
        }

        this.ColumnSets[level][i].ColumnSet.style.width = columnSetWidth + 'px';
    }
    }
    }

oboutGrid.prototype.resizeColumnOld = oboutGrid.prototype.resizeColumn;
oboutGrid.prototype.resizeColumn = function (columnIndex, amountToResize, keepGridWidth) {
this.resizeColumnOld(columnIndex, amountToResize, keepGridWidth);

this.resizeColumnSets();
}

oboutGrid.prototype.synchronizeBodyHorizontalScrollingOld =         oboutGrid.prototype.synchronizeBodyHorizontalScrolling;
oboutGrid.prototype.synchronizeBodyHorizontalScrolling = function () {
this.synchronizeBodyHorizontalScrollingOld();

//this.GridColumnSetsContainer.style.marginLeft = -1 *    this.GridBodyContainer.firstChild.scrollLeft + 'px';
this.GridHeaderContainer.firstChild.style.marginLeft = -1 *    this.GridBodyContainer.firstChild.scrollLeft + 'px';
this.GridColumnSetsContainer.scrollLeft = this.GridBodyContainer.firstChild.scrollLeft;
}

The css file: 

.ob_gCSContScroll
{
    position: absolute !important;
    /*top: 17px !important;*/
    left: 0px !important;
    right: 0px !important;
    overflow: hidden;
    width: 1179px;
    margin-left: 47px;
}

/* A column set row (level) */
.ob_gCSContLevel
{
    height: 25px !important;
    background-image: url(column-set.png);
    background-repeat: repeat-x;
    background-color: #A8AEBD;
}

/* The column set for a number of columns */
.ob_gCSet
{
    color: #01354D;
    font-family: Verdana;
    font-size: 12px;
    font-weight: bold;
    float: left;
    text-align: center;
}



/* The text of a column set */
.ob_gCSet div
{
    margin-left: 20px;
    margin-top: 3px;
}

/* The separator between two column sets */
.ob_gCSetSep
{
    top: -25px !important;
}

.ob_gHCont, .ob_gHContWG
{
    z-index: 10 !important;
}

.ob_gHICont
{
    overflow: visible !important;
}
Solution

  • I have found the solution, i had to modify the next files:

    1.- I had to add the next line in the method addColumnSet of the column-set.js file :

    this.GridColumnSetsContainer.setAttribute("id","BarraScroll");

    I added it just after this line:

    this.GridColumnSetsContainer.className = 'ob_gCSCont';

    2.- i had to modify the next function : oboutGrid.prototype.synchronizeFixedColumns that is in the oboutgrid_scrolling.js file, and the method with all the changes is the next one, this method is called every time that that the user scroll the grid and the property NumberOrFixedColumns of the tag ScrollSetting that is inside of the grids tag is different of zero:

    oboutGrid.prototype.synchronizeFixedColumns = function() {
    var b = this.HorizontalScroller.firstChild.scrollLeft;
    if (this.PreviousScrollLeft == b) return;
    else this.PreviousScrollLeft = b;
    var g = parseInt(this.ScrollWidth);
    if (this.FixedColumnsPosition == 1) {
        for (var f = this.getVisibleColumnsWidth(false), c = false, a = this.NumberOfFixedColumns; a < this.ColumnsCollection.length - 1; a++)
            if (f > g) {
                if (this.ColumnsCollection[a].Visible)
                    if (b >= this.ScrolledColumnsWidth) {
                        this.hideColumn(a, false, false);
                        this.markColumnsAsScrolled(a);
                        f = this.getVisibleColumnsWidth(false);
                        document.getElementById("BarraScroll").scrollLeft = b + this.ColumnsCollection[a].Width;
.                        c = true
                    } else break
            } else break;
        if (!c)
            for (var a = this.ColumnsCollection.length - 2; a >= this.NumberOfFixedColumns; a--)
                if (this.ColumnsCollection[a].RealVisible == true && this.ColumnsCollection[a].Visible == false)
                    if (b <= this.ScrolledColumnsWidth - this.ColumnsCollection[a].Width) {
                        document.getElementById("BarraScroll").scrollLeft = b;
                        this.showColumn(a, false, false);                      
                        this.unmarkColumnsAsScrolled(a)
                    } else break
    } else {
        for (var e = false, c = false, d = this.getFixedColumnsWidth() - this.PreviousFixedColumnsWidth, a = 1; a < this.ColumnsCollection.length - this.NumberOfFixedColumns; a++)
            if (this.ColumnsCollection[a].RealVisible == true && this.ColumnsCollection[a].Visible == false)
                if (b - d >= this.ScrolledColumnsWidth) {
                  document.getElementById("BarraScroll").scrollLeft = b + this.ColumnsCollection[a].Width;
                    this.showColumn(a, false, false);
                    this.markColumnsAsScrolled(a);
                    e = true
                } else break;
        var h = false;
        if (!e)
            for (var a = this.ColumnsCollection.length - this.NumberOfFixedColumns - 1; a > 0; a--)
                if (this.ColumnsCollection[a].Visible)
                    if (b - d <= this.ScrolledColumnsWidth - this.ColumnsCollection[a].Width) {
                        document.getElementById("BarraScroll").scrollLeft = b;
                        this.hideColumn(a, false, false);
                        this.unmarkColumnsAsScrolled(a);
                        d = this.getFixedColumnsWidth() - this.PreviousFixedColumnsWidth;
                        c = true
                    } else break;
        if (e || c) {
            this.rightAlignGridContent();
            if (b == 0) {
                this.PreviousFixedColumnsWidth = this.getFixedColumnsWidth();
                this.ScrolledColumnsIndexes = ",";
                this.updateScrolledColumnsWidth()
            }
        }
    }
};