[Solved] Scrolling very slow

[Mike]

I have a grid with 200 rows, there is no paging and that is not an option.  The issue is that sometimes users do a search and return +-200 rows.  When it does this the scrolling is terrible, I mean it takes about 10-15 seconds just to move the scrollbar 5-10 rows.  What can be done to resolve this?

Here is my Code

<telerik:RadGrid ID="RadGrid1"
            AllowMultiRowSelection="True"
            AllowSorting="True"
            AllowNaturalSort="True"
            AllowPaging="False"
            AutoGenerateColumns="False"
            AlternatingItemStyle-HorizontalAlign="Center"
            BackColor="#ffffff"
            CellPadding="2"
            CellSpacing="2"
            EnableEmbeddedSkins="False"
            GridLines="None"
            GroupingEnabled="True"
            HeaderStyle-Height="20"
            Height="470px"
            ItemStyle-HorizontalAlign="Center"
            OnSortCommand="RadGrid1_SortCommand"
            OnNeedDataSource="RadGrid1_NeedDataSource"
            OnItemDataBound="RadGrid1_ItemDataBound"
            ShowFooter="True"
            ShowHeader="True"
            ShowGroupPanel="True"
            ShowStatusBar="True"
            Skin="MySkin"
            Width="100%"
            Runat="server">
<MasterTableView AllowMultiColumnSorting="True" DataKeyNames="COLUMN1, COLUMN2" TableLayout="Fixed" HeaderStyle-Wrap="false" >
<Columns>
      <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" HeaderStyle-Width="25" />
      <telerik:GridBoundColumn DataField="COLUMN1" Visible="False" />
      <telerik:GridBoundColumn DataField="COLUMN2" Visible="False" />
       <telerik:GridBoundColumn DataField="COLUMN3" Visible="False" />
      <telerik:GridBoundColumn DataField="COLUMN4" HeaderText="Column 4" HeaderButtonType="TextButton" HeaderStyle-Width="200px" ItemStyle-HorizontalAlign="Left" SortExpression="COLUMN4" />
      <telerik:GridBoundColumn DataField="COLUMN5" HeaderText="Column 5" HeaderStyle-Width="100" SortExpression="COLUMN5" />
      <telerik:GridBoundColumn DataField="COLUMN6" HeaderText="Column 6" HeaderButtonType="TextButton"  ItemStyle-HorizontalAlign="Center" SortExpression="COLUMN6" />
      <telerik:GridBoundColumn DataField="COLUMN7" HeaderText="Column 7" HeaderButtonType="TextButton"  ItemStyle-HorizontalAlign="Center" SortExpression="COLUMN7" />
       <telerik:GridTemplateColumn DataField="COLUMN8" HeaderText="Column 8" ItemStyle-HorizontalAlign="left" SortExpression="COLUMN8" >
          <ItemTemplate>
             <asp:Image ID="ImageErrorMessage" Visible="false" runat="server" />
              <asp:Label ID="LabelRefreshStatus" runat="server" />
               <telerik:RadToolTip ID="RadToolTipMessage" TargetControlID="LabelRefreshStatus" RelativeTo="Element" Position="BottomLeft" runat="server" />
              <telerik:RadToolTip ID="RadToolTipImage" TargetControlID="ImageErrorMessage" RelativeTo="Element" Position="BottomLeft" runat="server" />
          </ItemTemplate>
      </telerik:GridTemplateColumn>
      <telerik:GridTemplateColumn DataField="COLUMN9" HeaderText="Column 9" ItemStyle-HorizontalAlign="center" SortExpression="COLUMN9" >
          <ItemTemplate>
              <asp:Label ID="LabelBatchType" runat="server" />
          </ItemTemplate>
      </telerik:GridTemplateColumn>
      <telerik:GridBoundColumn DataField="COLUMN10" HeaderText="Column 10" HeaderButtonType="TextButton"  ItemStyle-HorizontalAlign="Center" DataFormatString="{0:MM/dd/yyyy}"  SortExpression="COLUMN10"/>
      <telerik:GridBoundColumn DataField="COLUMN11" HeaderText="Column 11" HeaderButtonType="TextButton"  ItemStyle-HorizontalAlign="Left" SortExpression="COLUMN11" />
      <telerik:GridBoundColumn DataField="COLUMN12" HeaderText="Column 12" HeaderButtonType="TextButton"  ItemStyle-HorizontalAlign="Left" SortExpression="COLUMN12" />
      <telerik:GridBoundColumn DataField="COLUMN13" HeaderText="Column 13" HeaderButtonType="TextButton" HeaderStyle-Width="200"  ItemStyle-HorizontalAlign="Left" SortExpression="COLUMN13" />
      <telerik:GridBoundColumn DataField="COLUMN14" HeaderText="Column 14" HeaderButtonType="TextButton" HeaderStyle-Width="150px" ItemStyle-HorizontalAlign="center" HeaderStyle-Wrap="false" DataFormatString="{0:MM/dd/yyyy}" SortExpression="CREDIT_DATE" />
      <telerik:GridBoundColumn DataField="COLUMN15" HeaderText="Column 15" HeaderButtonType="TextButton" HeaderStyle-Width="200" ItemStyle-HorizontalAlign="Left" SortExpression="COLUMN15" />
      <telerik:GridBoundColumn DataField="COLUMN16" HeaderText="Column 16" HeaderButtonType="TextButton" ItemStyle-HorizontalAlign="center"  SortExpression="COLUMN16" />
      <telerik:GridBoundColumn DataField="COLUMN17" HeaderText="Column 17" HeaderButtonType="TextButton"  ItemStyle-HorizontalAlign="Left" SortExpression="COLUMN17" />
      <telerik:GridBoundColumn DataField="COLUMN18" HeaderText="Column 18" HeaderButtonType="TextButton"  ItemStyle-HorizontalAlign="Center" DataFormatString="{0:MM/dd/yyyy}" SortExpression="COLUMN18" />
  </Columns>
  <HeaderStyle Width="100px" />
       </MasterTableView>
          <ClientSettings AllowColumnsReorder="True" AllowDragToGroup="True" ReorderColumnsOnClient="True" AllowRowHide="True">
              <Resizing AllowColumnResize="True" AllowRowResize="False" ResizeGridOnColumnResize="False" ClipCellContentOnResize="True" EnableRealTimeResize="False" />
              <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True" FrozenColumnsCount="2" />
              <Selecting AllowRowSelect="True" />
          </ClientSettings>
</telerik:RadGrid>

 Code Behind:

ListBLL listInfo = new ListBLL();
DataTable dataTable = new DataTable();
dataTable = listInfo.BatchStatusSearch(parameter1, parameter2, parameter3);
ViewState["MyDataSource"] = dataTable
RadGrid1.DataSource = dataTable
RadGrid1.DataBind();

[Shinu]

Hi Mike,

I hope you are  binding the Grid in the NeedDataSource event. In the above code you are calling DataBind() method while binding the Grid. Try removing that and see if it makes any difference.
Note: You should never call the DataBind() method from inside the NeedDataSource handler or mix simple data-binding mode with advanced data-binding.
Advanced data-binding

Shinu.

[Shinu]

Hi Mike,

I hope you are  binding the Grid in the NeedDataSource event. In the above code you are calling DataBind() method while binding the Grid. Try removing that and see if it makes any difference.
Note: You should never call the DataBind() method from inside the NeedDataSource handler or mix simple data-binding mode with advanced data-binding.
Advanced data-binding

Shinu.

[Mike]

Ok! I am now confused.  I have the following in my code behind.

There is a search on this screen that calls my BindGrid and I need to enable sorting.

protected void ButtonSearch_Click(object obj, EventArgs e)
 {
    BindGrid();
 }

private void BindGrid()
 {
   ViewState["MyDataSource"] = dataTableOne;
   RadGrid1.DataSource = dataTableOne;
   RadGrid1.DataBind();
 }

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
 {
  bind some web controls
 }

   protected void RadGrid1_SortCommand(object source, Telerik.Web.UI.GridSortCommandEventArgs e)
    {
        GridSortExpression sortExpr = new GridSortExpression();
        sortExpr.FieldName = e.SortExpression;
        if (Convert.ToString(e.NewSortOrder) == "None")
        {
            sortExpr.SortOrder = GridSortOrder.Ascending;
        }
        else
        {
            sortExpr.SortOrder = e.NewSortOrder;
        }
        RadGrid1.Rebind();
    }

    protected void RadGrid1_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
    {
        string gridSortString = this.RadGrid1.MasterTableView.SortExpressions.GetSortString();
        string text = "Grid sort expression: " + gridSortString;
        DataSourceSelectArguments args = new DataSourceSelectArguments(gridSortString);
        RadGrid1.DataSource = ViewState["MyDataSource"];
    }

How should I bind to the RadGrid without using the DataBind?   I removed it in my BindGrid() and the grid never displays any rows..

[Georgi Krustev]

Hello Mike,

Your approach is almost right. Please consider not using RadGridInstance.DataBind() when implementing Advanced Data-Binding with NeedDataSource handling. For further information you can refer to this link.

Here is a modified code snippet:

private void BindGrid()
 {
   ViewState["MyDataSource"] = dataTableOne;
   RadGrid1.Rebind();
 }

When you call Rebind() method the OnNeedDataSource event fires. So every time you call Rebind() the grid will be recreated from the viewstate and will be bound to data.

To optimize your performance, please consider decreasing the number of your columns as much as possible when using horizontal scrolling with frozen columns. You may also review the reply from my colleague Sebastian in this forum thread.

Best regards,
Georgi Krustev
the Telerik team

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

[Mike]

Georgi,

Ok, does this look right?

  public void BindGrid()
    {
      MyBLL listOne = new MyBLL ();
      DataTable dataTableOne = new DataTable();

      dataTableOne = listOne.GetSomeData(searchParamterOne, searchParameterTwo, searchParameterThree);
       ViewState["MyDataSource"] = dataTableOne;
       RadGrid1.Rebind();
    }

  protected void RadGrid1_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
    {
        string gridSortString = this.RadGrid1.MasterTableView.SortExpressions.GetSortString();
        string text = "Grid sort expression: " + gridSortString;
        DataSourceSelectArguments args = new DataSourceSelectArguments(gridSortString);
        RadGrid1.DataSource = ViewState["MyDataSource"]; //  ViewState["MyDataSource"];
    }

    protected void ButtonSearch_Click(object obj, EventArgs e)
    {
        BindGrid();
    }

[Georgi Krustev]

Hello Mike,

Yes, this is the right approach.

But please, consider not to use ViewState as a data container in order to increase your performance. Instead you may use Cache or Session variable for data source storage.

Best regards,
Georgi Krustev
the Telerik team

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

[Mike]

Have you got a good example?  I need the viewstate for my sorting, grouping and so on.

[Georgi Krustev]

Hello Mike,

I have attached a sample project, which demonstrates the required functionality. Please examine it and tell me if I am missing something.

Also consider limiting what you put in the ViewState, otherwise the big amount of ViewState can really slow down the client-side performance. I suggest that you use Session or Cache variable.

We hope that you appreciate our assistance, although you will probably agree that this is a bit out of the scope of our control.

Regards,
Georgi Krustev
the Telerik team

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