You must Sign In to post a response.
  • Category: .NET

    Custom datagrid with fixed grid issue

    I have a custom data grid for which fixed header columns are not aligned width body cell. The code worked fine until IE8. This alignment problem is from IE11 and Firefox. Below is the java script file I am using for fixed header and scrolling. The problem is header columns are not aligned with body column and also text in the cell is not wrapping up if it exceed width

    InitiateGrid(sGridName)
    {

    DIVID=document.getElementByID(sGridName+"Container");

    if ((DivID != null) && (DivID != 'undefined')) {
    hdrContainer = DivID.childNodes[0];
    bdyContainer = DivID.childNodes[1];
    pgrContainer = DivID.childNodes[2];
    if ((bdyContainer != null) && (bdyContainer != 'undefined')) {

    tblBody = bdyContainer.childNodes[0];
    }
    ElementContainer = DivID.parentElement;
    DivID.style.display = "";

    MakeHeader();
    }

    }

    // to make fixed header*/

    function MakeHeader()
    {

    tblHeader = tblBody.cloneNode(true);


    tblHeader.id = GridID + "tblHeader";
    // tblHeader.id = DivID + "tblHeader";
    tblBody.deleteRow(0);

    for (var i = this.tblHeader.rows.length; i > 1; i--) {
    // DebugIt('MakeHeader()');
    if (trident > 0 || edge > 0) {
    tblHeader.rows[i - 1].removeNode(true); //***works only in iE
    }
    else {
    tblHeader.rows[i - 1].remove();
    }
    }

    hdrContainer.appendChild(tblHeader);
    if (LastRowIsPager == 'true') {
    MakePager();
    }
    // $(bdyContainer).on("scroll", function (e) {
    $(bdyContainer).scroll(function () {
    // alert('in scroll');
    var sleft = $(bdyContainer).scrollLeft();
    //hdrContainer.scrollLeft = e.currentTarget.scrollLeft;
    $(hdrContainer).scrollLeft(sleft);
    });
    // bdyContainer.addEventListener('onscroll', doScroll);
    InitGridNoGroups();
    }

    //function to make headercell width is equal to body cell

    function InitGridNoGroups() {
    // alert('InitGridNoGroups');

    for (var a = 0; a < this.tblHeader.rows[0].cells.length; a++) {


    var oHeaderCell = tblHeader.rows[0].cells[a];
    var oBodyCell = tblBody.rows[0].cells[a];


    if (oHeaderCell.offsetWidth > oBodyCell.offsetWidth) {
    oHeaderCell.width = oHeaderCell.offsetWidth;
    oHeaderCell.style.width = oHeaderCell.offsetWidth;
    oBodyCell.width = oHeaderCell.offsetWidth;
    oBodyCell.style.width = oHeaderCell.offsetWidth;


    }
    else {



    oHeaderCell.width = oBodyCell.offsetWidth;
    oHeaderCell.style.width = oBodyCell.offsetWidth;
    oBodyCell.width = oBodyCell.offsetWidth;
    oBodyCell.style.width = oBodyCell.offsetWidth;

    }

    }

    tblHeader.style.tableLayout = "fixed";
    tblBody.style.tableLayout = "fixed";

    SizeContainers();

    }

    //calculation to set up grid//

    var SizeContainers = function () {
    //alert('Sizecontainer');
    var iParentWidth = ElementContainer.offsetWidth;
    // alert('Parent width' + iParentWidth);
    var iBodyWidth = tblBody.offsetWidth;
    // alert('total body width:' + iBodyWidth);
    var iBodyHeight = tblBody.offsetHeight;
    var iContainerHeight = bdyContainer.offsetHeight;
    //DebugIt('SizeContainers()');

    if (iBodyWidth <= iParentWidth) {
    if (iBodyHeight <= iContainerHeight) {
    //***Everything can be contained without scrolling vertically.
    //***No need to compensate for the vertical scrollbar.


    tblHeader.style.width = iBodyWidth;
    bdyContainer.style.overflow = "";
    bdyContainer.style.height = iBodyHeight;
    hdrContainer.style.width = iBodyWidth;
    hdrContainer.style.overflow = "hidden";
    bdyContainer.style.width = iBodyWidth;
    pgrContainer.style.width = iBodyWidth;
    // DivID.style.width = iParentWidth;
    DivID.style.width = iBodyWidth + 100;
    DivID.style.overflow = "";
    //setHeaders();
    }
    else {
    //***The Data Container is larger than the body of the datagrid so
    //***we must allocate some space for the vertical scrollbar.


    tblHeader.width = iBodyWidth;
    hdrContainer.style.width = iBodyWidth;
    hdrContainer.style.overflow = "hidden";
    bdyContainer.style.width = iBodyWidth + 17;
    //bdyContainer.style.width = iBodyWidth+18;
    pgrContainer.style.width = iBodyWidth;
    DivID.style.width = iParentWidth;
    DivID.style.overflow = "hidden";


    }
    }
    else {
    if (iBodyHeight <= iContainerHeight) {

    tblHeader.width = iBodyWidth;
    bdyContainer.style.height = iBodyHeight + 17;
    hdrContainer.style.width = iParentWidth - 17;
    bdyContainer.style.height = iBodyHeight;
    hdrContainer.style.width = iParentWidth;
    hdrContainer.style.overflow = "hidden";
    bdyContainer.style.width = iParentWidth;
    bdyContainer.style.overflow = "scroll";
    pgrContainer.style.width = iParentWidth;
    DivID.style.width = iParentWidth;
    DivID.style.overflow = "";


    }
    else {

    tblHeader.width = iBodyWidth;
    DivID.style.width = iParentWidth;
    DivID.style.overflow = "hidden";
    // bdyContainer.style.overflow = "";
    hdrContainer.style.width = iParentWidth - 34;
    hdrContainer.style.overflow = "hidden";
    bdyContainer.style.overflow = "auto";
    bdyContainer.style.width = iParentWidth - 17;
    pgrContainer.style.width = iParentWidth - 17;




    }


    //setting up fixed page

    function MakePager() {
    tblPager = tblBody.cloneNode(true);
    tblPager.id = GridID + "tblPager";
    tblBody.deleteRow(tblBody.rows.length - 1);
    var iMod = 1;

    for (var a = tblPager.rows.length - iMod - 1; a > -1; a--) {
    //DebugIt('MakePager()');
    if (trident > 0 || edge > 0) {
    tblPager.rows[a].removeNode(true); //for IE only
    }
    else {
    tblPager.rows[a].remove();
    }
    }
    tblPager.width = "100%";
    tblPager.style.width = "100%";
    pgrContainer.appendChild(tblPager);
    }
    }
    }
  • #765372
    Hi Chinnari,

    It's too difficult to say the problem for browser compatibility issues, most chances are few of the methods are not support for some browsers, request you to check the error details in Browser of that page, then only we can say the exact problem where you are getting this.

    --------------------------------------------------------------------------------
    Give respect to your work, Instead of trying to impress your boss.

    N@veen
    Blog : http://naveens-dotnet.blogspot.in/


Sign In to post your comments