[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

How to configure Gridview control so that the Header text are not connect and have certain padding between them

Posted on 2015-02-09
12
Medium Priority
?
328 Views
Last Modified: 2015-02-19
Hi, I'm using VS2012
My gridview would have a couple of header text connected.  How to ensure all header text have some padding between them.  
Also, in the Edit mode, each column seemed to expanded way too wide.  How to limit that to be the same width as in the non-editing mode?

Thank you.
0
Comment
Question by:lapucca
[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
  • 7
  • 4
12 Comments
 
LVL 85
ID: 40600374
I'm not sure you have any control over the padding in the column headers. However, there are several design view options for AutoSizeColumnMode. Try changing those to see if those better suit you needs. Several of those settings will auto-size based on Header text.
0
 

Author Comment

by:lapucca
ID: 40601277
I don't see where is this AutoSizeColumnMode property that I can set.  Can you give me steps on how to locate this?  What design view do you mean?  I check both in Source and Design of the aspx page but can't find this property.  Thank you.
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 40603383
The ASP.NET GridView control has different style properties (ControlStyle, FooterStyle, HeaderStyle, ItemStyle).  There are a lot of examples of how to apply style.  You can mix styles with CSS styling to achieve the effect that you require.

GridView Examples for ASP.NET 2.0: Formatting the GridView
https://msdn.microsoft.com/en-us/library/aa479342.aspx

  <asp:GridView ID="productGridView" Runat="server" 
          DataSourceID="productsDataSource"
            DataKeyNames="ProductID" AutoGenerateColumns="False" 
             BorderWidth="1px" BackColor="#DEBA84" 
             CellPadding="3" CellSpacing="2" BorderStyle="None" 
             BorderColor="#DEBA84">
            <FooterStyle ForeColor="#8C4510" 
              BackColor="#F7DFB5"></FooterStyle>
            <PagerStyle ForeColor="#8C4510" 
              HorizontalAlign="Center"></PagerStyle>
            <HeaderStyle ForeColor="White" Font-Bold="True" 
              BackColor="#A55129"></HeaderStyle>

...

Open in new window

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:lapucca
ID: 40604627
I played with Gridview control's cellspacing and it didn't seem to make a bit of diffference.  I also played with in Edit Column (Design) of headerStyle and ItemStyle and it looks fine in the Gridview control's Design view but when the application running it's nothing like it!
I would set all column Headerstyle to be center Horizontally but at run time they all aligned to the left.  
Also, why is each column 2,3 times the width in Edit Mode than in display mode?  The gridview control would expand over to the <div> width that contains it.  How to fix this?  
Thank you.
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 40604767
Did you try setting the CellPadding property?

Can you show me how the style is applied for the GridView in the HTML?
0
 

Author Comment

by:lapucca
ID: 40605978
Bob,
I attached the grid's html code and the screen capture of what it looks like in VS Design view.  Thank you for the help.
grid-dessign-view.png
grid.txt
0
 

Author Comment

by:lapucca
ID: 40606120
I'm attaching the column headers in Normal mode and in Edit mode.  You see the columns suddenly expanded their width to more than double of their width in normal mode.  The right most column, half of it has grey background because in edit mode it leaks over the div that contains it so there is a horizontal scrolling bar to get to it.  Very frustrating!
Grid-Normal-mode.png
grid-Edit-Mode.png
0
 

Author Comment

by:lapucca
ID: 40606151
I would like around 15 or 20 pixels between each column.  This should be the same in Edit or Normal mode.  
Also, any way to set the cell will grow, or is that the default, if the data has one that's is longer than others?

Thank you.
0
 

Author Comment

by:lapucca
ID: 40606209
Bob, I played wiht the cellspacing settting it from 10 to 150 makes no difference in the spacing between the columns.  The cellPadding does make a difference but it also increase the Header row height and oddly enough not the cells below that row.  Anyway, cellspacing is not working and cellpadding is changing the height.   Also, in Edit it still grows ouside of the screen.
0
 
LVL 96

Accepted Solution

by:
Bob Learned earned 2000 total points
ID: 40609231
I would think that CSS applied to the Grid might have more fine-grain control over the appearance.

GridView custom CSS style example in ASP.NET
http://www.dotnetfox.com/articles/gridview-custom-css-style-example-in-Asp-Net-1088.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
<!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">
<head runat="server">
    <link href="Gridstyle.css" rel="stylesheet" type="text/css" />
    <title>GridView Style</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="gvEmployee" runat="server" AutoGenerateColumns="false" Width="600px"
                      AllowPaging="true" PageSize="8" OnPageIndexChanging="gvEmployee_PageIndexChanging"
                      CssClass="Grid"                    
                      AlternatingRowStyle-CssClass="alt"
                      PagerStyle-CssClass="pgr" >        
         <Columns>
         <asp:BoundField DataField="empid" HeaderText="Employee ID" />
         <asp:BoundField DataField="name" HeaderText="Name" />
         <asp:BoundField DataField="designation" HeaderText="Designation" />
         <asp:BoundField DataField="city" HeaderText="City" />
         <asp:BoundField DataField="country" HeaderText="Country" />        
         </Columns>
        </asp:GridView>
    </div>        
   </form>
</body>
</html>

Open in new window


.Grid {background-color: #fff; margin: 5px 0 10px 0; border: solid 1px #525252; border-collapse:collapse; font-family:Calibri; color: #474747;}
.Grid td {
      padding: 2px;
      border: solid 1px #c1c1c1; }
.Grid th  {
      padding : 4px 2px;
      color: #fff;
      background: #363670 url(Images/grid-header.png) repeat-x top;
      border-left: solid 1px #525252;
      font-size: 0.9em; }
.Grid .alt {
      background: #fcfcfc url(Images/grid-alt.png) repeat-x top; }
.Grid .pgr {background: #363670 url(Images/grid-pgr.png) repeat-x top; }
.Grid .pgr table { margin: 3px 0; }
.Grid .pgr td { border-width: 0; padding: 0 6px; border-left: solid 1px #666; font-weight: bold; color: #fff; line-height: 12px; }  
.Grid .pgr a { color: Gray; text-decoration: none; }
.Grid .pgr a:hover { color: #000; text-decoration: none; }
- See more at: http://www.dotnetfox.com/articles/gridview-custom-css-style-example-in-Asp-Net-1088.aspx#sthash.NNpZnm6H.dpuf
0
 

Author Comment

by:lapucca
ID: 40617138
yes, agree.  Have to use CSS for this to work correctly.  Thank you.
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 40619725
P.S. I am stuck in the ASP.NET MVC 5 world so much that I had to think about this, but I always try to apply CSS for styles.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
This article is for Object-Oriented Programming (OOP) beginners. An Interface contains declarations of events, indexers, methods and/or properties. Any class which implements the Interface should provide the concrete implementation for each Inter…
Video by: ITPro.TV
In this episode Don builds upon the troubleshooting techniques by demonstrating how to properly monitor a vSphere deployment to detect problems before they occur. He begins the show using tools found within the vSphere suite as ends the show demonst…
In this video you will find out how to export Office 365 mailboxes using the built in eDiscovery tool. Bear in mind that although this method might be useful in some cases, using PST files as Office 365 backup is troublesome in a long run (more on t…

650 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