Link to home
Start Free TrialLog in
Avatar of skaleem1
skaleem1Flag for Canada

asked on

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

Avatar of nacho_uem
nacho_uem
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
Avatar of skaleem1
skaleem1
Flag of Canada image

ASKER

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
Avatar of skaleem1
skaleem1
Flag of Canada image

ASKER

can someone please help as this is urgent to fix?

Thanks
Avatar of Bob Learned
Bob Learned
Flag of United States of America image
I believe this is what you are looking for.


GridView-Columns-Item-Style---Wr.png
Avatar of skaleem1
skaleem1
Flag of Canada image

ASKER

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

Avatar of Bob Learned
Bob Learned
Flag of United States of America image
You need to look at the rendered output in the web browser (View Source), and make sure that the wrap attribute is added correctly.
Avatar of skaleem1
skaleem1
Flag of Canada image

ASKER

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

Avatar of skaleem1
skaleem1
Flag of Canada image

ASKER

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

Avatar of itsmeandnobodyelse
itsmeandnobodyelse
Flag of Germany image
>>>> 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.
Avatar of skaleem1
skaleem1
Flag of Canada image

ASKER

should I do it in the stored proc returning the dataset such as?

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

Avatar of skaleem1
skaleem1
Flag of Canada image

ASKER

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 :-)
Avatar of skaleem1
skaleem1
Flag of Canada image

ASKER

However if I replace the dashes with periods, the wrapping does not occur:

REPLACE (AccPartNum, '-', ' ')
Avatar of itsmeandnobodyelse
itsmeandnobodyelse
Flag of Germany image
>>>> REPLACE (AccPartNum, '-', CHAR(45))

That replaces dash with dash.

Did you try CHAR(150) or CHAR(151) ?
Avatar of itsmeandnobodyelse
itsmeandnobodyelse
Flag of Germany image
>>>> 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.
Avatar of skaleem1
skaleem1
Flag of Canada image

ASKER

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

Avatar of itsmeandnobodyelse
itsmeandnobodyelse
Flag of Germany image
>>>> 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.
Avatar of itsmeandnobodyelse
itsmeandnobodyelse
Flag of Germany image
>>>> 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.
Avatar of itsmeandnobodyelse
itsmeandnobodyelse
Flag of Germany image
>>>> 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
Avatar of skaleem1
skaleem1
Flag of Canada image

ASKER

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
ASKER CERTIFIED SOLUTION
Avatar of skaleem1
skaleem1
Flag of Canada image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial