Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

DataGrid on Web Form Resizes in Edit Mode

Posted on 2004-09-01
12
Medium Priority
?
583 Views
Last Modified: 2010-04-07
Whenever I put the DataGrid into Edit mode, by setting the EditSelectedItemIndex >-1 , the grid resizes and some of the columns get clipped since I have made the hosting browser window fit the grid size closely.

How Can I turn stop this behavior?

0
Comment
Question by:Howard Bash
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 2
12 Comments
 
LVL 4

Expert Comment

by:mrdilliard
ID: 12077355
Depending on what's inside the datagrid, you may not be able to stop it from resizing. To prevent it to some degree, you can set the width of each column, but if the content takes up more space then you have for the width (like a text box that's too wide), then it's going to expand it, like it or not.

You could make a master/detail page if you needed more room, and then the detail page could just go vertically instead of horizontally.

http://www.c-sharpcorner.com/asp/Articles/MasterDetailDCHK.asp
http://www.codeproject.com/aspnet/masterdetailgrid.asp
0
 
LVL 1

Author Comment

by:Howard Bash
ID: 12077801
The strangest part is that the columns seem to expand way beyond the width of the data (perhaps expanding to the max width).

Where and how would you set the column widths to override this expanded behavior?
0
 
LVL 4

Expert Comment

by:mrdilliard
ID: 12080695
well, i would go ahead and put the width onto the datagrid itself if you don't have it yet.

also, if you're binding columns, you'd set the width attribute on each column

<asp:Datagrid runat="server" id="dgView" Width="700">
      <columns>
            <asp:BoundColumn Width="100" />
      <columns>
<asp:/Datagrid>

Something like that, except go ahead and set the width for each column. You can also set the HeaderStyle-Width="100" if you're using ItemTemplates.
0
Prepare for your VMware VCP6-DCV exam.

Josh Coen and Jason Langer have prepared the latest edition of VCP study guide. Both authors have been working in the IT field for more than a decade, and both hold VMware certifications. This 163-page guide covers all 10 of the exam blueprint sections.

 
LVL 1

Author Comment

by:Howard Bash
ID: 12081647

I tried the Width attribute on the BoundColumn:

<asp:BoundColumn DataField="WTID" HeaderText="WTID Width="20"></asp:BoundColumn>

The error is:

Parser Error Message: Type 'System.Web.UI.WebControls.BoundColumn' does not have a property named 'Width'.
0
 
LVL 4

Expert Comment

by:mrdilliard
ID: 12081881
Sorry...wasn't thinking. Use HeaderStyle-Width="20"
0
 
LVL 1

Author Comment

by:Howard Bash
ID: 12109335
I tried the HeaderStyle-Width and the grid still resized on the edit and looks really rotten.

Here is the link to a project that demonstrates the problem :
   
    http://www.bash.com/wgt/index.html

and click edit on any row and notice that grid goes from looking nice to really lousy.

0
 
LVL 4

Accepted Solution

by:
mrdilliard earned 600 total points
ID: 12109441
The problem is that the browser's not going to resize those text fields to fit within the width that you want for them. You can set the width attribute on your textboxes if you want to, but I would recommend having a master detail page. I ran into the same problem a while back, but I made a detail page, and the application just looks a lot smoother.

My first comment has those links to some tutorials for that, if you need.
0
 
LVL 1

Author Comment

by:Howard Bash
ID: 12109622
I kind of like the in place editing that doing it on the grid would provide.  

So, where should those width attributes be set?  Should I set them in the html for the datagrid,  in an event handler, or both?  I tried putting the setting in the html and it did not appear to do much to help when the grid switches to edit mode.  It might be using the boundcolumn versus the templatecolumn is a mistake and i should bite the bullet and convert all the columns to templates.

0
 
LVL 1

Assisted Solution

by:CS_Lewis
CS_Lewis earned 596 total points
ID: 12113496
Converting the columns to template columns sounds like a good idea.  I would just explicitly set your text box widths inside the edit item template tags.  Example:

<EditItemTemplate>
     <asp:TextBox id="txtEdit" runat="server" Width="45" Height="18" Font-Size="8pt" Text='<%# DataBinder.Eval(Container.DataItem, "Text Value") %>' MaxLength="6" ></asp:TextBox>
</EditItemTemplate>

This gives you a width for the text box in pixels and also limits the number of characters they can put in.
0
 
LVL 1

Expert Comment

by:CS_Lewis
ID: 12113668
This is a little side note:  If you have a lot of text that you want them to enter into the text box, you can use code that is similar to the calendar code I posted on your other question.  When the user clicks the text box, bring up a small popup note screen with a text box and save and cancel buttons.  After the user saves their text, you can send the text from the popup back to the datagrid control.  I have found this to be a good way to handle text entry on a datagrid.

For those who are following this post, here's the link to the popup code that I'm talking about:
http://www.experts-exchange.com/Web/Q_21118669.html
0

Featured Post

Plesk WordPress Toolkit

Plesk's WordPress Toolkit allows server administrators, resellers and customers to manage their WordPress instances, enabling a variety of development workflows for WordPress admins of all skill levels, from beginners to pros.

See why 2/3 of Plesk servers use it.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Turn A Profile Picture Into A Cartoon Using Photoshop And Illustrator This tutorial will teach you how to make a cartoon style image out of a regular picture. I have tried to keep the tutorial as simple as possible. I used Adobe CS4 for this tuto…
This article provides a case study on how our local youth baseball league deployed a new website, including the platform selection, implementation and benefits to the league.
The purpose of this video is to demonstrate how to insert an Iframe into WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Open Page or Post…
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…
Suggested Courses

610 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question