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

DataGrid with including non displayed columns

7 Answers 115 Views

Grid

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

CSurieux asked on 03 Jun 2008, 07:38 AM

Hello,

I uses radgrid to display a very lengthy log table from db.
My grid is using autogenerated columns but I tried to limit its with to a fixed px value, using scrolling horizontal and vertica.
The display area is ok but it appears that the real reserved grid size is computed with all the columns. So my page get very wide with a wide space to the right of the grid ?
I tried putting grid in a table, but no success.
Bug or (certainly) bad usage of parameters ?
How to solve this.
Here are part of my declarations:

    
            <table cellspacing="2" cellpadding="2" width="900px" align="left" border="0">  
        
                <tr valign="top">  
        
                    <td valign="top" align="left" width="200px" > 
        
            ......  
        
                    </td> 
        
                    <td valign="top" align="left" width="200px">  
        
            ......  
        
                    </td> 
        
                </tr> 
        
                <tr> 
        
                <td colspan='2'>  
        
                    <asp:Panel ID="MonitoringPanel" Runat="server">  
        
                    <div style="width:900px">  
        
                        <Telerik:RadGrid ID="RadGrid1" runat="server" AllowFilteringByColumn="True"  PageSize='20' 
        
                            AllowPaging="True"  AllowCustomPaging='true' VirtualItemCount='100000' 
        
                            AllowSorting="True" GridLines="None" ShowGroupPanel="True" ShowStatusBar='true' Width='100%' > 
        
                            <MasterTableView  TableLayout='Fixed' > 
        
                                <RowIndicatorColumn Visible="False">  
        
                                    <HeaderStyle Width="20px" /> 
        
                                </RowIndicatorColumn> 
        
                                <Columns> 
        
                                <Telerik:GridClientSelectColumn UniqueName='SelectColumn'  HeaderStyle-Width="30px"/>  
        
                               </Columns> 
        
                            </MasterTableView> 
        
                            <ClientSettings AllowDragToGroup="True">  
        
                                <Selecting AllowRowSelect="True" /> 
        
                                <Scrolling AllowScroll="True" EnableVirtualScrollPaging="True" UseStaticHeaders="True" SaveScrollPosition="True" /> 
        
                                <Resizing EnableRealTimeResize="True" ResizeGridOnColumnResize="False" AllowColumnResize="True" ClipCellContentOnResize="true" /> 
        
                            </ClientSettings> 
        
                            <HeaderStyle Width="100px" /> 
        
                            <PagerStyle Mode='NumericPages' /> 
        
                        </Telerik:RadGrid> 
        
                        </div> 
        
                    </asp:Panel> 
        
                    <br /> 
        
            <asp:label id="LabelNoData" runat="server" Visible="False" /> 
        
            <asp:Label Id="ErrorLabel" Runat="server" CssClass="Error" Visible="false"></asp:Label> 
        
                </td> 
        
                </tr> 
        
            </table>

Thanks for help.
CS

7 Answers, 1 is accepted

answered on 04 Jun 2008, 12:58 PM

RadGrid.zip

Hi Christian Surieux,

I followed your scenario but unfortunately was not able to replicate the problem. Please find attached a sample web site and let me know how it goes on your end and if I missed something from your logic.

Looking forward your reply,
Iana
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 04 Jun 2008, 05:02 PM

Hello Iana,

Your apsx modified to show my problem (+ I am using build 521 due to some other pb)
My pb is, I have a large number of fields >25 and some of them may have long names and I dont want that the values wrap on several lines in columns were they are long because this limit the number of rows displayed.

See everything look normal but the IE horizontal scroll bar appears anormally large and the windows, outside body is extended anormally to right.

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="RadGridExport.aspx.cs" Inherits="RadGridExportaspx" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!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" style="border-color:yellow; border-style:solid ; border-width:1;width:100%" > 
        
            <head runat="server">  
        
                <title>Untitled Page</title> 
        
            </head> 
        
            <body style="border-color:olive; border-style:solid ; border-width:1;width:100%">  
        
                <form id="form1" runat="server">  
        
                    <asp:Button ID='Monbout' runat=server Text='Far'  style='float:right'/>  
        
                <div style='border-color:red; border-style:solid ; border-width:1; margin-left:auto; margin-right:auto; width:900px'>  
        
                    <asp:ScriptManager ID="ScriptManager1" runat="server">  
        
                    </asp:ScriptManager> 
        
                    <div style="border-color:blue; border-style:solid ; border-width:1;width:100%">  
        
                <table width=100%><tr><td> 
        
                    <telerik:RadGrid ID="RadGrid1" Skin='Web20' runat="server" AllowSorting="true" AllowPaging="true" 
        
                        GridLines="None" ShowGroupPanel="True" Width="800px" DataSourceID="AccessDataSource1" 
        
                        ShowStatusBar="true" AllowFilteringByColumn="true">  
        
                        <MasterTableView AutoGenerateColumns="true" DataKeyNames="CustomerID" DataSourceID="AccessDataSource1" TableLayout="Fixed">  
        
                        <HeaderStyle Width=100 />                  
        
                            <ItemStyle Wrap=false />                
        
                            <AlternatingItemStyle Wrap=false />                
        
                        </MasterTableView> 
        
                        <ClientSettings AllowDragToGroup="True">  
        
                            <Scrolling AllowScroll="true" ScrollHeight="300px" UseStaticHeaders="true" /> 
        
                        </ClientSettings>              
        
                    </telerik:RadGrid> 
        
                    </td></tr></table> 
        
                    </div> 
        
                    <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/Nwind.mdb" 
        
                        SelectCommand="SELECT CustomerID + CompanyName + ContactName + ContactTitle + Address + City AS bigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigfiel1,   
        
                        CustomerID + CompanyName + ContactName + ContactTitle + Address + City AS bigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigfiel2,   
        
                        CustomerID + CompanyName + ContactName + ContactTitle + Address + City AS bigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigfiel3,   
        
                        CustomerID + CompanyName + ContactName + ContactTitle + Address + City AS bigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigfiel4,   
        
                        CustomerID + CompanyName + ContactName + ContactTitle + Address + City AS bigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigfiel5,   
        
                        CustomerID + CompanyName + ContactName + ContactTitle + Address + City AS bigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigfiel6,   
        
                        CustomerID + CompanyName + ContactName + ContactTitle + Address + City AS bigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigfiel7,   
        
                        CustomerID + CompanyName + ContactName + ContactTitle + Address + City AS bigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigfiel8,   
        
                        CustomerID + CompanyName + ContactName + ContactTitle + Address + City AS bigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigfiel9,   
        
                        CustomerID + CompanyName + ContactName + ContactTitle + Address + City AS bigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigfiel10,   
        
                                     CustomerID + CompanyName + ContactName + ContactTitle + Address + City AS bigfiel2,* FROM [Customers]"> 
        
                    </asp:AccessDataSource> 
        
                    </div> 
        
                </form> 
        
            </body> 
        
            </html>

Thanks for your help and explanation.

CS

answered on 05 Jun 2008, 10:31 AM

Hello Christian,

Thank you for the provided details.

I was able to replicate the problem with the IE horizontal scroll with the code below. And to fix it I suggest that you set the table-layout of the table surrounding your grid to fixed:

    
            <table width="100%" style="table-layout:fixed"><tr><td>    
        
                <telerik:RadGrid ID="RadGrid2" Skin='Web20' runat="server" AllowSorting="true"   
        
            AllowPaging="true" GridLines="None" ShowGroupPanel="True" Width="800px"   
        
            DataSourceID="AccessDataSource2" ShowStatusBar="true" AllowFilteringByColumn="true">     
        
                    ........               
        
                </telerik:RadGrid> </td></tr>  
        
            </table>

Give this suggestion a try and let us know whether this helps.

Best regrads,
Iana
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 10 Jun 2008, 04:56 PM

Hello Iana,

The TableLayout fixed is Ok now, my page keeep its normal size...but I yhave a probkem with HeaderStyle, RowStyle (AlternatingRowStyle): in some columns I am displaying very long datas and I don't want them to wrap and reduce the number of total displayed lines.
Problem is that is I use a HeaderStyle with a fixed width, I am unable to avoid wrapping , putting Wrap=False in RowStyle has no effect.
If I suppress the HeaderStyle, all my columns seem reduced to an average width, wrapping is now stopped by wrap=False, but as I have a very high number of columns the average width is so small we can't see anything.

Could you help me to have a default column with without wrapping the data ?

Thanks for your help.
CS

answered on 12 Jun 2008, 04:46 PM

Hello Christian Surieux,

To achieve your goal, please try the following settings:

    
            <head runat="server">  
        
                <style type="text/css">      
        
                    .MasterTable_Web20   
        
                    {  
        
                        width: auto !important;  
        
                    }  
        
                </style> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                <asp:Button ID='Monbout' runat=server Text='Far'  style='float:right'/>     
        
                <div style='border-color:red; border-style:solid ; border-width:1; margin-left:auto; margin-right:auto; width:900px'>     
        
                    <div style="border-color:blue; border-style:solid ; border-width:1;width:100%">     
        
                <table width="100%" style="table-layout:fixed"><tr><td>    
        
                    <telerik:RadGrid ID="RadGrid1" Skin='Web20' runat="server" AllowSorting="true" AllowPaging="true"    
        
                        GridLines="None" ShowGroupPanel="True" Width="800px" DataSourceID="AccessDataSource1"    
        
                        ShowStatusBar="true" AllowFilteringByColumn="true">     
        
                        <MasterTableView AutoGenerateColumns="true" DataKeyNames="CustomerID" 

            DataSourceID="AccessDataSource1" TableLayout="Auto">                                    
        
                            <ItemStyle Wrap="false" />                   
        
                            <AlternatingItemStyle Wrap="false" />                   
        
                        </MasterTableView>    
        
                        <ClientSettings AllowDragToGroup="True">     
        
                            <Scrolling AllowScroll="true" ScrollHeight="300px" UseStaticHeaders="false" />    
        
                        </ClientSettings>                 
        
                    </telerik:RadGrid>    
        
                    </td></tr></table>    
        
                    </div>    
        
                    <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/Nwind.mdb"    
        
                        SelectCommand="SELECT CustomerID + CompanyName + ContactName + ContactTitle + Address + City AS bigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigfiel1,      
        
                        CustomerID + CompanyName + ContactName + ContactTitle + Address + City AS bigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigfiel2,      
        
                        CustomerID + CompanyName + ContactName + ContactTitle + Address + City AS bigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigfiel3,      
        
                        CustomerID + CompanyName + ContactName + ContactTitle + Address + City AS bigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigfiel4,      
        
                        CustomerID + CompanyName + ContactName + ContactTitle + Address + City AS bigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigfiel5,      
        
                        CustomerID + CompanyName + ContactName + ContactTitle + Address + City AS bigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigfiel6,      
        
                        CustomerID + CompanyName + ContactName + ContactTitle + Address + City AS bigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigfiel7,      
        
                        CustomerID + CompanyName + ContactName + ContactTitle + Address + City AS bigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigfiel8,      
        
                        CustomerID + CompanyName + ContactName + ContactTitle + Address + City AS bigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigfiel9,      
        
                        CustomerID + CompanyName + ContactName + ContactTitle + Address + City AS bigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigbigfiel10,      
        
                                     CustomerID + CompanyName + ContactName + ContactTitle + Address + City AS bigfiel2,* FROM [Customers]">    
        
                    </asp:AccessDataSource>           
        
                </div> 
        
                </form> 
        
            </body>

Let us know if this helps.

All the best,
Iana
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 18 Jun 2008, 06:07 AM

Hello Iana,

Thanks for suggestion and efforts helping.
Your code works but takes a different direction than what I was trying to do.

I agrre that we finally have columns displayed with correct headers and filters but I was expecting to be able to have some clipping done on lengthy columns with no text wrapping when the column width is smaller than what is necessary to display all data.

Another annoyance is that your solution necessitate to suppress static headers, and this is a very bad constraint when you have hundreds of records.

My ideal solution would be to have some parameters that could
1) Allow static headers
2) Allow to fix a width , disallow wrapping and do clipping for all elements concerning a column: data,header, filters...

I have installed a RadGrid1_ColumnCreated handler and I am tring to fix columns elements for each column with code like this:

    
                        if (!(e.Column is GridBoundColumn))  
        
                            return;  
        
                        string colName                      = ((GridBoundColumn)e.Column).DataField.ToLower();  
        
                        string newName                      =   string.Empty;  
        
                        bool display                        =   true;  
        
                        if ( cboReportType.SelectedValue == "0" )  
        
                        {  
        
                            switch (colName)  
        
                            {  
        
                                case MNSTR.strcrmuserid:  
        
                                    newName                     =   LocalizeHelper.Localize(MNSTR.crmuserid, "User Id");  
        
                                    e.Column.HeaderStyle.Width  =   new Unit("100px");  
        
                                    ee.Column.ItemStyle.Width    =   e.Column.HeaderStyle.Width ;  
        
                                    e.Column.HeaderStyle.Wrap   =   false;  
        
                                    e.Column.ItemStyle.Wrap     =   false;  
        
                                    display                     =   Settings[MNSTR.crmuserid].ToBool();  
        
                                    break;

But wrapping=false is not working, headers continue to wrap if the column width is smaller, and large datas as Guid are still wrapped on several lines.

Regards

answered on 18 Jun 2008, 02:07 PM

Hello Christian Surieux,

Thank you for the additional details provided.

Please try the code below in order to achieve your goal and check if it meets your requirements:

    
            <style type="text/css">  
        
                .GridHeader_Web20,         
        
                .MasterTable_Web20 td   
        
                {     
        
                    overflow: hidden;  
        
                }     
        
            </style> 
        
            <telerik:RadGrid ID="RadGrid1" Skin='Web20' runat="server" AllowSorting="true" AllowPaging="true" 
        
                GridLines="None" ShowGroupPanel="True" Width="800px" DataSourceID="AccessDataSource1" 
        
                ShowStatusBar="true" AllowFilteringByColumn="true" OnColumnCreated="RadGrid1_ColumnCreated">  
        
                <MasterTableView AutoGenerateColumns="true" DataKeyNames="CustomerID" DataSourceID="AccessDataSource1">  
        
                    <HeaderStyle Width="100px" Wrap="false" /> 
        
                </MasterTableView> 
        
                <ClientSettings AllowDragToGroup="True">  
        
                    <Scrolling AllowScroll="true" ScrollHeight="300px" UseStaticHeaders="true" /> 
        
                </ClientSettings> 
        
            </telerik:RadGrid>

    
            protected void RadGrid1_ColumnCreated(object sender, Telerik.Web.UI.GridColumnCreatedEventArgs e)  
        
            {  
        
                if(e.Column is GridBoundColumn)  
        
                    ((GridBoundColumn)e.Column).DataFormatString = "<nobr>{0}</nobr>";            
        
            }

Let us know how it goes and if we could help you further..

All the best,
Iana
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

DataGrid with including non displayed columns

7 Answers, 1 is accepted