White space between words being removed.

10 posts, 0 answers
  1. ranro
    ranro avatar
    50 posts
    Member since:
    Aug 2007

    Posted 01 Apr 2010 Link to this post

    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.

  2. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 07 Apr 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bradley Fitzpatrick
    Bradley Fitzpatrick avatar
    3 posts
    Member since:
    Apr 2010

    Posted 16 Apr 2010 Link to this post

    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>

  5. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 21 Apr 2010 Link to this post

    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.
  6. Bradley Fitzpatrick
    Bradley Fitzpatrick avatar
    3 posts
    Member since:
    Apr 2010

    Posted 21 Apr 2010 Link to this post

    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.
  7. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 26 Apr 2010 Link to this post

    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.
  8. ranro
    ranro avatar
    50 posts
    Member since:
    Aug 2007

    Posted 12 Jul 2010 Link to this post

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

     

    }

    }

    }

  9. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 14 Jul 2010 Link to this post

    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
  10. ranro
    ranro avatar
    50 posts
    Member since:
    Aug 2007

    Posted 14 Jul 2010 Link to this post

    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>

  11. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 16 Jul 2010 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017