Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Grid > Allow vertical scroll but not horizontal scroll in IE8

• Kev

  Posted on Jun 9, 2011 (permalink)

  The grid is shown well on firefox 3.5 and 4, but when I open it on IE8, it always have some problem.
  
  I want the grid to:
  
  - Load huge data, can be more than 30 columns and thousands rows
  - Auto fit the column width
  - Allow user to set the column width and row height
  - Allow Vertical scrolling
  - Do not allow horizontal scrolling  (no matter how many columns there are)
  - Show header and footer
  
  I have seen the demo in http://demos.telerik.com/aspnet-ajax/grid/examples/client/resizing/defaultcs.aspx and http://demos.telerik.com/aspnet-ajax/grid/examples/client/scrolling/defaultcs.aspx.
  
  Now the setting is    
  <telerik:RadGrid ID="gridReports_Telerik" runat="server"  
                  EnableAjaxSkinRendering="true"
                  GridLines="Horizontal" CellPadding="0" BorderStyle="None"
                  ClientSettings-AllowColumnHide="true" ClientSettings-EnableRowHoverStyle="true"
                  ShowStatusBar="true" ShowHeader="true" AllowSorting="true"
                  ShowFooter="true" RegisterWithScriptManager="true"
                  EnableViewState="true"
                  AllowFilteringByColumn="false"
                  AllowMultiRowSelection="true"
                  FilterItemStyle-Width="40" >
          <PagerStyle Mode="NextPrevAndNumeric" />
          <GroupingSettings CaseSensitive="false" ShowUnGroupButton="true" />
          <MasterTableView TableLayout="Auto">
          </MasterTableView>
          <ClientSettings>
              <Scrolling EnableVirtualScrollPaging="false" />
              <Scrolling AllowScroll="true" UseStaticHeaders="true" />
              <Selecting AllowRowSelect="true" EnableDragToSelectRows="true" />
              <Resizing AllowColumnResize="true" EnableRealTimeResize="false"  ShowRowIndicatorColumn="false"
                        ResizeGridOnColumnResize="false" AllowRowResize="false" ClipCellContentOnResize="false" />
              
          </ClientSettings>
      
      </telerik:RadGrid>
  
  I have tried the following demos:
  
  -The Current Setting , the horizontal scroll is on. (Photo 1)
   
  - If I set the TableLayout to "Fixed" and set a width for each column, it can show all columns and display normally, but the width column is not set automatically (fulfill the data length).
  
  - If I set UseStaticHeaders to false, the grid total width become shorter and is not enough to show all data so that the horizontal scroll is on. (Photo 2)
  
  

  Attached files

  • Grid1.JPG
  • Grid2.JPG

• Pavlina Pavlina

  Posted on Jun 9, 2011 (permalink)

  Hello Kev,
  
  To achieve the desired behavior  you can use one of the ways pointed below:
  
  1) Set TableLayout="Fixed" to the MasterTableView and do not set any Width to the MasterTableView.
  
  2) Set a Width to the MasterTableView (in pixels), which is less than the Width of RadGrid. The difference between the two widths depends on the skin and the cell paddings.
  
  3) Do not set any Width to the MasterTableView, but set Widths to all columns, no matter whether it is the same for all columns or not. Note that the total width of the columns should be smaller than the width of the grid itself.  
  
  Let us know how it goes.
  
  Greetings,
  Pavlina
  the Telerik team

  Consider using RadControls for ASP.NET AJAX (built on top of the ASP.NET AJAX framework) as a replacement for the Telerik ASP.NET Classic controls, See the product support lifecycle here.

• Kev

  Posted on Jun 9, 2011 (permalink)

  Thank you. The result is attached.
  
  If the TableLayout is set to Fixed, the horizontal scroll bar will not be shown in most cases, but the column width cannot be calculated automatically.
  
  In test 2, I have tried         <MasterTableView TableLayout="Fixed" Width="500px" > and         <MasterTableView TableLayout="Fixed" Width="2000px" > two cases, 2000px make the table display quite normal, but what happen to the 500px one? It looks very strange.
  
  In test 3, I have tried <telerik:RadGrid ......  HeaderStyle-Width="20" > and <telerik:RadGrid ......  HeaderStyle-Width="40" >, the display is normal but some data cannot be completed shown.
  
  
  I have different type of reports want to be shown, as the data in loaded from the database which is input by user, it is quite not possible for me to input each column width one by one as I don't know how long they will input. Also, different report have different count of columns (from 5 columns to 35 columns is possible), it is not a good method to set the total width of the grid.
  
  I have also do some test on IE9 using Windows 7, but the problem is more than in IE8, is it due to some changes in HTML5?
  
  Thank you for looking at my problem.

  Attached files

  • GridTest-1.JPG
  • GridTest-2-500px.JPG
  • GridTest-2-2000px.JPG
  • GridTest-3-20.JPG
  • GridTest-3-40.JPG

• Pavlina Pavlina

  Posted on Jun 15, 2011 (permalink)

  Hi Kev,
  
  To restrict the horizontal bar from being rendered, try setting the width of the MasterTableView  to 98%:
  ASPX:
  

  <MasterTableView TableLayout="Auto" Width="98%">

    </MasterTableView>

  
  Give this suggestion a try and let me know about the result.
  
  Greetings,
  Pavlina
  the Telerik team

  Consider using RadControls for ASP.NET AJAX (built on top of the ASP.NET AJAX framework) as a replacement for the Telerik ASP.NET Classic controls, See the product support lifecycle here.

• Kev

  Posted on Jun 20, 2011 (permalink)

  Hi Pavlina,
  
  When I set the width to 98%, some part on the header and footer disappear. It can sometimes be fixed if I rearrange the window size.
  
  I think it is quite close to what I want, but I can't think of the reason of this problem. Thank you very much.
  
  p.s. I find there are some differences in display in different computer as the client show me a different picture of the same page.
  
  Best Regards,
  Kev

  Attached files

  • GridTest-4.JPG

• Pavlina Pavlina

  Posted on Jun 20, 2011 (permalink)

  Hello Kev,
  
  Could you please try to isolate the problem in a sample project? This way we will be able to debug it locally and investigate the cause of the problem.
  Isolating a problem in a sample project
  
  Thank you.
  
  Kind regards,
  Pavlina
  the Telerik team

  Consider using RadControls for ASP.NET AJAX (built on top of the ASP.NET AJAX framework) as a replacement for the Telerik ASP.NET Classic controls, See the product support lifecycle here.

• Kev

  Posted on Jun 22, 2011 (permalink)

  Hi Pavlina,
  
  I am using mojoportal as the website creator. As mojoportal need to load data from the database, it needs many work to copy all the simplified things needed. Can I first simplify the related ascx and cs file and see whether it can reproduce the problem.
  
  Should I create a ticket when I send the file?
  
  Thank you very much.
  
  Regards,
  Kev

• Pavlina Pavlina

  Posted on Jun 23, 2011 (permalink)

  Hi Kev,
  
  You can attach the files to a new support thread and send them to us. We will test them locally and try to find a working solution for you.
  
  All the best,
  Pavlina
  the Telerik team

  Consider using RadControls for ASP.NET AJAX (built on top of the ASP.NET AJAX framework) as a replacement for the Telerik ASP.NET Classic controls, See the product support lifecycle here.

• Kev

  Posted on Jun 27, 2011 (permalink)

  Hi Pavlina,
  
  I am preparing the files but I need some time as the work is busy.
  
  I have another questions about the grid display in IE, after I use the auto sizing, when the header is long and the content is short, the display is not perfect like the photo "grid problem2.jpg". When I use Chinese character it happen most. As one Chinese character can use up one line, the header use up a lot of space which is unnecessary. I want to display as the photo "grid problem2-2.jpg", is there a method to set the maximum height the header can use, or some more clever auto-sizing method?
  
  Also, I try to change the text "No records to display" if there is no data to display. If I use <MasterTableView NoMasterRecordsText="Hello" > in the ascx file, the text can be changed to "Hello", but when I want to change in code it takes no effect.(It still shows "Hello")
  
          RadGrid Grid = (RadGrid)sender;
          int rowCount = Grid.Items.Count;
          if (rowCount == 0)
          {
              gridReports_Telerik.MasterTableView.NoMasterRecordsText = "Test";
          }
  
  What is the reason of this problem and solution as I want to show different message for different table if no records to display.
  
  
  Thank you for answering my questions.
  
  Regards,
  Kev 

  Attached files

  • Grid-Problem2.JPG
  • Grid-Problem2-2.JPG

• Pavlina Pavlina

  Posted on Jun 27, 2011 (permalink)

  Hi Kev,
  
  You can refer to the forum thread below which elaborates on minimizing the header height:
  http://www.telerik.com/community/forums/aspnet-ajax/grid/minimizing-the-height-of-header-column.aspx
  
  Regarding your next question - please try the code snippet below:
  C#
  

  protected void Page_Load(object sender, EventArgs e)

     {

         RadGrid1.MasterTableView.NoMasterRecordsText = "Test";

     }

  
  Kind regards,
  Pavlina
  the Telerik team

  Consider using RadControls for ASP.NET AJAX (built on top of the ASP.NET AJAX framework) as a replacement for the Telerik ASP.NET Classic controls, See the product support lifecycle here.

• Kev

  Posted on Jun 28, 2011 (permalink)

  Hi Pavlina,
  
  If I setting <HeaderStyle Height="50px" />, in IE display, the height of the header is set to 50px, but the width is not being re-calculated. (Photo grid problem2-3.jpg).
  
  The setting of NoMasterRecordsText is not work if I set it in .cs file, I can only set it in the ascx file.
  
  I will open a new thread with the code soon. As I think I am not a licensed user and my company's account seems to be expired recently, can I just open a new thread in this forum for my code or should I renew the license first?
  
  Regards,
  Kev

  Attached files

  • Grid-Problem2-3.JPG

• Pavlina Pavlina

  Posted on Jun 29, 2011 (permalink)

  Hello Kev,
  
  You can try to upload the project on public site and send us the transfer link. We will review it locally and advice you further.
  
  Regards,
  Pavlina
  the Telerik team

  Consider using RadControls for ASP.NET AJAX (built on top of the ASP.NET AJAX framework) as a replacement for the Telerik ASP.NET Classic controls, See the product support lifecycle here.

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Grid > Allow vertical scroll but not horizontal scroll in IE8