[Solved] Problem Render Scrolling

[Marcos Vinício de]

Hi, I'm is Brazilian and no have inglesh good.

I developer one grid whit scrolling, but the grid no render rigth when chage scroll.

Missing collumns, lines repeat, ...

My grid:

<telerik:RadGrid ID="gridMapa" runat="server" ForeColor="#333333" CssClass="gridVazia" Skin="" EnableEmbeddedSkins="False" OnItemDataBound="gridMapa_ItemDataBound" OnExcelMLExportRowCreated="gridMapa_ExcelMLExportRowCreated" OnExcelMLExportStylesCreated="gridMapa_ExcelMLExportStylesCreated" Width="95%">
    <FooterStyle BackColor="#5D7B9D" ForeColor="White" />
    <AlternatingItemStyle BackColor="White"  CssClass="Espacamento" ForeColor="#284775" />
    <ItemStyle BackColor="#F7F6F3" CssClass="Espacamento" ForeColor="#333333" Wrap="False" />
    <PagerStyle BackColor="#284775" ForeColor="White" FirstPageImageUrl="PagingFirst.gif" LastPageImageUrl="PagingLast.gif" NextPageImageUrl="PagingNext.gif" PrevPageImageUrl="PagingPrev.gif"/>
    <MasterTableView NoDetailRecordsText="" NoMasterRecordsText="">
        <RowIndicatorColumn FilterImageUrl="Filter.gif" SortAscImageUrl="SortAsc.gif" SortDescImageUrl="SortDesc.gif">
            <HeaderStyle Width="20px" />
        </RowIndicatorColumn>
        <ExpandCollapseColumn CollapseImageUrl="SingleMinus.gif" ExpandImageUrl="SinglePlus.gif" FilterImageUrl="Filter.gif" SortAscImageUrl="SortAsc.gif" SortDescImageUrl="SortDesc.gif">
            <HeaderStyle Width="20px" />
        </ExpandCollapseColumn>
        <EditFormSettings>
            <EditColumn CancelImageUrl="Cancel.gif" EditImageUrl="Edit.gif" FilterImageUrl="Filter.gif"
                InsertImageUrl="Update.gif" SortAscImageUrl="SortAsc.gif" SortDescImageUrl="SortDesc.gif"
                UpdateImageUrl="Update.gif">
            </EditColumn>
        </EditFormSettings>
        <CommandItemSettings AddNewRecordImageUrl="AddRecord.gif" RefreshImageUrl="Refresh.gif" />
        <PagerStyle FirstPageImageUrl="PagingFirst.gif" LastPageImageUrl="PagingLast.gif"
            NextPageImageUrl="PagingNext.gif" PrevPageImageUrl="PagingPrev.gif" />
    </MasterTableView>
    <SelectedItemStyle BackColor="#E2DED6" ForeColor="#333333" />
    <HeaderStyle CssClass="Espacamento" Wrap="False" BackColor="#5D7B9D" ForeColor="White" />
    <EditItemStyle BackColor="#999999" />
    <SortingSettings SortToolTip="Clique aqui para ordenar..." />
    <StatusBarSettings LoadingText="Carregando..." />
    <ExportSettings>
        <Pdf PageHeight="297mm" PageWidth="210mm" PaperSize="A4" />
    </ExportSettings>
    <FilterMenu EnableEmbeddedSkins="False" EnableTheming="True" Skin="">
        <CollapseAnimation Duration="200" Type="OutQuint" />
    </FilterMenu>
</telerik:RadGrid>

Source:

protected void gridMapa_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
    {
        if (e.Item.ItemType == Telerik.Web.UI.GridItemType.AlternatingItem
            || e.Item.ItemType == Telerik.Web.UI.GridItemType.Item
            || e.Item.ItemType == Telerik.Web.UI.GridItemType.Header)
        {
            if (e.Item.ItemType != Telerik.Web.UI.GridItemType.Header)
            {
                if (isVertical)
                {
                    e.Item.Cells[2].BackColor = gridMapa.HeaderStyle.BackColor;
                    e.Item.Cells[2].CssClass = gridMapa.HeaderStyle.CssClass;
                    e.Item.Cells[2].ForeColor = gridMapa.HeaderStyle.ForeColor;
                    e.Item.Cells[2].Font.Bold = true;
                    e.Item.Cells[2].Wrap = false;//gridMapa.HeaderStyle.Wrap;
                }
                if (isVertical && e.Item.ItemIndex > 0)
                {
                    for (int i = 3; i <= (e.Item.Cells.Count - 1); i++)
                    {
                        e.Item.Cells[i].Attributes.Add("onMouseOver", "this.style.cursor='pointer'");
                        if (origem == Origem.email.ToString())
                        {
                            e.Item.Cells[i].Attributes.Add("onClick", "window.open ('" + ConfigurationManager.AppSettings["caminhoPaginaProcessosAbsoluto"] + "?NrProcesso=" + gridMapa.Items[0].Cells[i].Text + "', 'mapaFollowUP'); return false;");
                        }
                        else
                        {
                            e.Item.Cells[i].Attributes.Add("onClick", "location.href = 'processos.aspx?NrProcesso=" + gridMapa.Items[0].Cells[i].Text + "'; return false;");
                        }
                    }
                }
                else
                {
                    e.Item.Attributes.Add("onMouseOver", "this.style.cursor='pointer'");
                    if (origem == Origem.email.ToString())
                    {
                        e.Item.Attributes.Add("onClick", "window.open ('" + ConfigurationManager.AppSettings["caminhoPaginaProcessosAbsoluto"] + "?NrProcesso=" + e.Item.Cells[2].Text + "', 'mapaFollowUP'); return false;");
                    }
                    else
                    {
                        e.Item.Attributes.Add("onClick", "location.href = 'processos.aspx?NrProcesso=" + e.Item.Cells[2].Text + "'; return false;");
                    }
                }
            }
            else
            {
                if (e.Item.Cells[2].Text.ToLower() == "col1")
                {
                    isVertical = true;
                    //e.Item.Visible = false;
                    gridMapa.MasterTableView.ShowHeader = false;
                    gridMapa.MasterTableView.Caption = "Mapa de Processos";

                    for (int i = 2; i <= (e.Item.Cells.Count - 1); i++)
                    {
                        e.Item.Cells[i].Text = "";
                    }
                }
                else
                {
                    isVertical = false;
                    e.Item.Visible = false;
                    gridMapa.MasterTableView.ShowHeader = true;
                    gridMapa.MasterTableView.Caption = "";
                }
            }
            e.Item.Cells[2].Visible = isVertical;
            e.Item.ToolTip = "Clique aqui para ver o processo.";
        }
    }

Afeter binder:

gridMapa.ClientSettings.Scrolling.AllowScroll = true;
                    gridMapa.ClientSettings.Scrolling.UseStaticHeaders = true;
                    gridMapa.ClientSettings.Scrolling.FrozenColumnsCount = 1;

I need for help,

Thanks.

[Marcos Vinício de]

someone help?

[Dimo]

Hello Marcos,

I tried your code and didn't see missing columns or repeating lines. Let me know if I am missing something. By the way, specify which version of RadControls you are using.

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

<script runat="server">

    public bool isVertical = false;

    protected void gridMapa_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
    {
        if (e.Item.ItemType == Telerik.Web.UI.GridItemType.AlternatingItem
            || e.Item.ItemType == Telerik.Web.UI.GridItemType.Item
            || e.Item.ItemType == Telerik.Web.UI.GridItemType.Header)
        {
            if (e.Item.ItemType != Telerik.Web.UI.GridItemType.Header)
            {
                if (isVertical)
                {
                    e.Item.Cells[2].BackColor = gridMapa.HeaderStyle.BackColor;
                    e.Item.Cells[2].CssClass = gridMapa.HeaderStyle.CssClass;
                    e.Item.Cells[2].ForeColor = gridMapa.HeaderStyle.ForeColor;
                    e.Item.Cells[2].Font.Bold = true;
                    e.Item.Cells[2].Wrap = false;//gridMapa.HeaderStyle.Wrap;
                }
                if (isVertical && e.Item.ItemIndex > 0)
                {
                    for (int i = 3; i <= (e.Item.Cells.Count - 1); i++)
                    {
                        e.Item.Cells[i].Attributes.Add("onMouseOver", "this.style.cursor='pointer'");
                    }
                }
                else
                {
                    e.Item.Attributes.Add("onMouseOver", "this.style.cursor='pointer'");
                }
            }
            else
            {
                if (e.Item.Cells[2].Text.ToLower() == "col1")
                {
                    isVertical = true;
                    //e.Item.Visible = false;
                    gridMapa.MasterTableView.ShowHeader = false;
                    gridMapa.MasterTableView.Caption = "Mapa de Processos";

                    for (int i = 2; i <= (e.Item.Cells.Count - 1); i++)
                    {
                        e.Item.Cells[i].Text = "";
                    }
                }
                else
                {
                    isVertical = false;
                    e.Item.Visible = false;
                    gridMapa.MasterTableView.ShowHeader = true;
                    gridMapa.MasterTableView.Caption = "";
                }
            }
            e.Item.Cells[2].Visible = isVertical;
            e.Item.ToolTip = "Clique aqui para ver o processo.";
        }
    }

    protected void gridMapa_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable dt = new DataTable();
        DataRow dr;
        int colsNum = 14;
        int rowsNum = 30;
        string colName = "col";

        for (int j = 1; j <= colsNum; j++)
        {
            dt.Columns.Add(String.Format("{0}{1}", colName, j));
        }

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

            for (int k = 1; k <= colsNum; k++)
            {
                dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);
            }
            dt.Rows.Add(dr);
        }

        (sender as RadGrid).DataSource = dt;
    }

    protected void RadGrid_ItemCreated(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridHeaderItem)
        {
            (e.Item as GridHeaderItem)["Column2"].Controls.Add(new LiteralControl(" <input type=\"button\" class=\"rgSortAsc\" value=\" \" style=\"cursor:default\" />"));
        }
    }

</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 runat="server">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>RadControls for ASP.NET AJAX</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadGrid ID="gridMapa" runat="server" ForeColor="#333333" CssClass="gridVazia" OnNeedDataSource="gridMapa_NeedDataSource" Skin="" EnableEmbeddedSkins="False" OnItemDataBound="gridMapa_ItemDataBound" Width="95%">
    <FooterStyle BackColor="#5D7B9D" ForeColor="White" />
    <AlternatingItemStyle BackColor="White"  CssClass="Espacamento" ForeColor="#284775" />
    <ItemStyle BackColor="#F7F6F3" CssClass="Espacamento" ForeColor="#333333" Wrap="False" />
    <PagerStyle BackColor="#284775" ForeColor="White" FirstPageImageUrl="PagingFirst.gif" LastPageImageUrl="PagingLast.gif" NextPageImageUrl="PagingNext.gif" PrevPageImageUrl="PagingPrev.gif"/>
    <MasterTableView NoDetailRecordsText="" NoMasterRecordsText="">
        <EditFormSettings>
            <EditColumn CancelImageUrl="Cancel.gif" EditImageUrl="Edit.gif" FilterImageUrl="Filter.gif"
                InsertImageUrl="Update.gif" SortAscImageUrl="SortAsc.gif" SortDescImageUrl="SortDesc.gif"
                UpdateImageUrl="Update.gif">
            </EditColumn>
        </EditFormSettings>
        <CommandItemSettings AddNewRecordImageUrl="AddRecord.gif" RefreshImageUrl="Refresh.gif" />
        <PagerStyle FirstPageImageUrl="PagingFirst.gif" LastPageImageUrl="PagingLast.gif"
            NextPageImageUrl="PagingNext.gif" PrevPageImageUrl="PagingPrev.gif" />
    </MasterTableView>
    <ClientSettings>
        <Scrolling AllowScroll="true" UseStaticHeaders="true" FrozenColumnsCount="1" />
    </ClientSettings>
    <SelectedItemStyle BackColor="#E2DED6" ForeColor="#333333" />
    <HeaderStyle CssClass="Espacamento" Wrap="False" BackColor="#5D7B9D" ForeColor="White" />
    <EditItemStyle BackColor="#999999" />
    <SortingSettings SortToolTip="Clique aqui para ordenar..." />
    <StatusBarSettings LoadingText="Carregando..." />
</telerik:RadGrid>

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

Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.