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

Extra Column Space

6 Answers 154 Views
Grid
This is a migrated thread and some comments may be shown as answers.
BALA MUKUND
Top achievements
Rank 1
BALA MUKUND asked on 28 May 2009, 04:34 PM
Hello,

I have spent quite a few days on this and I couldn't come up with a solution.

I have a grid that has scrolling enabled. Everything works great except that after the last column a sliver of white space is added which causes the page to have a scroll bar which i am trying to avoid. I could create a screen shot - but I don't see an option to attach.

Your help on this will be much appreciated.

Thanks
Bala

6 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 29 May 2009, 03:51 AM
Hi Bala,

I would suggest you to send your aspx code. Are you trying to avoid horizontal or vertical scrollbar?

To restrict the horizontal bar from being rendered, verify that:
  • the width for the MasterTableView is set to 99% if auto-generated columns are used
  • the total width of the declaratively set columns is smaller than the width of the grid itself

 
You can upload the images using the following link.
http://www.picamatic.com/

Shinu

0
BALA MUKUND
Top achievements
Rank 1
answered on 29 May 2009, 04:10 AM
Hi Shinu,

Here is my ASPX code. I am trying to avoid the Horizontal Bar. Here is the screen shot

http://www.picamatic.com/view/3800671_sliver/

<%@ Page language="c#" Codebehind="crmList.aspx.cs" AutoEventWireup="True" Inherits="iChannel.CRM.crmList" %> 
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 
<HTML> 
    <HEAD> 
        <title>STARS</title> 
            <LINK rel="stylesheet" type="text/css" href="../../RadControls/Skins/Default/Menu.Default.css">  
            <LINK rel="stylesheet" type="text/css" href="../../RadControls/Skins/WebBlue/Grid.WebBlue.css">  
            <LINK rel="stylesheet" type="text/css" href="../../RadControls/Skins/WebBlue/Menu.WebBlue.css">  
              
            <LINK rel="stylesheet" type="text/css" href="../../css/controls/grid.css">  
                <LINK rel="stylesheet" type="text/css" href="../../css/controls/form.css">  
                    <LINK rel="stylesheet" type="text/css" href="../../css/controls/frame.css">  
                    <LINK rel="stylesheet" type="text/css" href="../../css/themes/colors.css">  
                        <script src="../../scripts/controls/form.js" type="text/javascript"></script> 
                        <script src="../../scripts/controls/grid.js" type="text/javascript"></script> 
                        <script src="../../scripts/controls/tab.js" type="text/javascript"></script> 
                        <script src="../../scripts/utils/XmlBuilder.js" type="text/javascript"></script> 
                        <script src="../../scripts/utils/string.js" type="text/javascript"></script> 
                        <script src="../../scripts/utils/XmlHttp.js" type="text/javascript"></script> 
                        <script src="../../scripts/utils/message.js" type="text/javascript"></script> 
                        <script src="../../scripts/utils/outlook.js" type="text/javascript"></script> 
                        <script src="../../scripts/business/common.js" type="text/javascript"></script> 
                        <script src="../../scripts/entity/entity.js" type="text/javascript"></script> 
                        <script src="../../scripts/entity/lead.js" type="text/javascript"></script> 
                        <script src="../../scripts/entity/opportunity.js" type="text/javascript"></script> 
                          
                          
    </HEAD> 
    <body style="MARGIN:0px" onload="oiChannelSiebelEntity.InitEntity();">  
      
          
        <form id="frmCRMList" method="post" runat="server">  
            <telerik:RadScriptManager ID="ScriptManager" runat="server" /> 
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">  
                <AjaxSettings> 
                <telerik:AjaxSetting AjaxControlID="gridCRMList">  
                    <UpdatedControls> 
                    <telerik:AjaxUpdatedControl ControlID="gridCRMList" /> 
                    </UpdatedControls> 
                </telerik:AjaxSetting> 
                </AjaxSettings> 
            </telerik:RadAjaxManager> 
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px" Width="75px" Transparency="60">  
            <table style="width:100%; height:100%; background-color: white;">  
                <tr style="height:100%">  
                    <td align="center" valign="middle" style="width:100%">  
                        <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' 
                        style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" /> 
                    </td> 
                </tr> 
            </table> 
        </telerik:RadAjaxLoadingPanel> 
              
            <table cellpadding="0" cellspacing="0" style="BACKGROUND-IMAGE: url(../../images/silver.jpg); WIDTH: 100%; BACKGROUND-REPEAT: repeat-x; HEIGHT: 15px;">  
                <tr> 
                    <td width="75%">  
                        <telerik:radmenu id="crmMenu" EnableEmbeddedSkins="false" runat="server" theme="Default" Skin="Default" width="100%">  
                              
                        </telerik:radmenu> 
                    </td> 
                    <td width="25%" class="menuLink">  
                        <div id="divReports"></div> 
                    </td> 
                </tr> 
            </table> 
              
 
                          
                  
 
                    <telerik:RadGrid ID="gridCRMList" EnableAJAX="True"  EnableAJAXLoadingTemplate="True" PagerPosition="TopAndBottom" EnableEmbeddedSkins="False" AllowFilteringByColumn="True" AutoPostBackOnFilter="True" runat="server" Skin="WebBlue" AllowSorting="True" AutoGenerateColumns="False" AllowPaging="True" PageSize="100">  
                        <PagerStyle Position="Top" Mode="NextPrevAndNumeric" AlwaysVisible="true" Width="95%"></PagerStyle> 
                       
                        <MasterTableView TableLayout="Fixed">  
                          
                        <PagerTemplate> 
                            <table border="0" cellpadding="0" cellspacing="0" style="height:20px">  
                                <tr> 
                                    <td class="pagerStyle" width="45px">  
                                        <img src="../../images/arrow.gif" alt="" /><img src="../../images/arrow.gif" alt="" /> 
                                        <asp:LinkButton ID="LinkButton1" CommandName="Page" CausesValidation="false" CommandArgument="First" 
                                            runat="server">First</asp:LinkButton> 
                                    </td> 
                                    <td width="5px" align="center" class="pagerStyleBoundary">|</td> 
                                    <td width="45px" class="pagerStyle">  
                                        <img src="../../images/arrow.gif" alt="" /> 
                                        <asp:LinkButton ID="LinkButton5" CommandName="Page" CausesValidation="false" CommandArgument="Prev" 
                                            runat="server">Prev</asp:LinkButton> 
                                    </td> 
                                    <td width="5px" align="center" class="pagerStyleBoundary">|</td> 
                                    <td class="pagerStyle" width="45px">  
                                        <asp:LinkButton ID="LinkButton3" CommandName="Page" CausesValidation="false" CommandArgument="Next" 
                                            runat="server">Next</asp:LinkButton> 
                                        <img src="../../images/arrowRight.gif" alt="" /> 
                                    </td> 
                                    <td width="5px" align="center" class="pagerStyleBoundary">|</td> 
                                    <td class="pagerStyle" width="45px">  
                                        <asp:LinkButton ID="LinkButton2" CommandName="Page" CausesValidation="false" CommandArgument="Last" 
                                            runat="server">Last</asp:LinkButton> 
                                        <img src="../../images/arrowRight.gif" alt="" /><img src="../../images/arrowRight.gif" alt="" /> 
                                    </td> 
                                    <td width="345px" class="pagerStyle" align="right" valign="top">  
                                        Showing   
                                        <%# (Convert.ToInt32(DataBinder.Eval(Container, "OwnerTableView.CurrentPageIndex"))*Convert.ToInt32(DataBinder.Eval(Container, "OwnerTableView.PageSize")) + 1)%> 
                                        to  
                                        <%# (Convert.ToInt32(DataBinder.Eval(Container, "OwnerTableView.CurrentPageIndex"))*Convert.ToInt32(DataBinder.Eval(Container, "OwnerTableView.PageSize")) + 1) + (Convert.ToInt32(DataBinder.Eval(Container, "Paging.Count")) - 1)%> 
                                        out of   
                                        <%# DataBinder.Eval(Container, "Paging.DataSourceCount") %> 
                                        Rows  
                                    </td> 
                                </tr> 
                            </table> 
                        </PagerTemplate>      
                      
                    </MasterTableView> 
                    <ClientSettings EnableRowHoverStyle="True">  
                            <Scrolling AllowScroll="True" UseStaticHeaders="True"></Scrolling> 
                        <Selecting AllowRowSelect="True" /> 
                        <Resizing AllowColumnResize="True" /> 
                        <ClientEvents OnRowCreated="RowCreated" OnGridCreated="AdjustMainGrid" OnRowSelected="GridRowSelected" OnRowDblClick="RowClicked"></ClientEvents> 
                    </ClientSettings> 
                          
                  </telerik:RadGrid> 
              
          
        </form> 
    </body> 
</HTML> 
 

I am not using AutoGenerateColumns. I don't preset the grid width. I keep adding columns using code-behind.

Let me know your thoughts. Thanks for your reply.
Bala
0
Princy
Top achievements
Rank 2
answered on 29 May 2009, 07:56 AM
Hi  Bala Mukund,

In the above given image the extra space is appearing in between Grid border and browser window. I guess it is coming due to browser issue. Try adding a div in the page with100% width and background-color set and check whether the div is occupying the entire page.

Princy.

0
BALA MUKUND
Top achievements
Rank 1
answered on 29 May 2009, 11:27 AM
Hi Princy,

The way I look at it the space is occurring between the scroll bar and the grid border (the blue boundary line). That is why I was wondering if there was any spacing issue after the last column. Please correct me if I am wrong on this.

Thanks
Bala
0
Shinu
Top achievements
Rank 2
answered on 01 Jun 2009, 07:15 AM
Hi Bala,

Can you try setting width of the both RadGrid and MasterTableView to 100% and see if the issue is getting solved.

ASPX:
 
 
 <telerik:RadGrid ID="RadGrid1" runat="server" Skin="WebBlue"  DataSourceID="SqlDataSource1"  Width="100%"  > 
            <MasterTableView  TableLayout="Fixed" Width="100%"    > 


Shinu
0
BALA MUKUND
Top achievements
Rank 1
answered on 01 Jun 2009, 03:13 PM
Thanks! That worked - though I had to set it to 97% to both. I believe the scroll bar of the grid takes 10 pixels or so which pushes the grid outside the boundary.

But credit to you for the suggestion.

Thanks all.
Bala
Tags
Grid
Asked by
BALA MUKUND
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
BALA MUKUND
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Share this question
or