Wrap Text and Autofit

[Dale Norhern]

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">
<Appearance>
    <AnyCell WrapText="False"></AnyCell>
</Appearance>

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 10.4.0.71
VB.Net Code behind

Thanks!

--Dale

GridText_2f1d06e2.rar

[Hariharan J V]

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.

 [Default.aspx]

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

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

    </asp:ScriptManager>

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

        <ContentTemplate>

            <table id="GridTable">

                <tr>

                    <td>

                        <style type="text/css">

                            .GridOffice2007BlueAnyRecord, .GridOffice2007BlueAlternateRecord, .GridOffice2007BlueSelectedRowCells, .GridOffice2007BlueSelectedUfRowCells

                            {

                                overflow: hidden !important;

                            }

                        </style>

                        <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">

                                <Columns>

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

                                    </syncfusion:GridColumnDescriptor>

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

                                        <Appearance>

                                            <AnyCell WrapText="false" />

                                        </Appearance>

                                    </syncfusion:GridColumnDescriptor>

                                    <syncfusion:GridColumnDescriptor MappingName="City">

                                    </syncfusion:GridColumnDescriptor>

                                    <syncfusion:GridColumnDescriptor MappingName="Country">

                                    </syncfusion:GridColumnDescriptor>

                                </Columns>

                            </TableDescriptor>

                        </syncfusion:GridGroupingControl>

                    </td>

                </tr>

            </table>

        </ContentTemplate>

        <Triggers>

        </Triggers>

    </asp:UpdatePanel>

</asp:Content>

 

 

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.

 

Regards,

HARIHARAN JV

 

[Dale Norhern]

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...

Thanks!

--Dale

[Hariharan J V]

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.

 

Regards,

HARIHARAN JV