How to reduce the size of the gridview columns

Question

0.00/5 (No votes)

See more:

I am using a gridview of 10 columns .so its appearing in the page with horizontal scroll bar.I want to reduce the column width of the grid view.i am using tamplate field for the grid view column.please help.

Posted 24-Jul-13 19:32pm

Soumya 2

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Thanks7872 · Answer 1 · 2013-07-24T19:39:00

Solution 1

C#

<asp:templatefield headertext="" >
<headerstyle width="50" />
<itemstyle width="50" />
........
.......
......
.....
</asp:templatefield>

Regards..:laugh:

Posted 24-Jul-13 19:39pm

Thanks7872

Updated 24-Jul-13 19:47pm

v2

Comments

Soumya 2 25-Jul-13 1:45am

i have tried this but not working :( my code is
<asp:TemplateField HeaderText="ProjectName" >
<HeaderStyle Width="50" />
<itemstyle width="50">
<edititemtemplate>
<asp:TextBox ID="txtProjectName" runat="server" Width="100" Height="150" TextMode="MultiLine" Text='<%# Bind("ProjectName") %>'>
<asp:RequiredFieldValidator ID="rfvProjectName" runat="server" ControlToValidate="txtProjectName" ErrorMessage="Please Provide Project Name" Text="Field Can't be blank" Display="Dynamic" >

<itemtemplate>
<asp:Label ID="Label3" runat="server" Text='<%# Bind("ProjectName") %>'>

<footertemplate>
<asp:TextBox ID="txtInsertProjectName" runat="server" Text='<%# Bind("ProjectName") %>'>

Thanks7872 25-Jul-13 1:47am

Priority will be given to the control. So better you set itemstyle/headerstyle width and control width with same size.Hope it will work.

kishore sharma · Answer 2 · 2013-07-24T19:49:00

Solution 2

Use follwoing style , put listgrid class to gridview and remove all default style sheet applied to gridview.
and then you can play with widh of the header ,row etc

CSS

<style>
.listgrid
{
    border-collapse: collapse;
    width: 100%;
    border-top: 1px solid #DDDDDD;
    border-left: 1px solid #DDDDDD;
    margin-bottom: 20px;
}
.listgrid td
{
    border-right: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;

}
.listgrid th
{
    border-right: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;

}
.listgrid thead th
{
    background-color: #EFEFEF;
    padding: 7px;
}
.listgrid thead th a, .listgrid thead th
{
    text-decoration: none;
    color: #222222;
    font-weight: bold;
}
.listgrid tbody td a
{
    text-decoration: underline;
}
.listgrid tbody td
{
    vertical-align: middle;
    padding: 0px 5px;
    background: #FFFFFF;
    text-align: left;
    padding: 7px;
}
</style>

Posted 24-Jul-13 19:49pm

kishore sharma

Comments

Soumya 2 25-Jul-13 1:55am

I want to reduce the size of some specific columns..can u plz advice ???

kishore sharma 25-Jul-13 2:03am

then use
<HeaderStyle Width="150px"></HeaderStyle>
for template field.
<asp:TemplateField Visible="false">
<HeaderStyle Width="150px"></HeaderStyle>
<HeaderTemplate>
<asp:Label ID="lblAll" runat="server">All
</HeaderTemplate>
<itemtemplate>
<asp:TextBox ID="txtID" runat="server" Text='<%# Eval("Id") %>' Enabled="false">

<itemstyle horizontalalign="Center">

and
<asp:BoundField HeaderText="SNo" DataField="Id" HeaderStyle-Width="40px">
<HeaderStyle Width="40px" />
</asp:BoundField>

for bound field

Soumya 2 25-Jul-13 2:08am

as per u,I have tried this

<asp:TemplateField HeaderText="ITWRno" >
<HeaderStyle Width="50px" />
<edititemtemplate>
<asp:TextBox ID="TextBox1" runat="server" Height="100" Text='<%# Bind("ITWRno") %>'>

<itemtemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("ITWRno") %>'>

<footertemplate>
<asp:TextBox ID="txtInsertITWR" runat="server" Text='<%# Bind("ITWRno") %>'>

but not working :(

kishore sharma 25-Jul-13 2:12am

did u applied style sheet class

Soumya 2 25-Jul-13 2:17am

No i havent tried that one..