[Solved] radgrid skin overlapps with border

[AratiS]

Hi,

I have an issue where radgrid skin overlaps the border (see image attached). As per my observation, this happens when grid loads for the first time. Please find the markup for grid below.

<asp:Panel ID="GridPanel" runat="server" EnableViewState="true" Visible="false"
    Height="80%" Width="100%" ScrollBars="Auto"  >
    <telerik:RadGrid ID="Grid1" GridLines="None" runat="server" AllowAutomaticDeletes="True"
        EnableViewState="true" AllowAutomaticInserts="True" Skin="Outlook" ShowHeader="true" 
        CssClass="GridStyle" AllowPaging="true" PageSize="10"
        OnDeleteCommand="Grid1_DeleteCommand" OnPageIndexChanged="Grid1_PageIndexChanged"
        Height="100%" HorizontalAlign="Center"
        OnItemDataBound="Grid1_ItemDataBound" 
        OnItemCommand="Grid1_ItemCommand" ShowGroupPanel="true" OnItemCreated="Grid1_ItemCreated">
        <PagerStyle AlwaysVisible="true" />
        <ItemStyle HorizontalAlign="Center" />
        <AlternatingItemStyle HorizontalAlign="Center" />
        <MasterTableView CommandItemDisplay="Bottom" EnableViewState="true"
            NoMasterRecordsText="" EditMode="InPlace" HorizontalAlign="Center" AutoGenerateColumns="False"
            Caption="Manual Assignment" TableLayout="Auto" GroupLoadMode="Server">

            <GroupByExpressions>
                <telerik:GridGroupByExpression>
                                    <SelectFields>
                        <telerik:GridGroupByField  FieldName="Seq" 
                            HeaderValueSeparator=":"></telerik:GridGroupByField>
                    </SelectFields>
                    <GroupByFields>
                        <telerik:GridGroupByField FieldName="Seq" SortOrder="Ascending"></telerik:GridGroupByField>
                    </GroupByFields>
                </telerik:GridGroupByExpression>
            </GroupByExpressions>

            <Columns>
                <telerik:GridButtonColumn ButtonType="ImageButton" ConfirmDialogType="RadWindow"
                    ConfirmText="Delete this Element?" CommandName="Delete" Text="Delete" ConfirmTitle="Delete"
                    UniqueName="DeleteColumn" ItemStyle-Width="50px" HeaderStyle-Width="50px">
                    <ItemStyle CssClass="MyImageButton" HorizontalAlign="Center" />
                </telerik:GridButtonColumn>
                <telerik:GridTemplateColumn ItemStyle-Width="125px" UniqueName="ManElementTypeCol"
                    HeaderText="Element Type" HeaderStyle-Width="125px">
                    <ItemTemplate>
                        <telerik:RadComboBox ID="ddlElementTypeEdit" runat="server" AutoPostBack="true" DataSourceID="SqlDataSource2"
                            DataTextField="Description" DataValueField="ID" Width="110px" EnableViewState="false" Height="150"
                            OnSelectedIndexChanged="ddlElementTypeEdit_SelectedIndexChanged" NoWrap="true" OnDataBound="ddlElementTypeEdit_DataBound">
                        </telerik:RadComboBox>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn ItemStyle-Width="225px" UniqueName="ManCOIDColumn" HeaderText="Element Location" HeaderStyle-Width="225px">
                    <ItemTemplate>
                        
                        <telerik:RadComboBox ID="ddlCOIDEdit" runat="server" AutoPostBack="true" Width="200px" Height="150"
                            OnSelectedIndexChanged="ddlCOIDEdit_SelectedIndexChanged" EnableViewState="false" NoWrap="true" OnDataBound="ddlCOIDEdit_DataBound">
                        </telerik:RadComboBox>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn ItemStyle-Width="225px" UniqueName="ManElementColumn"
                    HeaderText="Element" HeaderStyle-Width="225px">
                    <ItemTemplate>
                        <telerik:RadComboBox ID="ddlElementEdit" runat="server" AutoPostBack="true" Width="200px" Height="150"
                            EnableViewState="false" OnSelectedIndexChanged="ddlElementEdit_SelectedIndexChanged" NoWrap="true" OnDataBound="ddlElementEdit_DataBound" 
                             EnableLoadOnDemand="true" ShowMoreResultsBox="true" EnableVirtualScrolling="true" OnItemsRequested="ddlElementEdit_ItemsRequested"  
                             OnClientItemsRequesting="GetSelectedItem">
                        </telerik:RadComboBox>
                        
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn ItemStyle-Width="125px" UniqueName="ManStatusColumn"
                    HeaderText="Status" HeaderStyle-Width="125px">
                    <ItemTemplate>
                        <telerik:RadComboBox ID="ddlStatusEdit" runat="server" AutoPostBack="true" DataSourceID="SqlDataSource4"
                            DataTextField="Description" DataValueField="ID" Width="110px" EnableViewState="false"
                            OnSelectedIndexChanged="ddlStatusEdit_SelectedIndexChanged">
                        </telerik:RadComboBox>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                 <telerik:GridTemplateColumn HeaderText="Linecard Sequence" ItemStyle-Width="150px"
                    UniqueName="ManLinecardSeqColumn" HeaderStyle-Width="150px">
                    <ItemTemplate>
                        <telerik:RadComboBox ID="ddlManLinecardSeq" runat="server" EnableViewState="true" AppendDataBoundItems="true"
                            Width="100px" AutoPostBack="true" OnSelectedIndexChanged="ddlManLinecardSeq_SelectedIndexChanged">
                        </telerik:RadComboBox>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridButtonColumn ButtonType="PushButton" UniqueName="ManViewButton" Text="View" CommandName="ViewElement"
                    ItemStyle-Width="100px" HeaderStyle-Width="50px">
                </telerik:GridButtonColumn>
                <telerik:GridButtonColumn ButtonType="PushButton" UniqueName="ManMapButton" Text="Find on Map" CommandName="FindOnMap" ItemStyle-Width="100px" HeaderStyle-Width="50px">
                </telerik:GridButtonColumn>
                <telerik:GridTemplateColumn ItemStyle-Width="50px" UniqueName="ManHiddenListOrder" Visible="false">
                    <ItemTemplate>
                        <asp:Label ID="lblManListOrder" runat="server">
                        </asp:Label>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
            <CommandItemTemplate>
                <asp:Button ID="Button1" Text="Add new item" OnClick="Button1_Click" runat="server">
                </asp:Button>
                <asp:Button ID="AddLinecard" Text="Add new linecard" OnClick="AddLinecard_Click" runat="server">
                </asp:Button>
            </CommandItemTemplate>
        </MasterTableView>
        <ClientSettings>
        </ClientSettings>
        
    </telerik:RadGrid>
    <telerik:GridDropDownListColumnEditor ID="GridDropDownListColumnEditor1" runat="server"
        DropDownStyle-Width="110px" />
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
        ProviderName="System.Data.SqlClient"></asp:SqlDataSource>
    <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="select ID, Description from ElementType order by Description">
    </asp:SqlDataSource>
    <asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
        ProviderName="System.Data.SqlClient"></asp:SqlDataSource>
    <asp:SqlDataSource ID="SqlDataSource4" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="select ID,Description from Status">
    </asp:SqlDataSource>
    <asp:SqlDataSource ID="SqlDataSource5" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
        ProviderName="System.Data.SqlClient"></asp:SqlDataSource>
    <asp:HiddenField ID="hdnManListOrder" runat="server" />
    <asp:HiddenField ID="hdnManLinecardSeq" runat="server" />
</asp:Panel>

[Venelin]

Hi AratiS,

I noticed that you are attaching a CSS class to the RadGrid so I assume you are using custom styles. Could you please try to disable them and see if the issue persists. If this does not resolve the problem try to add the following CSS rule to your styles:

.rgMasterTable {
    width: 100% !important;
}

As far as I can see from the attached image it seems that the master table is flowing out of the grid and this cause the visual issue. I tested your code but couldn't get the same effect on my side. You can try to isolate the issue into a small runnable project and send it to us through a support ticket so we can debug it and track the source of the problem.

Please try the above propositions and let me know how it goes.

Regards,
Venelin
Telerik