We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Wrap Text and Autofit

Hello!  I'm having trouble getting the desired text layout with certain browsers.  I have the following settings:
<syncfusion:GridColumnDescriptor MappingName="REASON" Width="125" Appearance-RecordFieldCell-WrapText="false">
    <AnyCell WrapText="False"></AnyCell>
And in the grid itself:
AutoFit="false"  TableLayoutMode="Fixed"

These settings produce the desired result in Internet Explorer, but not in FireFox or Chrome (see the attachment for screen-shots)
I am looking for a way to duplicate the Internet Explorer results across any browser. Specifically I want fixed column widths, no text wrapping, single height rows, and long text (that doesn't fit it's column width) to be nicely truncated.
Visual Studio 2010
.NET Framework 4.0
Essential Studio
VB.Net Code behind




3 Replies

HJ Hariharan J V Syncfusion Team April 8, 2013 12:29 PM UTC

Hi Dale,

Thanks for your update.

We suggest you to set CSS overflow as hidden for AnyRecord ,Alternate Record and SelectedRowCells to resolve your issue. Please refer to the code snippet below.


<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

    <asp:ScriptManager ID="ScriptManager1" runat="server">


    <asp:UpdatePanel ID="GridPanel" runat="server" UpdateMode="Conditional">


            <table id="GridTable">



                        <style type="text/css">

                            .GridOffice2007BlueAnyRecord, .GridOffice2007BlueAlternateRecord, .GridOffice2007BlueSelectedRowCells, .GridOffice2007BlueSelectedUfRowCells


                                overflow: hidden !important;



                        <syncfusion:GridGroupingControl ID="GridGroupingControl1" runat="server" AutoFit="false"

                            TableLayoutMode="Fixed" AutoFormat="Office 2007 Blue" BorderCollapse="Separate"

                            DataSourceCachingMode="ViewState" DragSelectionBackColor="Yellow" EnableCallbacks="False"

                            ShowGroupDropArea="false" HotTrackButtons="False">

                            <TopLevelGroupOptions ShowCaption="false" />

                            <TableDescriptor AllowNew="False" AllowFilter="False" AllowEdit="false">


                                    <syncfusion:GridColumnDescriptor MappingName="CustomerID" HeaderText="Customer ID">


                                    <syncfusion:GridColumnDescriptor MappingName="CompanyName" HeaderText="Company Name">


                                            <AnyCell WrapText="false" />



                                    <syncfusion:GridColumnDescriptor MappingName="City">


                                    <syncfusion:GridColumnDescriptor MappingName="Country">















For your convenience , we have prepared a simple sample to demonstrate this and the same can be downloaded from the below link.

Sample: WebApplication.zip

Please let us know if you have any concerns.





DN Dale Norhern April 8, 2013 01:27 PM UTC

Thank you, the CSS overflow worked great!  I do have two additional questions.

Where can I find this information in the documentation?  I looked for quite a while, but must not have been in the right place.

Is there a way to use this CSS with all themes at once?  By being tied to the theme, it adds an extra step when the theme is changed...


HJ Hariharan J V Syncfusion Team April 10, 2013 06:14 AM UTC

Hi Dale,

Sorry for the inconvenience caused.

Since the WrapText property is used for wrapping the text to the next line of the cell if the content exceed the cell size. Your requirement is to hide the cell content if it exceed the cell content so that we have given an workaround for you to customize the css for the rowcells which has been given in the last update. You should customize the css based on the skins applied to the grid.

Thanks for using Syncfusion products.

Please let us know if you have any concerns.





Live Chat Icon For mobile
Up arrow icon