Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

White space between words being removed.

9 Answers 873 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
ranro
Top achievements
Rank 1
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

Sort by
0
Kalina
Telerik team
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.
0
Bradley Fitzpatrick
Top achievements
Rank 1
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>

0
Kalina
Telerik team
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

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.
0
Bradley Fitzpatrick
Top achievements
Rank 1
answered on 21 Apr 2010, 03:50 PM
It appears to be an IE6 issue. When the post back occurs, the white space is not preserved.

Works fine in FF, but not IE6.

Edit to clarify: I used your files to test. The whitespace is preserved in the selected item, but not in the drop down list when you expand the combo box to make another selection.
0
Kalina
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

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.
0
ranro
Top achievements
Rank 1
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">

 

 

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

 



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)

 

{

(o

as RadComboBox).DataSource = dataTable;

 

(o

as RadComboBox).DataTextField = "Name";

 

(o

as RadComboBox).DataValueField = "ID";

 

(o

as RadComboBox).DataBind();

 

}

}

}

0
Simon
Telerik team
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
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
0
ranro
Top achievements
Rank 1
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">
<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>

0
Simon
Telerik team
answered on 16 Jul 2010, 05:30 PM
Hello ranro,

Thank you for the clarification.

This was a bug in older versions of RadComboBox which we fixed recently.

Please upgrade to the latest version that is available to you and let me know how it goes.

Greetings,
Simon
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
Tags
ComboBox
Asked by
ranro
Top achievements
Rank 1
Answers by
Kalina
Telerik team
Bradley Fitzpatrick
Top achievements
Rank 1
ranro
Top achievements
Rank 1
Simon
Telerik team
Share this question
or