data display problem in gridview

Question

0.00/5 (No votes)

See more:

good morning all
in gridview display,some of my data value is to lengthy,so in display,they are overwitten.
if i set the fixed width then if any data that will be inserted in future will be more then that width then problem will occur.
is there any solution???
another problem is that if there will be no data in my database means 0 record,then gridview will not be displayed.but i want my header to be displayed even if there is no record

------------------------------------------------------------------------------------

C#

<div id="Div4" style="overflow-x: auto; width: 1207px;">
<asp:GridView ID="gvState" runat="server" CellPadding="10" CellSpacing="10" AutoGenerateColumns="False" AlternatingRowStyle-CssClass="alternate-row"
HeaderStyle-Height="50px" RowStyle-Height="30px" RowStyle-CssClass="table-product" OnRowUpdating="gvvendor_RowUpdating" OnRowCommand="gvvendor_rowcommand"
OnRowDeleting="gvvendor_rwdeleting" CssClass="grid_css" Visible="true" AllowPaging="true" OnPageIndexChanging="gvState_PageIndexChanging" DataKeyNames="ID">
<rowstyle cssclass="table-product" font-size="30px" height="30px" horizontalalign="Center" verticalalign="Middle">
 </rowstyle>
                            
<columns>
                               
 <asp:TemplateField HeaderText="companyid" Visible="false">
<itemtemplate>
<asp:Label ID="lblBindId" runat="server" Text='<%#Eval("ID") %>' />
                                    </itemtemplate>
                                    <HeaderStyle CssClass="table-header-repeat line-left minwidth-1" ForeColor="White">
                                    </HeaderStyle>
                                
                                <asp:TemplateField HeaderText="CompanyName">
                                    <itemtemplate>
                                        <asp:Label ID="lblBindName" runat="server" Text='<%#Eval("CompanyName") %>' />
                                    </itemtemplate>
                                    <HeaderStyle CssClass="table-header-repeat line-left minwidth-1" ForeColor="White">
                                    </HeaderStyle>
                                
                                <asp:TemplateField HeaderText="SubIndustry">
                                    <itemtemplate>
                                        <asp:Label ID="lblcmpnynm" runat="server" Text='<%#Eval("SubIndustry") %>' />
                                    </itemtemplate>
                                    <HeaderStyle CssClass="table-header-repeat line-left minwidth-1" ForeColor="White">
                                    </HeaderStyle>
                                
                                
                                
                            </columns>
                            
                            <HeaderStyle Height="50px"></HeaderStyle>
                            <alternatingrowstyle cssclass="alternate-row"></alternatingrowstyle>
                            <pagerstyle height="15px" font-size="Medium" />
                        
                            
                    </div>

Posted 15-Nov-11 18:03pm

pal5hah

Updated 15-Nov-11 18:07pm

uspatel

v2

Add a Solution

3 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)

Prince Antony G · Accepted Answer · 2011-11-15T18:47:00

Try this one..I got the header when there is no record

C#

if (ds.Tables[0].Rows.Count == 0)
       {
           ds.Tables[0].Rows.Add(ds.Tables[0].NewRow());
           GridView1.DataSource = ds;
           GridView1.DataBind();
           int columncount = GridView1.Rows[0].Cells.Count;
           GridView1.Rows[0].Cells.Clear();
           GridView1.Rows[0].Cells.Add(new TableCell());
           GridView1.Rows[0].Cells[0].ColumnSpan = columncount;
           GridView1.Rows[0].Cells[0].Text = "No Records Found";
       }
       else
       {
           GridView1.DataSource = ds;
           GridView1.DataBind();
       }

dinidusoft123 · Accepted Answer · 2011-11-15T18:51:00

For the first problem you can use tool tip as solution and use fix width. so additional words display in tool tip. below i m show the way of writing the tool tip solution and hope you can edit it and customize it to your solution.

in OnRowDataBound event set the maximum length which fit to the column and other characters send to tool tip.
user this code inside onrowbound event

C#

const int maxLength =10;
            if (obj.CompanyName.Length > maxLength)
            {
                ((Label)e.Row.FindControl("lblBindName")).Text = this.GetExtraWordsforToolTip(obj.CompanyName, maxLength);

            }

and extra words will display in tool tip.

C#

private string GetExtraWordsforToolTip(string word, int wordMaxLenth)
    {
        string strDescription = @"<p><a class='tooltip' href='#'>" + text.Substring(0, maxLength - 7) + "(...)" + @"<span class='normal'>" + text + "</span></a></p> ";
        return strDescription;
    }

CSS

.tooltip
{
    border-bottom: 1px dotted #000000;
    color: #000000;
    outline: none;
    cursor: pointer;
    text-decoration: none;
    position: relative;
}
.tooltip span
{
    margin-left: -999em;
   position:absolute;


}
.tooltip:hover span
{
    border-radius: 5px 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
    font-family: Verdana,Calibri, Tahoma, sans-serif;
    position: absolute;
    left: 1em;
    top: 2em;
    z-index: 99;
    margin-left: 0;

}
.tooltip:hover img
{
    border: 0;
    margin: -10px 0 0 -55px;
    float: left;
    position: absolute;
}
.tooltip:hover em
{
    font-family: Verdana,Calibri, Tahoma, sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    display: block;
    padding: 0.2em 0 0.6em 0;
}

.normal
{
    background: #d6d0fd;
    border: 1px solid #686868;
    word-wrap: break-word;
    width:200px;
    padding: 0.7em 1em;
}

For second problem you can use empty data template as solution
and use three templates header, item and empty

XML

<HeaderTemplate>
                     <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                                    <tr>
                                                        <td align="left" width="8%">
                                                            CompanyName
                                                        </td>
                                                        <td align="left">
                                                            SubIndustry
                                                        </td>

                                                    </tr>
                                                </table>
                                            </HeaderTemplate>

XML

<EmptyDataTemplate>
 <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                              <tr>
                                                  <td>
                                                      Sorry, 0 items found.
                                                  </td>
                                              </tr>
                                          </table>
</EmptyDataTemplate>

hope this will help..

GaganjyotK · Accepted Answer · 2011-11-15T19:01:00

<asp:gridview id="gvList" runat="server" autogeneratecolumns="False" xmlns:asp="#unknown">
BackColor="White" BorderColor="#B2B2B2" BorderStyle="None" BorderWidth="1px"
CellPadding="2" DataSourceID="sqldsList"
AlternatingRowStyle-BackColor="#F8F8F8" ForeColor="Black"
GridLines="Horizontal" HeaderStyle-HorizontalAlign="Left"
Width="100%" AllowPaging="True" DataKeyNames="Id" >

<headerstyle horizontalalign="Left" />
<headerstyle backcolor="#B2B2B2" font-bold="false" forecolor="White" />
<selectedrowstyle backcolor="#CC3333" font-bold="True" forecolor="White" />>

This is the example of empty gridview.

data display problem in gridview

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0