Hi Yousif,

     I have tried your scenario and the result is fine. Could you kindly see my snapshot and notice that there no vertical line appeared. May I know on how to set the border to be invisible. This is the code that I have used to do this scenario.

<FrameStyle Overflow="Hidden" OverflowX="Hidden" OverflowY="Hidden">
</FrameStyle>

      And this is what I used to remove the  particular messages.

<TextSettings>
     <TextItems>
          <ISWebGrid:WebGridTextItem TextItem="CommonText/NoData" TextValue=" " />
     </TextItems>
</TextSettings>

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

Best Regards,

Andi Santoso

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";
}

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>

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

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.

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

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.

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

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.

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

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;
}

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