Visible Client-Side (Browser) Rendering / Updates

[CEsquibel]

We are having an issue with the RadGrid where the data is shown outside of its "view port" and progressively resized to fit.  While it is not a loss of data, crash, or otherwise fatal defect, I would like to know if there is a more attractive way for the client side to adjust itself before presenting thethe data?

Thanks,
Chris

[Dimo]

Hello Chris,

Can you please provide some more details about the problem, for example screenshots and your RadGrid declaration?

Best wishes,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[CEsquibel]

Sorry for the delay in getting back to you.  Our markup is below and the following URL is a screenshot.
http://www.herodev.com/out%20of%20bounds.jpg

In this image, you can faintly see where the left and right borders of the desired display.  They end approximately 50% before the data does.  You can also see that the page ends soon after that.  Within the half second following this screen shot, the data will fit itself to the desired display area.

Even though the screen shot is on Firefox, we are able to see the client-side rendering go out of bounds for all of our grids and on all browsers.  Also,


            <telerik:RadGrid ID="RadGridDetails" runat="server" Skin="WebBlue"
                AllowSorting="True" Height="187px"
                OnItemDataBound="RadGridDetails_ItemDataBound"
                OnNeedDataSource="RadGridDetails_NeedDataSource" GridLines="None">
                <MasterTableView AutoGenerateColumns="false" ShowHeadersWhenNoRecords="true"
                    PageSize="100" NoMasterRecordsText="No data" NoDetailRecordsText="No Data">
                    <RowIndicatorColumn>
                        <HeaderStyle Width="15px" />
                    </RowIndicatorColumn>
                    <ExpandCollapseColumn>
                        <HeaderStyle Width="15px" />
                    </ExpandCollapseColumn>
                    <ItemStyle Height="15px" />
                    <AlternatingItemStyle Height="15px" />
                    <Columns>
                        <telerik:GridTemplateColumn HeaderText="Status" UniqueName="columnStatus" DataField="LoadStatus"
                            HeaderStyle-Width="40px" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="40px">
                            <ItemTemplate>
                                <asp:Image ID="imgStatus" runat="server" ImageUrl='<%# Convert.ToBoolean(DataBinder.Eval(Container.DataItem, "LoadStatus"))? "~/Images/Success.png" : "~/Images/Failed.png" %>'
                                    AlternateText="Batch Load Status" />
                            </ItemTemplate>
                            <HeaderStyle Width="40px" />
                            <ItemStyle HorizontalAlign="Center" Width="40px" />
                        </telerik:GridTemplateColumn>
                        <telerik:GridBoundColumn DataField="DetailId" UniqueName="batchDetailsIdCol" Visible="false" />
                        <telerik:GridBoundColumn DataField="DocumentId" UniqueName="columnDocId" Visible="false"
                            HeaderText="DocumentId" ItemStyle-HorizontalAlign="Left" >
                            <ItemStyle HorizontalAlign="Left" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn HeaderText="Name" DataField="Name" UniqueName="compNameCol"
                             />
                        <telerik:GridBoundColumn HeaderText="Total" DataField="TotalInDocument" UniqueName="column1"
                            HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" >
                            <HeaderStyle HorizontalAlign="Right" />
                            <ItemStyle HorizontalAlign="Right" />
                        </telerik:GridBoundColumn>
                        <telerik:GridHyperLinkColumn HeaderText="# Processed"
                            DataTextField="Processed" UniqueName="hypColProcessed"
                            HeaderStyle-HorizontalAlign="Right"  ItemStyle-HorizontalAlign="Right" >
                            <HeaderStyle HorizontalAlign="Right" />
                            <ItemStyle HorizontalAlign="Right" />
                        </telerik:GridHyperLinkColumn>
                        <telerik:GridHyperLinkColumn HeaderText="# Failed" DataTextField="Failed" UniqueName="hypColFailed"
                            HeaderStyle-HorizontalAlign="Right"  ItemStyle-HorizontalAlign="Right" >
                            <HeaderStyle HorizontalAlign="Right" />
                            <ItemStyle HorizontalAlign="Right" />
                        </telerik:GridHyperLinkColumn>
                        <telerik:GridTemplateColumn HeaderText="Export" DataField="ExportStatus" UniqueName="columnExportStatus"
                            HeaderStyle-HorizontalAlign="Center"  ItemStyle-HorizontalAlign="Center" >
                            <ItemTemplate>
                                <asp:Image ID="imgStatusExport" runat="server" ImageUrl='<%# Convert.ToBoolean(DataBinder.Eval(Container.DataItem, "ExportStatus"))? "~/Images/Success.png" : "~/Images/Failed.png" %>'
                                    AlternateText="Export Status" />
                            </ItemTemplate>
                            <HeaderStyle HorizontalAlign="Center" />
                            <ItemStyle HorizontalAlign="Center" />
                        </telerik:GridTemplateColumn>
                        <telerik:GridBoundColumn HeaderText="Export Date" UniqueName="columnExportDate" DataField="ExportDate"/>
                        <telerik:GridBoundColumn UniqueName="docName" DataField="CompleteName" Visible="false" />
                        <telerik:GridBoundColumn DataField="UnmappedCount" EmptyDataText="&amp;nbsp;" HeaderStyle-HorizontalAlign="Center"
                            HeaderText="Unmapped Elements" UniqueName="colUnmappedCount" HeaderStyle-Width="60px">
                            <ItemStyle HorizontalAlign="Center" />
                        </telerik:GridBoundColumn>
                        <telerik:GridButtonColumn ImageUrl="~/Images/DoubleRightArrowHS.png"
                            UniqueName="btnColMapper" ButtonType="ImageButton" HeaderStyle-Width="30px">
                            <ItemStyle HorizontalAlign="Center" />
                        </telerik:GridButtonColumn>
                    </Columns>
                </MasterTableView>
                <ClientSettings EnablePostBackOnRowClick="false">
                    <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                    <Selecting AllowRowSelect="true" EnableDragToSelectRows="false" />
                </ClientSettings>
                <FilterMenu EnableTheming="True">
                    <CollapseAnimation Duration="200" Type="OutQuint" />
                </FilterMenu>
            </telerik:RadGrid>

[Dimo]

Hi CEsquibel,

Thanks for the RadGrid declaration. I tested it and RadGrid appears as expected. Please check for Javascript errors.

Here is my test page:

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<script runat="server">
protected void RadGridDetails_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    DataTable dt = new DataTable();
    DataRow dr;
    int rowsNum = 200;
    string[][] colsInfo = {
        new string[] { "LoadStatus", "string" },
        new string[] { "DetailId", "number" },
        new string[] { "DocumentId", "number" },
        new string[] { "Name", "string" },
        new string[] { "TotalInDocument", "number" },
        new string[] { "Processed", "string" },
        new string[] { "Failed", "string" },
        new string[] { "ExportStatus", "string" },
        new string[] { "ExportDate", "date" },
        new string[] { "CompleteName", "string" },
        new string[] { "UnmappedCount", "number" }
    };

    for (int i = 0; i < colsInfo.Length; i++)
    {
        dt.Columns.Add(colsInfo[i][0]);
    }

    for (int j = 1; j <= rowsNum; j++)
    {
        dr = dt.NewRow();

        for (int k = 0; k < colsInfo.Length; k++)
        {
            switch (colsInfo[k][1])
            {
                case "string" :
                    dr[colsInfo[k][0]] = String.Format("{0} Row{1}", colsInfo[k][0], j);
                    break;
                case "number" :
                    dr[colsInfo[k][0]] = j;
                    break;
                case "date":
                    dr[colsInfo[k][0]] = DateTime.Now.ToShortDateString();
                    break;
                default:
                    break;
            }
        }
        dt.Rows.Add(dr);
    }

    (sender as RadGrid).DataSource = dt;
}
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>RadControls for ASP.NET AJAX</title>
<style type="text/css">

div.GridHeaderDiv_WebBlue
{
    background:none transparent;
}

</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadGrid ID="RadGridDetails" runat="server" Skin="WebBlue"
                AllowSorting="True" Height="187px"
                OnNeedDataSource="RadGridDetails_NeedDataSource" GridLines="None">
                <MasterTableView AutoGenerateColumns="false" ShowHeadersWhenNoRecords="true"
                    PageSize="100" NoMasterRecordsText="No data" NoDetailRecordsText="No Data">
                    <RowIndicatorColumn>
                        <HeaderStyle Width="15px" />
                    </RowIndicatorColumn>
                    <ExpandCollapseColumn>
                        <HeaderStyle Width="15px" />
                    </ExpandCollapseColumn>
                    <ItemStyle Height="15px" />
                    <AlternatingItemStyle Height="15px" />
                    <Columns>
                        <telerik:GridTemplateColumn HeaderText="Status" UniqueName="columnStatus" DataField="LoadStatus"
                            HeaderStyle-Width="40px" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="40px">
                            <ItemTemplate>
                                ItemTemplate
                            </ItemTemplate>
                            <HeaderStyle Width="40px" />
                            <ItemStyle HorizontalAlign="Center" Width="40px" />
                        </telerik:GridTemplateColumn>
                        <telerik:GridBoundColumn DataField="DetailId" UniqueName="batchDetailsIdCol" Visible="false" />
                        <telerik:GridBoundColumn DataField="DocumentId" UniqueName="columnDocId" Visible="false"
                            HeaderText="DocumentId" ItemStyle-HorizontalAlign="Left" >
                            <ItemStyle HorizontalAlign="Left" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn HeaderText="Name" DataField="Name" UniqueName="compNameCol"
                             />
                        <telerik:GridBoundColumn HeaderText="Total" DataField="TotalInDocument" UniqueName="column1"
                            HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" >
                            <HeaderStyle HorizontalAlign="Right" />
                            <ItemStyle HorizontalAlign="Right" />
                        </telerik:GridBoundColumn>
                        <telerik:GridHyperLinkColumn HeaderText="# Processed"
                            DataTextField="Processed" UniqueName="hypColProcessed"
                            HeaderStyle-HorizontalAlign="Right"  ItemStyle-HorizontalAlign="Right" >
                            <HeaderStyle HorizontalAlign="Right" />
                            <ItemStyle HorizontalAlign="Right" />
                        </telerik:GridHyperLinkColumn>
                        <telerik:GridHyperLinkColumn HeaderText="# Failed" DataTextField="Failed" UniqueName="hypColFailed"
                            HeaderStyle-HorizontalAlign="Right"  ItemStyle-HorizontalAlign="Right" >
                            <HeaderStyle HorizontalAlign="Right" />
                            <ItemStyle HorizontalAlign="Right" />
                        </telerik:GridHyperLinkColumn>
                        <telerik:GridTemplateColumn HeaderText="Export" DataField="ExportStatus" UniqueName="columnExportStatus"
                            HeaderStyle-HorizontalAlign="Center"  ItemStyle-HorizontalAlign="Center" >
                            <ItemTemplate>
                                ItemTemplate
                            </ItemTemplate>
                            <HeaderStyle HorizontalAlign="Center" />
                            <ItemStyle HorizontalAlign="Center" />
                        </telerik:GridTemplateColumn>
                        <telerik:GridBoundColumn HeaderText="Export Date" UniqueName="columnExportDate" DataField="ExportDate"/>
                        <telerik:GridBoundColumn UniqueName="docName" DataField="CompleteName" Visible="false" />
                        <telerik:GridBoundColumn DataField="UnmappedCount" EmptyDataText="&amp;nbsp;" HeaderStyle-HorizontalAlign="Center"
                            HeaderText="Unmapped Elements" UniqueName="colUnmappedCount" HeaderStyle-Width="60px">
                            <ItemStyle HorizontalAlign="Center" />
                        </telerik:GridBoundColumn>
                        <telerik:GridButtonColumn ImageUrl="~/Images/DoubleRightArrowHS.png"
                            UniqueName="btnColMapper" ButtonType="ImageButton" HeaderStyle-Width="30px">
                            <ItemStyle HorizontalAlign="Center" />
                        </telerik:GridButtonColumn>
                    </Columns>
                </MasterTableView>
                <ClientSettings EnablePostBackOnRowClick="false">
                    <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                    <Selecting AllowRowSelect="true" EnableDragToSelectRows="false" />
                </ClientSettings>
            </telerik:RadGrid>

</form>
</body>
</html>

Greetings,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[CEsquibel]

There were no JavaScript errors, and there are none present today.  Could I bother you for a "demo" webpage that I could browse to?  I am curios to know if the simple "weight" of the page is causing this effect.

[Dimo]

Hi Chris,

Well, you can add the sample page pasted in my previous post to a new ASP.NET AJAX-enabled website and you will be able to open it and compare. That's why I provided it.

Greetings,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Chris]

I am having the same problem as the original poster.

In my case, I have a GridButtonColumn that is an ImageButton.  Every time the grid rebinds, the grid will "blink" as it resizes itself.  If I change it to a LinkButton, there is no "blinking" as it renders.

I only see this in FireFox, IE renders fine with no "blinking".

BTW, I see the same rendering issues with the code sample provided above.

Thanks

[Dimo]

Hi Chris,

I can't reproduce any blinking with the page I have provided above. Please send us a complete runnable example.

If you want to prevent the RadGrid resizing on the client (when using scrolling with static headers), please set ScrollHeight (in ClientSettings > Scrolling) instead of Height.

Regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.