This is a migrated thread and some comments may be shown as answers.

White space between words being removed.

9 Answers 1094 Views

ComboBox

This is a migrated thread and some comments may be shown as answers.

ranro asked on 01 Apr 2010, 10:03 PM

I have a problem with the RadComboBox that I was hoping someone would have a fix for. The problem is that if an item’s text contains more than one space between the words, the spaces are removed. For example, if the text of an item is “Select Frequency”, then it shows up as “Select Frequency”. For our application we need to preserve the amount of white space in the text.

I have read on another post where it says to use &nbsp instead of a space, but the values in the list are all from user entered values in the database. I have been able to replace the spaces in the ItemDataBound event of the RadComboBox like this:

protected void RadComboBox1_ItemDataBound(object sender, RadComboBoxItemEventArgs e)

{

e.Item.Text = Page.Server.HtmlDecode(((DataRowView)e.Item.DataItem)[ColumnName].ToString().Replace(" "," "));

}

But this seems a little overly complicated to fix a problem like this. Any Suggestions.

9 Answers, 1 is accepted

answered on 07 Apr 2010, 10:25 AM

Hi ranro,

The issue that you describe in fact is related with whitespace rendering behaviour of browsers.

Normally all browsers will collapse the sequences of whitespaces to single whitespace.
This can be avoided using CSS white-space property - more details you can find at this article.

I can recommend you to override the CSS styles that are applied to the RadComboBoxItems in the dropdown:

<head runat="server">

<title></title>

<style type="text/css">

.RadComboBoxDropDown .rcbItem,

.RadComboBoxDropDown .rcbHovered,

.RadComboBoxDropDown .rcbDisabled,

.RadComboBoxDropDown .rcbLoading

{

margin: 0 1px;

padding: 2px 6px;

white-space: pre;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<div>

<telerik:RadComboBox ID="RadComboBox1" runat="server">

</telerik:RadComboBox>

</div>

</form>

</body>

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

this.RadComboBox1.DataSource = CreateDataSource();

this.RadComboBox1.DataTextField = "Name";

this.RadComboBox1.DataValueField = "ID";

this.RadComboBox1.DataBind();

}

protected DataTable CreateDataSource()

{

DataTable dataTable = new DataTable();

dataTable.Columns.Add(new DataColumn("ID", typeof(string)));

dataTable.Columns.Add(new DataColumn("Name", typeof(string)));

DataRow dr = dataTable.NewRow();

dr["ID"] = "1";

dr["Name"] = Server.HtmlEncode("Name 1 2 3");

dataTable.Rows.Add(dr);

DataRow dr2 = dataTable.NewRow();

dr2["ID"] = "2";

dr2["Name"] = "Name 2 4";

dataTable.Rows.Add(dr2);

DataRow dr3 = dataTable.NewRow();

dr3["ID"] = "3";

dr3["Name"] = "1 Name 3";

dataTable.Rows.Add(dr3);

return dataTable;

}

More details about RadComboBox CSS styles you can find here.

All the best,
Kalina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

answered on 16 Apr 2010, 09:35 PM

Thanks for the demo. I'm having a similar problem, where the whitespace is displayed in the RadComboBox initially, but after clicking an item in the RadComboBox (AutoPostBack=true), the whitespace doesn't get rendered.

This seems to only happen when I encapsulate the combobox in a RadAjaxPanel (I have several controls on the panel and I am using a LoadingPanel).

Any idea why this is happening an how to solve it?

    
                  <telerik:RadAjaxPanel ID="ctl_MainPanel" runat="server"> 

                        <div>

                            <telerik:RadComboBox ID="RadComboBox1" runat="server" AutoPostBack="true">

                            </telerik:RadComboBox>

                        </div>

                    </telerik:RadAjaxPanel>

answered on 21 Apr 2010, 03:14 PM

whitespaces.zip

Hello Bradley Fitzpatrick,

I tried to reproduce the issue using the RadComboBox definition that you provided, but without success.
On our side the RadComboBox nested within a RadAjaxPanel renders white spaces properly.

Please find the sample page attached, what is different in your implementation?
Could you please change the sample in order to illustrate the issue and paste the code here?
Thank you in advance.

Best wishes,
Kalina
the Telerik team

answered on 26 Apr 2010, 10:13 AM

Hi Bradley Fitzpatrick,

As I understand the issue here is that the css styles are not rendered after page postback.
This can occur in cases when there are full and ajax postbacks performed at the same page.

You can set the RadComboBox property EnableAjaxSkinRendering to true at every page load:

<head runat="server">

<title></title>

<style type="text/css">

.RadComboBoxDropDown .rcbItem,

.RadComboBoxDropDown .rcbHovered,

.RadComboBoxDropDown .rcbDisabled,

.RadComboBoxDropDown .rcbLoading

{

margin: 0 1px;

padding: 2px 6px;

white-space: pre;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="ScriptManager1" runat="server">

</telerik:RadScriptManager>

<div style="float: left;">

<telerik:RadAjaxPanel ID="ctl_MainPanel" runat="server">

<div>

<telerik:RadComboBox ID="RadComboBox1"

runat="server" AutoPostBack="true">

</telerik:RadComboBox>

</div>

</telerik:RadAjaxPanel>

</div>

<div style="float: left;">

<asp:Button ID="btnSubmit"

runat="server" Text="Submit" /></div>

</form>

</body>

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

this.RadComboBox1.DataSource = CreateDataSource();

this.RadComboBox1.DataTextField = "Name";

this.RadComboBox1.DataValueField = "ID";

this.RadComboBox1.DataBind();

}

RadComboBox1.EnableAjaxSkinRendering = true;

}

All the best,
Kalina
the Telerik team

answered on 12 Jul 2010, 10:57 PM

We have tried the suggestions listed here and we are still having the same issue. It only happens in IE7, not IE8 or Firefox.

Here is a sample aspx page that we use to test the issue.

@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

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 id="Head1" runat="server">

.RadComboBoxDropDown .rcbItem,

.RadComboBoxDropDown .rcbHovered,

.RadComboBoxDropDown .rcbDisabled,

.RadComboBoxDropDown .rcbLoading

{

margin: 0 1px;

padding: 2px 6px;

white-space: pre;

}

</style>

head>

body>

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<div>

<telerik:RadComboBox ID="RadComboBox1_ComboBox" OnItemsRequested="Requested" EnableLoadOnDemand="true" EnableAjaxSkinRendering="true" ItemRequestTimeout="1000" runat="server">

</telerik:RadComboBox>

</div>

<telerik:RadAjaxManager ID="PageAjaxManager" runat="server">

<telerik:AjaxSetting AjaxControlID="RadComboBox1_ComboBox">

<telerik:AjaxUpdatedControl ControlID="RadComboBox1_ComboBox" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

</form>

body>

html>

And here is the code behind

using

System;

using

System.Data;

using

System.Configuration;

using

System.Web;

using

System.Web.Security;

using

System.Web.UI;

using

System.Web.UI.WebControls;

using

System.Web.UI.WebControls.WebParts;

using

System.Web.UI.HtmlControls;

using

System.Data.OleDb;

using

Telerik.Web.UI;

public

partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

//this.RadComboBox1_ComboBox.DataSource = CreateDataSource();

//this.RadComboBox1_ComboBox.DataTextField = "Name";

//this.RadComboBox1_ComboBox.DataValueField = "ID";

//this.RadComboBox1_ComboBox.DataBind();

Page.Session[

"ClientPK"] = 1032;

Page.Session[

"UserPK"] = 553;

Page.Session[

"FirstWaveID"] = 1;

}

protected DataTable CreateDataSource()

{

DataTable dataTable = new DataTable();

dataTable.Columns.Add(

new DataColumn("ID", typeof(string)));

dataTable.Columns.Add(

new DataColumn("Name", typeof(string)));

DataRow dr = dataTable.NewRow();

dr[

"ID"] = "1";

dr[

"Name"] = Server.HtmlEncode("Name 1 2 3");

dataTable.Rows.Add(dr);

DataRow dr2 = dataTable.NewRow();

dr2[

"ID"] = "2";

dr2[

"Name"] = "Name 2 4";

dataTable.Rows.Add(dr2);

DataRow dr3 = dataTable.NewRow();

dr3[

"ID"] = "3";

dr3[

"Name"] = "1 Name 3";

dataTable.Rows.Add(dr3);

return dataTable;

}

protected void Requested(object o, RadComboBoxItemsRequestedEventArgs e)

{

DataTable dataTable = new DataTable();

dataTable.Columns.Add(

new DataColumn("ID", typeof(string)));

dataTable.Columns.Add(

new DataColumn("Name", typeof(string)));

DataRow dr = dataTable.NewRow();

dr[

"ID"] = "1";

dr[

"Name"] = Server.HtmlEncode("Name 1 2 3");

dataTable.Rows.Add(dr);

DataRow dr2 = dataTable.NewRow();

dr2[

"ID"] = "2";

dr2[

"Name"] = "Name 2 4";

dataTable.Rows.Add(dr2);

DataRow dr3 = dataTable.NewRow();

dr3[

"ID"] = "3";

dr3[

"Name"] = "1 Name 3";

dataTable.Rows.Add(dr3);

if (o is RadComboBox)

{

as RadComboBox).DataSource = dataTable;

as RadComboBox).DataTextField = "Name";

as RadComboBox).DataValueField = "ID";

as RadComboBox).DataBind();

}

answered on 14 Jul 2010, 02:01 PM

lostwhitespaces.zip

Hi ranro,

Thank you for the code.

I used it to recreate the issue on my side without success. Please see my test page - I attached it to this message.

Am I missing something?

Regards,
Simon
the Telerik team

answered on 14 Jul 2010, 02:53 PM

Simon,

I'm sorry I should have put the code in a code block instead of just pasting it. The reason you could not see the error is because when I pasted the code it removed all the white space. It should look like this

dr[

"Name"] = Server.HtmlEncode("Name 1 2 3");
and not this

dr[

"Name"] = Server.HtmlEncode("Name 1 2 3");

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Data.OleDb;

using Telerik.Web.UI;

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

//this.RadComboBox1_ComboBox.DataSource = CreateDataSource();

//this.RadComboBox1_ComboBox.DataTextField = "Name";

//this.RadComboBox1_ComboBox.DataValueField = "ID";

//this.RadComboBox1_ComboBox.DataBind();

Page.Session["ClientPK"] = 1032;

Page.Session["UserPK"] = 553;

Page.Session["FirstWaveID"] = 1;

}

protected DataTable CreateDataSource()

{

DataTable dataTable = new DataTable();

dataTable.Columns.Add(new DataColumn("ID", typeof(string)));

dataTable.Columns.Add(new DataColumn("Name", typeof(string)));

DataRow dr = dataTable.NewRow();

dr["ID"] = "1";

dr["Name"] = Server.HtmlEncode("Name 1 2 3");

dataTable.Rows.Add(dr);

DataRow dr2 = dataTable.NewRow();

dr2["ID"] = "2";

dr2["Name"] = "Name 2 4";

dataTable.Rows.Add(dr2);

DataRow dr3 = dataTable.NewRow();

dr3["ID"] = "3";

dr3["Name"] = "1 Name 3";

dataTable.Rows.Add(dr3);

return dataTable;

}

protected void Requested(object o, RadComboBoxItemsRequestedEventArgs e)

{

DataTable dataTable = new DataTable();

dataTable.Columns.Add(new DataColumn("ID", typeof(string)));

dataTable.Columns.Add(new DataColumn("Name", typeof(string)));

DataRow dr = dataTable.NewRow();

dr["ID"] = "1";

dr["Name"] = Server.HtmlEncode("Name 1 2 3");

dataTable.Rows.Add(dr);

DataRow dr2 = dataTable.NewRow();

dr2["ID"] = "2";

dr2["Name"] = "Name 2 4";

dataTable.Rows.Add(dr2);

DataRow dr3 = dataTable.NewRow();

dr3["ID"] = "3";

dr3["Name"] = "1 Name 3";

dataTable.Rows.Add(dr3);

if (o is RadComboBox)

{

(o as RadComboBox).DataSource = dataTable;

(o as RadComboBox).DataTextField = "Name";

(o as RadComboBox).DataValueField = "ID";

(o as RadComboBox).DataBind();

}

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!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 id="Head1" runat="server">

<title></title>

<style type="text/css">

.RadComboBoxDropDown .rcbItem,

.RadComboBoxDropDown .rcbHovered,

.RadComboBoxDropDown .rcbDisabled,

.RadComboBoxDropDown .rcbLoading

{

margin: 0 1px;

padding: 2px 6px;

white-space: pre;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<div>

<telerik:RadComboBox ID="RadComboBox1_ComboBox" OnItemsRequested="Requested" EnableLoadOnDemand="true" EnableAjaxSkinRendering="true" ItemRequestTimeout="1000" runat="server">

</telerik:RadComboBox>

</div>

<telerik:RadAjaxManager ID="PageAjaxManager" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadComboBox1_ComboBox">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadComboBox1_ComboBox" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

</form>

</body>

</html>