GridView Control - limiting width and overflow

[GregG]

Greetings,

I have been working with the new GridView control, and while figuring
out most of it's idiosyncrasies on my own, have stumbled upon a
problem I cannot seem to resolve.

We have table displayed in a GV control.
It allows for editing and selecting, etc.
Some of the fields are 60 characters long, but only the first 20 or so
are relevant, and all of them have to fit on one line within the row -
with the overflow being hidden and not wrapped.

So...
What we need is to be able to clip the overflow of a predefined width
that is assigned to each column.

Any thoughts?
Thanks,


Greg G.

 

[Ken Cox - Microsoft MVP]

Hi Greg,

When you create the textbox in the template, can you set its columns
property to the number of characters you want to view?

<asp:textbox id="TextBox1" runat="server" columns="20">This is a very
long string of which only the first twenty are relevant</asp:textbox>

Perhaps I missed your point?

Ken
Microsoft MVP [ASP.NET]

 

[GregG]

Ken Cox - Microsoft MVP said:

Hi Greg,

When you create the textbox in the template, can you set its columns
property to the number of characters you want to view?

<asp:textbox id="TextBox1" runat="server" columns="20">This is a very
long string of which only the first twenty are relevant</asp:textbox>

Perhaps I missed your point?

Ken
Microsoft MVP [ASP.NET]

This is my second call for help (the first got no replies), and in my
desire to keep it short, I snipped some of the relevent text... As
per the snippet below, this is an example TemplateField entry for one
field.. There are other fields, several of which are NOT to be
editable. The reasons for this are that different users have
differing levels of editing capability, depending on their company
department.

It's not a problem to limit the columns in edit mode, when using a
textbox. But where the text is _only_ displayed, we don't want
textboxes, but labels - or other non-editable entity.
As below: (watch the word wrap...)

<asp:TemplateField HeaderText="Email" SortExpression="SEmail">
<EditItemTemplate>
<asp:TextBox Width="80px" CssClass="editfield" MaxLength="40"
ID="SEmail" runat="server" Text='<%# Bind("SEmail")%>'>
</asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label CssClass="displayfield" Width="80px" ID="SEmail"
runat="server" Text='<%# Eval("SEmail") %>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>

I could be overlooking something obvious, as I've only been using
ASP.Net2 for a week, but have a pretty extensive background in ASP,
HTML, VBA/Access, etc.

We got it to work in IE using DIV wrappers around the label contents
and applying a CSS style containing explicit width, overflow: hidden
and nowrap, but it breaks in Firefox, NS - which stretches the text
full length and stretches the gridview WAAAY off-screen.

I hate tables and stopped using them years ago, but tables are what
the GV control generates... ;-)

I'd show you an example online, but I'm afraid of the traffic it would
generate on our server...

Thanks,






Greg G.

 

[Ken Cox - Microsoft MVP]

How about just trimming off the characters that you don't want?

<itemtemplate>
<asp:label id="Longtext" runat="server"
cssclass="displayfield" text='<%# left( DataBinder.Eval(Container.DataItem,
"Longtext"),20) %>'
width="80px">
</asp:label>
</itemtemplate>

Ken Cox - Microsoft MVP said:

Hi Greg,

When you create the textbox in the template, can you set its columns
property to the number of characters you want to view?

<asp:textbox id="TextBox1" runat="server" columns="20">This is a very
long string of which only the first twenty are relevant</asp:textbox>

Perhaps I missed your point?

Ken
Microsoft MVP [ASP.NET]

This is my second call for help (the first got no replies), and in my
desire to keep it short, I snipped some of the relevent text... As
per the snippet below, this is an example TemplateField entry for one
field.. There are other fields, several of which are NOT to be
editable. The reasons for this are that different users have
differing levels of editing capability, depending on their company
department.

It's not a problem to limit the columns in edit mode, when using a
textbox. But where the text is _only_ displayed, we don't want
textboxes, but labels - or other non-editable entity.
As below: (watch the word wrap...)

<asp:TemplateField HeaderText="Email" SortExpression="SEmail">
<EditItemTemplate>
<asp:TextBox Width="80px" CssClass="editfield" MaxLength="40"
ID="SEmail" runat="server" Text='<%# Bind("SEmail")%>'>
</asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label CssClass="displayfield" Width="80px" ID="SEmail"
runat="server" Text='<%# Eval("SEmail") %>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>

I could be overlooking something obvious, as I've only been using
ASP.Net2 for a week, but have a pretty extensive background in ASP,
HTML, VBA/Access, etc.

We got it to work in IE using DIV wrappers around the label contents
and applying a CSS style containing explicit width, overflow: hidden
and nowrap, but it breaks in Firefox, NS - which stretches the text
full length and stretches the gridview WAAAY off-screen.

I hate tables and stopped using them years ago, but tables are what
the GV control generates... ;-)

I'd show you an example online, but I'm afraid of the traffic it would
generate on our server...

Thanks,






Greg G.

 

[GregG]

Ken,

I had considered that method, but thought there might be a better,
more elegant way. The DIV method I mentioned allowed the boxes to
resize as a product of browser window resizing (they were defined as
percentages), whereas this approach wouldn't.

But at this point, I guess the cross-browser compatibility is going to
take precedence over style... Again...

# left( DataBinder.Eval(Container.DataItem, "Longtext"),20)

Gee, what happened to Left([FieldName],20) ;-)

It'll take me a week to absorb this particular object's hierarchy.
What I _really_ need is a wall sized chart that breaks out the huge
number of objects and their properties/methods/etc/etc.

Thanks,
Greg




Ken Cox - Microsoft MVP said:

How about just trimming off the characters that you don't want?

<itemtemplate>
<asp:label id="Longtext" runat="server"
cssclass="displayfield" text='<%# left( DataBinder.Eval(Container.DataItem,
"Longtext"),20) %>'
width="80px">
</asp:label>
</itemtemplate>

Ken Cox - Microsoft MVP said:

Hi Greg,

When you create the textbox in the template, can you set its columns
property to the number of characters you want to view?

<asp:textbox id="TextBox1" runat="server" columns="20">This is a very
long string of which only the first twenty are relevant</asp:textbox>

Perhaps I missed your point?

Ken
Microsoft MVP [ASP.NET]

This is my second call for help (the first got no replies), and in my
desire to keep it short, I snipped some of the relevent text... As
per the snippet below, this is an example TemplateField entry for one
field.. There are other fields, several of which are NOT to be
editable. The reasons for this are that different users have
differing levels of editing capability, depending on their company
department.

It's not a problem to limit the columns in edit mode, when using a
textbox. But where the text is _only_ displayed, we don't want
textboxes, but labels - or other non-editable entity.
As below: (watch the word wrap...)

<asp:TemplateField HeaderText="Email" SortExpression="SEmail">
<EditItemTemplate>
<asp:TextBox Width="80px" CssClass="editfield" MaxLength="40"
ID="SEmail" runat="server" Text='<%# Bind("SEmail")%>'>
</asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label CssClass="displayfield" Width="80px" ID="SEmail"
runat="server" Text='<%# Eval("SEmail") %>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>

I could be overlooking something obvious, as I've only been using
ASP.Net2 for a week, but have a pretty extensive background in ASP,
HTML, VBA/Access, etc.

We got it to work in IE using DIV wrappers around the label contents
and applying a CSS style containing explicit width, overflow: hidden
and nowrap, but it breaks in Firefox, NS - which stretches the text
full length and stretches the gridview WAAAY off-screen.

I hate tables and stopped using them years ago, but tables are what
the GV control generates... ;-)

I'd show you an example online, but I'm afraid of the traffic it would
generate on our server...

Thanks,

Greetings,

I have been working with the new GridView control, and while figuring
out most of it's idiosyncrasies on my own, have stumbled upon a
problem I cannot seem to resolve.

We have table displayed in a GV control.
It allows for editing and selecting, etc.
Some of the fields are 60 characters long, but only the first 20 or so
are relevant, and all of them have to fit on one line within the row -
with the overflow being hidden and not wrapped.

So...
What we need is to be able to clip the overflow of a predefined width
that is assigned to each column.

Any thoughts?
Thanks,


Greg G.

Greg G.

Greg G.

 

[JasonJ]

Hi there,

I was facing the same problems with the Gridview when loading long text from the database. I tried the DIV method to get with CSS styling to stop the table from expanding all the way to the right. I got it to work now with elipsis showing if the text is too long. However, this means that I can't display the whole text in the gridview which can me misleading to users.

So I added another style called "word-break : break-all" to break the text into chunks that fit properly in the table and got the results I wanted. Below is the parts to my code:

<style type="text/css">
            .DisplayDesc { width:500px;word-break : break-all }
            .DisplayDiv { width:500px; OVERFLOW:hidden;TEXT-OVERFLOW:ellipsis}
</style> 

 <asp:TemplateField HeaderText="Log Description">
 <ItemStyle Font-Names="Tahoma" Font-Size="X-Small" HorizontalAlign="Left" Wrap="True" />
                    <ItemTemplate>
                    <div class="DisplayDiv">
                        <asp:Label CssClass="DisplayDesc" ID="Label1" runat="server" Text='<%# Bind("TransText") %>'></asp:Label>
                    </div>
                    </ItemTemplate>
                </asp:TemplateField>