This is a migrated thread and some comments may be shown as answers.

Scrolling very slow

8 Answers 128 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 19 Dec 2008, 02:30 PM
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(); 

8 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 22 Dec 2008, 08:36 AM
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.


0
Shinu
Top achievements
Rank 2
answered on 22 Dec 2008, 08:39 AM
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.


0
Mike
Top achievements
Rank 1
answered on 22 Dec 2008, 02:07 PM
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..
0
Georgi Krustev
Telerik team
answered on 22 Dec 2008, 04:38 PM
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.
0
Mike
Top achievements
Rank 1
answered on 22 Dec 2008, 04:44 PM
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();  
    } 
0
Georgi Krustev
Telerik team
answered on 23 Dec 2008, 09:27 AM
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.
0
Mike
Top achievements
Rank 1
answered on 23 Dec 2008, 01:35 PM
Have you got a good example?  I need the viewstate for my sorting, grouping and so on.
0
Georgi Krustev
Telerik team
answered on 24 Dec 2008, 08:57 AM
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.
Tags
Grid
Asked by
Mike
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Mike
Top achievements
Rank 1
Georgi Krustev
Telerik team
Share this question
or