Unplanned
Last Updated: 29 Oct 2020 12:39 by ADMIN
Aaron
Created on: 29 Oct 2020 11:17
Category: Grid
Type: Bug Report
1
Radgrid column widths are cut off on initial load
Set up to reproduce:
<telerik:RadAjaxPanel runat="server" ID="panel" LoadingPanelID="RadAjaxLoadingPanel1" RenderMode="Inline" EnableAJAX="true">
    <div class="row">
        <asp:Button runat="server" ID="btnLoad" Text="Load Data" OnClick="btnLoad_Click" />
    </div>

    <telerik:RadGrid runat="server" ID="radGrid" CssClass="radgrid" Skin="Bootstrap"
        ClientSettings-Scrolling-AllowScroll="true"
        ClientSettings-Scrolling-ScrollHeight="800"
        ClientSettings-Scrolling-UseStaticHeaders="true"
        ClientSettings-EnableAlternatingItems="false"
        HeaderStyle-Wrap="false" AllowPaging="true" PageSize="50"
        ItemStyle-Wrap="false" AllowSorting="true"
        OnNeedDataSource="radGrid_NeedDataSource" AllowMultiRowSelection="false"
        HeaderStyle-BackColor="White">
        <ClientSettings>
            <Selecting AllowRowSelect="true" />

        </ClientSettings>
        <MasterTableView>
            <Columns>
                <telerik:GridTemplateColumn UniqueName="colEdit" AllowFiltering="false" Exportable="false">
                    <ItemTemplate>
                        <asp:LinkButton CssClass="link-button" runat="server" ID="btnEdit">Edit</asp:LinkButton>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn UniqueName="colDelete" AllowFiltering="false" Exportable="false">
                    <ItemTemplate>
                        <asp:LinkButton CssClass="link-button" ID="btnDelete" runat="server">Delete</asp:LinkButton>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>

</telerik:RadAjaxPanel>
Code-behind:
protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        radGrid.Visible = false;
    }
}

protected void btnLoad_Click(object sender, EventArgs e)
{
    radGrid.Visible = true;
    radGrid.Rebind();
}
protected void radGrid_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
{
    var grid = sender as RadGrid;
    grid.DataSource = LoadData();
}
private DataTable LoadData()
{
    DataTable tbl = new DataTable();
    tbl.Columns.Add(new DataColumn("ADFAFD", typeof(string)));
    tbl.Columns.Add(new DataColumn("ADFADFADF", typeof(string)));
    tbl.Columns.Add(new DataColumn("ADFADFADFADFASDF", typeof(string)));
    tbl.Columns.Add(new DataColumn("HGDH", typeof(string)));
    tbl.Columns.Add(new DataColumn("ADFADF ADFADFADF", typeof(string)));
    tbl.Columns.Add(new DataColumn("ADF ADSFADF", typeof(string)));
    tbl.Columns.Add(new DataColumn("FKHDGJHFGJH", typeof(string)));
    tbl.Columns.Add(new DataColumn("SHFSFHSGH", typeof(string)));
    tbl.Columns.Add(new DataColumn("ADF ASDFASDF ASDFADSF", typeof(string)));
    tbl.Rows.Add(new object[] { "ADFADF", "ASDFADFAFD", "ADFADF", "ADFADFADF ADFADFADFADF ADFADF ADFADFADF ADFADFADFADF ADFADF", "ADFADF", "ASDFADFAFD", "ADFADF", "ADFADFADF ADFADFADFADF ADFADF"});
    tbl.Rows.Add(new object[] { "ADFADF", "ASDFADFAFD", "ADFADF", "ADFADFADF ADFADFADFADF ADFADF", "ADFADF", "ASDFADFAFD", "ADFADF", "ADFADFADF ADFADFADFADF ADFADF"});
    return tbl;
}
1 comment
ADMIN
Doncho
Posted on: 29 Oct 2020 12:39

When RadGrid is initially loaded with Visible='false' and afterward it is set to Visible='true' via Ajax Request, the embedded styles for the Grid are being loaded after the auto-resizing of the grid columns. This causes inconsistency of the appearance until a postback is performed.

To work around the issue, the styles that affect the column width should be loaded in advance.

Here are two possible approaches:

  1. Subscribe to the OnLoad server event of the RadGrid and force the registration of its CSS References:
    <telerik:RadGrid runat="server" ID="radGrid" OnLoad="radGrid_Load"...>
    Code-behid:
    protected void radGrid1_Load(object sender, EventArgs e)
    {
        SkinRegistrar.RegisterCssReferences(sender as RadGrid);
    }
  2. Declare the needed styles in the markup of the page. This includes adding skin-specific styles therefore this approach should vary depending on the skin set to RadGrid.
    Sample CSS to work around the issue with Skin="Bootstrap":
    .RadGrid .rgHeader, .RadGrid th.rgResizeCol {
        font-weight: normal
    }
    
    .RadGrid_Bootstrap .rgHeader,
    .RadGrid_Bootstrap th.rgResizeCol,
    .RadGrid_Bootstrap .rgHeaderWrapper,
    .RadGrid_Bootstrap .rgMultiHeaderRow th.rgHeader,
    .RadGrid_Bootstrap .rgMultiHeaderRow th.rgResizeCol {
        border: 0;
        border-bottom: 1px solid;
        border-left: 1px solid
    }
    
    .RadGrid_Bootstrap .rgRow > td,
    .RadGrid_Bootstrap .rgAltRow > td,
    .RadGrid_Bootstrap .rgEditRow > td,
    .RadGrid_Bootstrap .rgFooter > td,
    .RadGrid_Bootstrap .rgFilterRow > td,
    .RadGrid_Bootstrap .rgHeader, .RadGrid_Bootstrap .rgResizeCol, .RadGrid_Bootstrap .rgGroupHeader td {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .RadGrid_Bootstrap {
        border-radius: 4px;
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif
    }
    
        .RadGrid_Bootstrap .rgRow > td, .RadGrid_Bootstrap .rgAltRow > td {
            border-style: solid;
            border-width: 0 0 1px 1px
        }

Kind regards,
Doncho
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.