Intersoft Community - WebGrid Enterprise - Empty Grid Has Extraneous Vertical Line

Empty Grid Has Extraneous Vertical Line

PRISMAY — Thu, 16 Sep 2010 08:58:54 GMT

Hi Niven,

Thank you for following up. It's not a minor issue for us, however, I do have a temporary workaround. The workaround above did not work all the time. For whatever reason, when we have another grid on the same page that show/hide, it restores the ROW's style to that message row. So a grid with no data would come up fine with the workaround above, however, once we show the other grid, the line comes back on both grids which makes no sense.

Even debugging the page in F12 in IE, shows the borders are all set to 0px yet it still uses the ROW style. Anyway, it occurred to me that maybe using a class may work and it does. So for now, we use a class and assign it in JavaScript after the page/grids load.

We define our normal row, and now the one with no borders, classes like this:

.GridRow, .GridRowNoBorders
{
	background-color: White;
	font-family: Calibri;
	font-size: 9pt;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	vertical-align: top;
}

.GridRowNoBorders
{
	border: solid 0px #000000;
}

And then on the client side, we assign once we find the NoData object, i.e.,

    var oNoDataContainer = document.getElementById(gridId + "_ND");
    if (jsg_PrismUtility.IsVo(oNoDataContainer))
    {
        if (oGrid.TotalLoadedRows == "0")
        {
            oNoDataContainer.className = arGridInfo[gridId].NoDataCssClassName;
        }
    }

Empty Grid Has Extraneous Vertical Line

niven — Thu, 16 Sep 2010 02:18:55 GMT

Hi Yousif,

I apologize, the issue have not fix yet. Since it was considerable as a minor issue. But I will follow this issue again to the developer team..

Sorry for the inconvenience.

Best regards,

Niven Prasetya

Empty Grid Has Extraneous Vertical Line

PRISMAY — Wed, 15 Sep 2010 08:34:34 GMT

Has this problem been fixed in 2010 R1? I just installed it yesterday and it doesn't look like it's been fixed. I really hope you can get this fixed and add new styles specific to this message rather than apply styles from other rows that don't really apply. Thanks.

Empty Grid Has Extraneous Vertical Line

andi@intersoftpt.com — Mon, 17 May 2010 11:33:19 GMT

Hi Yousif,

Yes, if you use that method, we will need to use space instead of just "". My javascript solution should meet the scenario of yours. Here, I attached you a screenshot of my sample.

Thank you and have a nice day.

Best Regards,

Andi Santoso

Empty Grid Has Extraneous Vertical Line

PRISMAY — Fri, 14 May 2010 15:12:00 GMT

Hi Andi,

Okay, I'll try your method but it will be a few days before I get back to it. In the meanwhile, here's how we get rid of the text.

ISNet.WebUI.WebGrid.WebGridTextItem oTextItem =
new ISNet.WebUI.WebGrid.WebGridTextItem("CommonText/NoData"," ");
if (!this.LayoutSettings.TextSettings.TextItems.Contains(oTextItem))
{
this.LayoutSettings.TextSettings.TextItems.Add(oTextItem);
}

Note that we do have to use a space because using "" does not work. I'm confident your javascript solution should work as long as the nodes are consistenly in the same place on every grid.

Empty Grid Has Extraneous Vertical Line

andi@intersoftpt.com — Fri, 14 May 2010 15:07:00 GMT

Hi Yousif,

Could you kindly try this workaround? I have tried use this and the vertical line is not showing anymore. And please ensuer that you are not using the <Text Setting> <TextItem> again to remove the "Grid has not row". Here is the snippet:

   setTimeout(function() { 
           ISGetObject("WebGrid2").FrameObj.childNodes[2].childNodes[1].innerText = "";
   }, 50);

I hope it can helps. Thank you and have a nice day.

Best Regards,

Andi Santoso

Empty Grid Has Extraneous Vertical Line

PRISMAY — Fri, 14 May 2010 08:16:58 GMT

Hello Handy,

Well, we can't remove this from our grid configuration as it will remove the vertical lines from the grid. See attached.

Can you guys add a skin and style setting specific to the message container so it can be formatted separately please? This is an issue since it shares the style and does not "blank" it out when there's no data in the grid.

Unless you have a suggestion as to how we can achieve our vertical lines another way? We use a different shade in the headers and in the grid rows which is why we have it set up this way.

Empty Grid Has Extraneous Vertical Line

handy@intersoftpt.com — Thu, 13 May 2010 23:46:36 GMT

Hello Yousif,

Thank you for your guidance. I am able to replicate the issue. When you set TextSettings for TextValue as " " to replace "grid has no rows in this view" message, It will be considered as a blank row.
The problem is in your RowStyle, you define BorderSettings for right side. This should be not declared.
So, please try to remove the border style to remove the vertical line issue.

<RowStyle CssClass="GridRow" BorderStyle="Solid" BorderWidth="0px">
            <BorderSettings>
                        <Right Color="#d0d0d0" Width="1px" />
            </BorderSettings>
</RowStyle>

Regards,
Handy

Empty Grid Has Extraneous Vertical Line

PRISMAY — Thu, 13 May 2010 12:54:00 GMT

Andi,

I tried updating our skin file but it had no impact. Here's our skin settings for the grid. The changes I made are in blue and bolded.

    <LayoutSettings
            AllowAddNew="No" 
            AllowColumnFreezing="No" 
            AllowColumnMove="Yes" 
            AllowColumnSizing="Yes" 
            AllowContextMenu="true" 
            AllowDelete="No" 
            StatusBarVisible="true"
            AllowEdit="No" 
            AllowSelectColumns="Yes" 
            AllowSorting="No" 
            AllowExport="Yes" 
            PagingSize="10" 
            PagingMode="VirtualLoad" 
            VirtualLoadMode="LargeData" 
            VirtualPageSize="100" 
            Hierarchical="false" 
            AutoFitColumns="false" 
            GridLines="Vertical" 
            PersistRowChecker="true"
            RowHeaders="No" 
            AutoHeight="false" 
            AutoWidth="false" 
            RowHeightDefault="-1px" 
            AlternatingColors="true"
            UseRelativePositioning="true"
            GridLineColor="#d0d0d0" 
            AlwaysShowHelpButton="false" 
            ColumnFooterAggregateMode="CalculateAllData" 
            DisplayDetailsOnUnhandledError="false"
            >

        <TextSettings Language="UseCulture" 
            LocalizationFolder="~/CommonLibrary/WebGrid/V7_0_7200/Localization/" 
            UseWebResources="False">
        </TextSettings>

         <CheckedRowStyle CssClass="GridSelectedRow"></CheckedRowStyle>

        <FrameStyle BackColor="White" BorderColor="DarkGray" BorderStyle="none" 
            BorderWidth="0px" Overflow="Hidden" OverflowX="Hidden" OverflowY="Hidden">
        </FrameStyle>

        <GroupByBox>
            <Style CssClass="GridGroupByBox"></Style>
            <LabelStyle CssClass="GridGroupByBoxLabel"/>
        </GroupByBox>

        <GroupRowInfoStyle BackColor="#F1EFE2" BorderColor="White" BorderStyle="Solid" 
            BorderWidth="0px" 
            CustomRules="border-bottom-color: Silver; border-right-color: Silver" 
            Font-Names="Verdana" Font-Size="8pt" font-bold="True" forecolor="#676896">
            <BorderSettings>
                <Bottom Color="144, 145, 182"  Width="2px" />
                <Right Color="Silver" />
            </BorderSettings>
        </GroupRowInfoStyle>

        <AlternatingRowStyle CssClass="GridAlternatingRow" BorderStyle="Solid" BorderWidth="0px">
            <BorderSettings>
                <Right Color="#d0d0d0" Width="1px" />
            </BorderSettings>
        </AlternatingRowStyle>

        <FocusCellStyle BorderColor="DimGray" BorderStyle="Solid" BorderWidth="1px" />

        <RowStyle CssClass="GridRow" BorderStyle="Solid" BorderWidth="0px">
            <BorderSettings>
                <Right Color="#d0d0d0" Width="1px" />
            </BorderSettings>
        </RowStyle>

        <SelectedRowStyle CssClass="GridSelectedRow"/>

        <HeaderStyle CssClass="GridHeader" BorderStyle="Solid" BorderWidth="0px">
            <Padding Bottom="4px" Left="2px" Right="2px" Top="4px" />
            <BorderSettings>
                <Bottom Color="#f0f0f0" Width="0px" />
                <Right Color="#c0c0c0" Width="1px" />
            </BorderSettings>
        </HeaderStyle>
        
        <FooterStyle CssClass="GridFooter" />
        
        <StatusBarStyle CssClass="GridStatusBar">
        </StatusBarStyle>
        
    </LayoutSettings>

Empty Grid Has Extraneous Vertical Line

PRISMAY — Thu, 13 May 2010 12:32:53 GMT

Thanks Andi. I'll give it a try and see how this works. Just FYI, I wound up working around this via JavaScript after the grid initializes like this in OnAfterInitialize:

var oNoDataContainer = document.getElementById(gridId + "_ND");
if (jsg_PrismUtility.IsVo(oNoDataContainer))
{
   oNoDataContainer.style.borderRight = "0px solid #000000";
   oNoDataContainer.style.borderLeft = "0px solid #000000";
   oNoDataContainer.style.borderTop = "0px solid #000000";
   oNoDataContainer.style.borderBottom = "0px solid #000000";
}

Empty Grid Has Extraneous Vertical Line

PRISMAY — Wed, 12 May 2010 13:21:20 GMT

Some of our grids may be empty. In those cases, we've removed the standard "grid has no rows in this view" message so it's just blank. However, we've not noticed a vertical line to the far right of the grid. I can only assume it's a style being applied to the container of the aforementioned message?

Please see the attached snapshot. Would appreciate input on how to get rid of this please. Thank you.