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

    Grid header columns are not aligned with row column

    I have a custom grid control which has fixed header and pager with scrolling. Some what in my grid header columns are not aligned with data row columns. Here is my code. Please tell me how to fix it. I am using firefox.

    Code for creating fixed header and cell alignment using javascript
    ---------------------------------------------------------

    function MakeHeader() {

    tblHeader = tblBody.cloneNode(true);
    tblHeader.id = GridID + "tblHeader";
    tblBody.deleteRow(0);

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

    hdrContainer.appendChild(tblHeader);
    //alert(LastRowIsPager);
    if (LastRowIsPager == 'true') {
    MakePager();
    }
    bdyContainer.addEventListener('onscroll', doScroll);
    InitGridNoGroups();
    }

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

    }

    var SizeContainers = function () {
    alert('Sizecontainer');
    var iParentWidth = ElementContainer.offsetWidth;
    var iBodyWidth = tblBody.offsetWidth;
    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.
    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.overflow = "";
    }
    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;
    pgrContainer.style.width = iBodyWidth;
    DivID.style.width = iParentWidth;
    DivID.style.overflow = "";
    }
    }
    else {
    if (iBodyHeight <= iContainerHeight) {
    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 {
    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;
    }
    }
    }
    function doScroll() {
    hdrContainer.scrollLeft = bdyContainer.scrollLeft;
    }

    Custom control dynamic div binding
    -----------------------------
    if (HttpContext.Current!=null && this.AllowScroll && this.IsEmptyDataSource==false)
    {


    string sOpenScroll = @"<div id={0}Container style='OVERFLOW: auto; WIDTH: 600px;' LastRowIsPager={1} GroupCount={2} SelectedIndex={4} IsNested={5}>";
    sOpenScroll += "<div id='{0}HeaderContainer' style='OVERFLOW: hidden;Width:400px'></div>";
    sOpenScroll += "<div id='{0}BodyContainer' style='OVERFLOW: scroll;Width:100%;Height:{3}'>";
    writer.Write(string.Format(sOpenScroll,this.ID,this.bLastRowIsPager.ToString().ToLower(),"0",this.ScrollHeight.Value.ToString(),this.EditItemIndex.ToString(),this.IsNested.ToString().ToLower()));
    }

    base.Render (writer);


    Grid on .aspx page
    -------------------------

    <cc1:CMSDataGrid2
    id="DatagridZipCode"
    runat="server"
    CssClass="TableBorder"
    ProcedureName="spJPMC_ZipCodePageSelect"
    AllowSorting="True"
    AllowPaging="True"
    AllowCustomPaging="True"
    SortDirection="asc"
    ShowHeader="True"
    ScrollHeight="300"
    AllowScroll="True"
    AutoGenerateColumns="False"
    ScrollWindowWidth="500"
    AutoQuery="False"
    AutoPostBack="false"
    ClientIDMode="Static">
    <Parameters>
    <cc1:CMSProcedureParameter SqlDataType="int" Direction="Input" ParameterName="intPageNo" Size="1" SystemType="int" Value="1" MappingType="PageNumber"></cc1:CMSProcedureParameter>
    <cc1:CMSProcedureParameter SqlDataType="int" Direction="Input" ParameterName="intPageSize" Size="0" SystemType="int" Value="20" MappingType="PageSize"></cc1:CMSProcedureParameter>
    <cc1:CMSProcedureParameter SqlDataType="varchar" Direction="Input" ParameterName="sSortColumn" Size="100" SystemType="string" Value="" MappingType="SortColumn"></cc1:CMSProcedureParameter>
    <cc1:CMSProcedureParameter SqlDataType="char" Direction="Input" ParameterName="sSortDirection" Size="4" SystemType="char" Value="" MappingType="SortDirection"></cc1:CMSProcedureParameter>
    <cc1:CMSProcedureParameter SqlDataType="varchar" Direction="Input" ParameterName="sFilterCriteria" Size="4000" SystemType="string" Value="" MappingType="Filter"></cc1:CMSProcedureParameter>
    <cc1:CMSProcedureParameter SqlDataType ="varchar" Direction="Input" ParameterName ="sZipCodeFilter" Size="50" SystemType="string" Value ="" MappingType ="" ></cc1:CMSProcedureParameter >
    <cc1:CMSProcedureParameter SqlDataType ="varchar" Direction="Input" ParameterName ="sCityFilter" Size="50" SystemType="string" Value ="" MappingType ="" ></cc1:CMSProcedureParameter >
    <cc1:CMSProcedureParameter SqlDataType ="varchar" Direction="Input" ParameterName ="sStateFilter" Size="50" SystemType="string" Value ="" MappingType ="" ></cc1:CMSProcedureParameter >
    <cc1:CMSProcedureParameter SqlDataType="int" Direction="Output" ParameterName="TotalRecords" Size="0" SystemType="int" Value="0" MappingType="RecordCount" ></cc1:CMSProcedureParameter>
    </Parameters>
    <HeaderStyle Wrap="False" HorizontalAlign="Center" CssClass="TableScrollHeaderRight"></HeaderStyle>
    <EditItemStyle Wrap="False" HorizontalAlign="Left" VerticalAlign="Middle"></EditItemStyle>
    <ItemStyle Wrap="False" HorizontalAlign="Center" VerticalAlign="Middle" CssClass="TableRow"></ItemStyle>
    <AlternatingItemStyle Wrap="False" HorizontalAlign="Left" VerticalAlign="Middle" CssClass="TableAlternatingRow"></AlternatingItemStyle>
    <Columns >


    .CSS class styles
    ------------------------

    .TableScrollHeaderRight
    {
    font-weight: bold;
    font-size: 8pt;
    font-family: Verdana, Arial;
    color: #003366;
    background-color: #e5ebf0;
    border-right: #99adc2 1px solid;
    border-top: #99adc2 1px solid;
    border-left: #99adc2 1px solid;
    border-bottom: #99adc2 1px solid;
    text-align:center;
    border-collapse:collapse;
    }

    TableRow
    {
    padding-right: 5px;
    border-top: #c0c0c0 1px solid;
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-left: #c0c0c0 1px solid;
    border-bottom: #c0c0c0 1px solid;
    background-color: #ffffff;
    }

    .TableAlternatingRow
    {
    padding-right: 5px;
    border-top: #c0c0c0 1px solid;
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-left: #c0c0c0 1px solid;
    border-bottom: #c0c0c0 1px solid;
    background-color: #E7F3FE;
    }
  • #764437
    Hai Chinnari,
    If you are making the fixed width for the column header then for each row, column width also should be same as you have defined for the header, otherwise you will get this problem all time when the data is big in the columns.
    Hope it will be helpful to you.

    Regards,
    Pawan Awasthi(DNS MVM)
    +91 8123489140 (whatsApp), +60 14365 1476(Malaysia)
    pawansoftit@gmail.com

  • #764442
    Hi Pawan,

    I am doing that in the function InitGridNoGroups in my code above but still alignment is wrong. I am testing it firefox

  • #764447
    Hi Chinnari,
    Try this:
    http://www.bluelemoncode.com/post/2011/12/30/Freezing-gridview-header-and-columns-while-scrolling-rest-of-the-content.aspx

    View demo's here:
    http://www.jqueryscript.net/table/Lightweight-jQuery-Plugin-For-Fixed-Table-Headers.html

    Hope it helps.
    Regards,
    Shashikant Gurav
    shashikantgurav22@gmail.com


Sign In to post your comments