Values in the gridview cells are wrapped

I am adding columns of a gridview dynamically in the code behind as you can see in the code section. The problem that I am having is that any columns populated with the data values that have dashes in it are wrapped to the next line, e.g the DeviceCode column is filled with the data in a format such as "XYZ-12345-001" and it wraps up and appears as the following:

XYZ-
12345
-001

Is there any way I can get rid of this wrapping in the code behind?
this.GridView1.AllowPaging = false;
 this.GridView1.Columns.Add(new BoundField() { DataField = "DeviceCode", HeaderText = "DeviceCode" });
this.GridView1.Columns.Add(new BoundField() { DataField = "HardwareNum", HeaderText = "HardwareNum" });
this.GridView1.Columns.Add(new BoundField() { DataField = "Description", HeaderText = "Description" });
 
//get dat
 RetrieveData(reloadFromDB);
 
//bind data
 this.GridView1.DataSource = dt;
 this.GridView1.DataBind();

Open in new window

LVL 1
skaleem1Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

nacho_uemCommented:
you must use the property System.Windows.Forms.DataGridViewCellStyle.WrapMode, adding this code:
(...)
DataGridViewCellStyle myStyle= new DataGridViewCellStyle
myStyle.WrapMode=DataGridViewTriState.False
this.GridView1.DefaultCellStyle= myStyle

You can use other properties of the DataGridViewCellStyle object to configure the default aspect of your grid:Alignment, BackColor, Font, ForeColor,SelectionBackColor...

You can also use this to configure all the cells of a row, or only a cell of the grid.

I hope you see util this response
Greetings

Nacho
0
skaleem1Author Commented:
nacho uem,

Thanks for your response however this is not a windows app but a web app. Is there a substitute to what I should use in case of a web gridview?

Thanks
0
skaleem1Author Commented:
can someone please help as this is urgent to fix?

Thanks
0
Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

Bob LearnedCommented:
I believe this is what you are looking for.


GridView-Columns-Item-Style---Wr.png
0
skaleem1Author Commented:
TheLearnedOne,

Thanks for your response. Yes this is what I am looking for to implement programmatically. The scenario I am faced with needs me to programatically fill the data grid based on what table the user selects from a treeview (a collecion of more than 50 tables). Based on the selected table, the columns are programatically added and the datatable bound to the gridview from the related dataset. The challenge is to control the formatting of the columns including the column width and wrapping programatically. I have tried to do it in the GridView1_RowDataBound event (attached is the code) however it really does not reflect the change in column width or the wrapping behaviour during rendering at all. I am very frustated as I have tried all ways I could and have almost given up. Is there a different place or event where I should use this code or is there anything I am missing here? I will greatly appreciate your help.


protected int widestData;
 
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            widestData = 0;
            System.Data.DataRowView drv;
            
            if (e.Row.RowType == DataControlRowType.Header)
            {
                
                switch (_pageMode)
                {
 
                    case "ReleasedParts":
                        
                        int HeaderNameLen = 13;
                        if (HeaderNameLen > widestData)
                        {
                            widestData = HeaderNameLen;
                            GridView1.Columns[1].HeaderStyle.Width = widestData * 1;
                            GridView1.Columns[1].HeaderStyle.Wrap = false;
                            GridView1.Columns[2].HeaderStyle.Width = widestData * 1;
                            GridView1.Columns[2].HeaderStyle.Wrap = false;
                            GridView1.Columns[3].HeaderStyle.Width = widestData * 7;
                            GridView1.Columns[3].HeaderStyle.Wrap = false;}
 
                        break;
                
                }
            }
 
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                drv = (System.Data.DataRowView)e.Row.DataItem;
                if (drv != null)
                {
                    switch (_pageMode)
                    {
 
                        case "ReleasedParts":
                            String catName = drv[1].ToString();
 
                            int catNameLen = catName.Length;
                            if (catNameLen > widestData)
                            {
                                widestData = catNameLen;
                                GridView1.Columns[1].ItemStyle.Width = widestData * 1;
                                GridView1.Columns[1].ItemStyle.Wrap = false;
                                GridView1.Columns[2].ItemStyle.Width = widestData * 1;
                                GridView1.Columns[2].ItemStyle.Wrap = false;
                                GridView1.Columns[3].ItemStyle.Width = widestData * 7;
                                GridView1.Columns[3].ItemStyle.Wrap = false;}
 
                            break;
                    }
 
 
 
                }
                
            }

Open in new window

0
Bob LearnedCommented:
You need to look at the rendered output in the web browser (View Source), and make sure that the wrap attribute is added correctly.
0
skaleem1Author Commented:
As far as I can see, the no wrap attribute is added. Attached is the related part of the view code. Please review and suggest if there is anything that gives clues.

thanks
<table cellspacing="0" rules="all" 
 
OnItemDataBound="GridView1_ItemDataBound" border="1" 
 
id="ctl00_ContentPlaceHolder1_GridView1" 
 
style="border-collapse:collapse;">
			<tr style="white-space:nowrap;">
				<th scope="col" 
 
style="width:13px;white-space:nowrap;">&nbsp;</th><th scope="col" 
 
style="width:13px;white-space:nowrap;">&nbsp;</th><th scope="col" 
 
style="width:91px;white-space:nowrap;">PLC</th><th scope="col" 
 
style="width:91px;white-space:nowrap;">&nbsp;</th><th scope="col" 
 
style="width:700px;white-space:nowrap;">Part Number</th><th scope="col" 
 
style="width:91px;white-space:nowrap;">Hardware PN</th><th scope="col" 
 
style="width:91px;white-space:nowrap;">Hardware PN2</th><th scope="col" 
 
style="width:91px;white-space:nowrap;">Hardware PN3</th><th scope="col" 
 
style="width:325px;white-space:nowrap;">Hardware PN4</th><th 
 
scope="col" style="width:13px;white-space:nowrap;">ACC 
 
Description</th><th scope="col">Product Revision</th><th 
 
scope="col">ECN Number</th><th scope="col">Release Date</th><th 
 
scope="col">Material Group</th><th scope="col">UPC</th><th 
 
scope="col">Old EAN</th><th scope="col">EAN</th><th scope="col">Lead 
 
Time</th><th scope="col">Transit Time</th><th scope="col">Secondary 
 
Description</th><th scope="col">Notes</th><th scope="col">MOQ</th><th 
 
scope="col">Unit Weight</th><th scope="col">Weight</th><th 
 
scope="col">Unit Dimension</th><th scope="col">Outside Unit 
 
Length</th><th scope="col">Outside Unit Width</th><th 
 
scope="col">Outside Unit Height</th>
			</tr><tr>
				<td 
 
style="width:5px;white-space:nowrap;"><a 
 
href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView1','Ed
 
it$0')">Edit</a></td><td style="width:5px;white-space:nowrap;"><a 
 
href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView1','De
 
lete$0')">Delete</a></td><td 
 
style="width:35px;white-space:nowrap;"><span disabled="disabled"><input 
 
id="ctl00_ContentPlaceHolder1_GridView1_ctl02_ctl02" type="checkbox" 
 
name="ctl00$ContentPlaceHolder1$GridView1$ctl02$ctl02" 
 
disabled="disabled" /></span></td><td 
 
style="width:35px;white-space:nowrap;"><a 
 
href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView1','Ed
 
it$0')">Restrictions</a></td><td 
 
style="width:700px;white-space:nowrap;">XYZ-13228-001</td><td 
 
style="width:35px;white-space:nowrap;">&nbsp;</td><td 
 
style="width:35px;white-space:nowrap;">&nbsp;</td><td 
 
style="width:35px;white-space:nowrap;">&nbsp;</td><td 
 
style="width:35px;white-space:nowrap;">&nbsp;</td><td 
 
style="width:5px;white-space:nowrap;">ACC BB 87XX Auto Charger DoCoMo   
 
      </td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>BK01 
 
</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&n
 
bsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>grams</td><td
 
>&nbsp;</td><td>millimeters</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp
 
;</td>
			</tr><tr style="white-space:nowrap;">
				<td 
 
style="width:5px;white-space:nowrap;"><a 
 
href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView1','Ed
 
it$1')">Edit</a></td><td style="width:5px;white-space:nowrap;"><a 
 
href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView1','De
 
lete$1')">Delete</a></td><td 
 
style="width:35px;white-space:nowrap;"><span disabled="disabled"><input 
 
id="ctl00_ContentPlaceHolder1_GridView1_ctl03_ctl02" type="checkbox" 
 
name="ctl00$ContentPlaceHolder1$GridView1$ctl03$ctl02" 
 
disabled="disabled" /></span></td><td 
 
style="width:35px;white-space:nowrap;"><a 
 
href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView1','Ed
 
it$1')">Restrictions</a></td><td 
 
style="width:700px;white-space:nowrap;">XYZ-13228-002</td><td 
 
style="width:35px;white-space:nowrap;">&nbsp;</td><td 
 
style="width:35px;white-space:nowrap;">&nbsp;</td><td 
 
style="width:35px;white-space:nowrap;">&nbsp;</td><td 
 
style="width:35px;white-space:nowrap;">&nbsp;</td><td 
 
style="width:5px;white-space:nowrap;">ACC BB 87XX Interntnl Power Clips 
 
DoCoMo</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>BK01 
 
</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&n
 
bsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>grams</td><td
 
>&nbsp;</td><td>millimeters</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp
 
;</td>
			</tr><tr>
				<td 
 
style="width:5px;white-space:nowrap;"><a 
 
href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView1','Ed
 
it$2')">Edit</a></td><td style="width:5px;white-space:nowrap;"><a 
 
href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView1','De
 
lete$2')">Delete</a></td><td 
 
style="width:35px;white-space:nowrap;"><span disabled="disabled"><input 
 
id="ctl00_ContentPlaceHolder1_GridView1_ctl04_ctl02" type="checkbox" 
 
name="ctl00$ContentPlaceHolder1$GridView1$ctl04$ctl02" 
 
disabled="disabled" /></span></td><td 
 
style="width:35px;white-space:nowrap;"><a 
 
href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridView1','Ed
 
it$2')">Restrictions</a></td><td 
 
style="width:700px;white-space:nowrap;">XYZ-13228-003</td><td 
 
style="width:35px;white-space:nowrap;">&nbsp;</td><td 
 
style="width:35px;white-space:nowrap;">&nbsp;</td><td 
 
style="width:35px;white-space:nowrap;">&nbsp;</td><td 
 
style="width:35px;white-space:nowrap;">&nbsp;</td><td 
 
style="width:5px;white-space:nowrap;">ACC BB 87XX Ext Battery Charger 
 
DoCoMo  </td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>BK01 
 
</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&n
 
bsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>grams</td><td
 
>&nbsp;</td><td>millimeters</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp
 
;</td>
			</tr><tr>
				
 
<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;<
 
/td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nb
 
sp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td
 
>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td
 
><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;
 
</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
			</tr>
		</table>

Open in new window

0
skaleem1Author Commented:
Interesting, I removed the code from the GridView1_RowDataBound (see attached below) event and then viewed rendered output in the web browser (View Source), and it still shows the same:

style="width:13px;white-space:nowrap;">

This means that it is not getting this part of the rendered output from my code (the one i attached above and attaching again below for easy reference). Any clue where is it coming from?:
protected int widestData;
 
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            widestData = 0;
            System.Data.DataRowView drv;
            
            if (e.Row.RowType == DataControlRowType.Header)
            {
                
                switch (_pageMode)
                {
 
                    case "ReleasedParts":
                        
                        int HeaderNameLen = 13;
                        if (HeaderNameLen > widestData)
                        {
                            widestData = HeaderNameLen;
                            GridView1.Columns[1].HeaderStyle.Width = widestData * 1;
                            GridView1.Columns[1].HeaderStyle.Wrap = false;
                            GridView1.Columns[2].HeaderStyle.Width = widestData * 1;
                            GridView1.Columns[2].HeaderStyle.Wrap = false;
                            GridView1.Columns[3].HeaderStyle.Width = widestData * 7;
                            GridView1.Columns[3].HeaderStyle.Wrap = false;}
 
                        break;
                
                }
            }
 
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                drv = (System.Data.DataRowView)e.Row.DataItem;
                if (drv != null)
                {
                    switch (_pageMode)
                    {
 
                        case "ReleasedParts":
                            String catName = drv[1].ToString();
 
                            int catNameLen = catName.Length;
                            if (catNameLen > widestData)
                            {
                                widestData = catNameLen;
                                GridView1.Columns[1].ItemStyle.Width = widestData * 1;
                                GridView1.Columns[1].ItemStyle.Wrap = false;
                                GridView1.Columns[2].ItemStyle.Width = widestData * 1;
                                GridView1.Columns[2].ItemStyle.Wrap = false;
                                GridView1.Columns[3].ItemStyle.Width = widestData * 7;
                                GridView1.Columns[3].ItemStyle.Wrap = false;}
 
                            break;
                    }
 
 
 
                }
                
            }
 

Open in new window

0
itsmeandnobodyelseCommented:
>>>> style="width:5px;white-space:nowrap;"
I would assume that is preventing from wraps because of spaces but not from wraps because of dashes.

You might consider temporarily replacing the dash character in your strings by char(150) or char(151) which are small respectively wide dash characters as well. So that may look like a bad work-around it probably would solve your issue.
0
skaleem1Author Commented:
should I do it in the stored proc returning the dataset such as?

REPLACE (AccPartNum, '-', CHAR(150))

0
skaleem1Author Commented:
I tried in the database using the following but the issue not solved:

REPLACE (AccPartNum, '-', CHAR(45))

However interestingly when i completely remove the dashes, then the wrapping does not occur however I do need the dashes :-)
0
skaleem1Author Commented:
However if I replace the dashes with periods, the wrapping does not occur:

REPLACE (AccPartNum, '-', ' ')
0
itsmeandnobodyelseCommented:
>>>> REPLACE (AccPartNum, '-', CHAR(45))

That replaces dash with dash.

Did you try CHAR(150) or CHAR(151) ?
0
itsmeandnobodyelseCommented:
>>>> should I do it in the stored proc returning the dataset?

If you activily set the grid cell I would do it there. If the grid columns were bound to the result set from database the stored procedure seems the right place. But if you use the grid for updating or inserting new records as well you must do the replacing reverse before that. Also be aware that reading form grid cell also would return a wrong string value.
0
skaleem1Author Commented:
I tried ->>>REPLACE (AccPartNum, '-', CHAR(45))

but still does not solve the wrap issue. As I said in my earlier posting that replacing dash with the period does not wrap. Is there any smaller dash than CHAR(45)?

Can't I force the width and wrapping programatically? I tried the following when adding column but to no avail:

BoundField Item = new BoundField();
                    Item.DataField = "AccPartNum";
                    Item.HeaderText = "Part Number";
                    Item.ItemStyle.HorizontalAlign = HorizontalAlign.Left;
                    Item.ItemStyle.Wrap = false;
                    Item.HeaderStyle.Wrap = false;
                    Item.HeaderStyle.Width = 800;
                    this.GridView1.Columns.Add(Item);

0
itsmeandnobodyelseCommented:
>>>> I tried ->>>REPLACE (AccPartNum, '-', CHAR(45))

???? I already told you that CHAR(45)  *IS* a dash which prints as '-'. It really makes no sense to substitute dash by dash and you can't expect any change when doing it.

>>>> Is there any smaller dash than CHAR(45)?
It is not really smaller but similar small, it is CHAR(150) which looks like ''

CHAR(151) is '' what is a wide dash.
0
itsmeandnobodyelseCommented:
>>>> it is CHAR(150) which looks like ''
My browser shows the char(150) as a rectangle but in the EE comment window it shows correct. You might copy-paste it from displayed comments and put it into a new comment field to verify it.
0
itsmeandnobodyelseCommented:
>>>> You might copy-paste it from displayed comments and put it into a new comment field to verify it.
You better copy from

http://msdn.microsoft.com/en-us/library/6c608ydz(VS.85).aspx
0
skaleem1Author Commented:
None of this workaround of replacing the dashes with char(150) has worked. However, after extensive research, I have found out the solution to wrapping which I will post shortly.

Thanks for the help anyways
0
skaleem1Author Commented:
Here is the solution. I have replaced the way I am dynamically adding the column before binding to the dataset. I now do my formatting right there. I have removed all the code from the GridView1_RowDataBound event I have posted above and  have replaced the following code with the one in the attached code snippet and the forced no wrap is rendered as expected now:

this.GridView1.AllowPaging = false;
 this.GridView1.Columns.Add(new BoundField() { DataField = "DeviceCode", HeaderText = "DeviceCode" });
this.GridView1.Columns.Add(new BoundField() { DataField = "HardwareNum", HeaderText = "HardwareNum" });
this.GridView1.Columns.Add(new BoundField() { DataField = "Description", HeaderText = "Description" });

Thanks for your help anyways but unfortunately it was either incomplete, irrelevant (as the help given was for Windows gridview) or not working.
                    BoundField HWPN = new BoundField();
                    HWPN.DataField = "DeviceCode";
                    HWPN.HeaderText = "DeviceCode";
                    HWPN.HeaderStyle.Width = 400;
                    HWPN.HeaderStyle.Wrap = false;
                    HWPN.ItemStyle.HorizontalAlign = HorizontalAlign.Left;
                    HWPN.ItemStyle.Wrap = false;                    
                    this.GridView1.Columns.Add(HWPN);
 
                    BoundField HWPN2 = new BoundField();
                    HWPN2.DataField = "HardwareNum";
                    HWPN2.HeaderText = "HardwareNum";
                    HWPN2.HeaderStyle.Width = 400;
                    HWPN2.HeaderStyle.Wrap = false;
                    HWPN2.ItemStyle.HorizontalAlign = HorizontalAlign.Left;
                    HWPN2.ItemStyle.Wrap = false;
                    this.GridView1.Columns.Add(HWPN2);
 
                    BoundField HWPN3 = new BoundField();
                    HWPN3.DataField = "Description";
                    HWPN3.HeaderText = "Description";
                    HWPN3.HeaderStyle.Width = 400;
                    HWPN3.HeaderStyle.Wrap = false;
                    HWPN3.ItemStyle.HorizontalAlign = HorizontalAlign.Left;
                    HWPN3.ItemStyle.Wrap = false;
                    this.GridView1.Columns.Add(HWPN3);

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
.NET Programming

From novice to tech pro — start learning today.