WebTextEditor with NullText cannot be cleared via Javascript

935

Insula Group Pty Ltd posted over 11 years ago

Hi All,

I am using Infragistics v11.2.20112.2086. I have two text boxes with the NullText property set.

a. The user enters a value in TextBox A

b. clicks a checkbox to copy the value to text box B.

c. When the user then clears text box A, it clears text box B successfully via a javascript function.

postalField.set_text(source.get_text());

However, if step a is skipped, i.e. text bos B is not given a non-blank value initially, then this text box can never be completely blank. If the user enters text in text box A and immediately clears the text in text box A, the text box B is not cleared.

I have confirmed that if If I leave NullText property blank for the text box, this issue does not exist.

I am currently setting the value to " " if it sender.get_text() if it is blank and this seems to fix the issue for now.

Is there any other alternative to solve this problem?

Thanks!

935

Insula Group Pty Ltd posted over 11 years ago in reply to Alan Halama

Thanks Alan, this fix solves the issues I have highlighted in this request.

You are a life saver!
Cancel
Reply

Cancel

22852

Verified Answer

Offline Alan Halama posted over 11 years ago in reply to Insula Group Pty Ltd

Hello,

I saw that the behavior was different between 11.2.20112.2086 and 12.2.20122.2121 and that the behavior of the 12.2 volume with service release is what you want. I have now done a little more testing and found what is different. It is the implementation of set_value and set_text for the WebTextEditor.

In 11.2.20112.2086 the implementation is:

set_text:function(val)
{
    /// <summary locid="P:J#Infragistics.Web.UI.WebTextEditor.text">Sets text.</summary>
    /// <param name="val" type="String">Text for control</param>
    this._setVS(this._text = val);
    this._repaint();
    if(this._fix == 1)
        this._old = this._instant(true);
},
set_value:function(val)
{
    /// <summary locid="P:J#Infragistics.Web.UI.WebTextEditor.value">Sets value for control.</summary>
    /// <param name="val">Value for control. It can be String, Number or Date depending on type of control.</param>
    this.set_text('' + ((val == null) ? '' : val));
    this._fixNull();
},

In 12.2.20122.2121 the implementation is:

set_text:function(val)
{
    /// <summary locid="P:J#Infragistics.Web.UI.WebTextEditor.text">Sets text.</summary>
    /// <param name="val" type="String">Text for control</param>
    this._setVS(this._text = val = val == null ? '' : val.toString());
    this._nullT = !val;
    this._fixNull();
    this._repaint();
    if(this._fix == 1)
        this._old = this._instant(true);
},
set_value:function(val)
{
    /// <summary locid="P:J#Infragistics.Web.UI.WebTextEditor.value">Sets value for control.</summary>
    /// <param name="val">Value for control. It can be String, Number or Date depending on type of control.</param>
    this.set_text('' + ((val == null) ? '' : val));
},

You can correct the behavior in my original sample with the version you are using by adding a script after the closing html tag that changes these methods on the prototype for $IG.WebTextEditor:

<script type="text/javascript">
    <!--
    $IG.WebTextEditor.prototype.set_text = function(val) {
        /// <summary locid="P:J#Infragistics.Web.UI.WebTextEditor.text">Sets text.</summary>
        /// <param name="val" type="String">Text for control</param>
        this._setVS(this._text = val = val == null ? '' : val.toString());
        this._nullT = !val;
        this._fixNull();
        this._repaint();
        if (this._fix == 1)
            this._old = this._instant(true);
    };
    $IG.WebTextEditor.set_value = function(val) {
        /// <summary locid="P:J#Infragistics.Web.UI.WebTextEditor.value">Sets value for control.</summary>
        /// <param name="val">Value for control. It can be String, Number or Date depending on type of control.</param>
        this.set_text('' + ((val == null) ? '' : val));
    };
    // -->
</script>

Let me know if you have any questions with this matter.

935

Insula Group Pty Ltd posted over 11 years ago in reply to Insula Group Pty Ltd

Alan,

The issue can clearly be seen in the code below:

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

<%@ Register Assembly="Infragistics35.Web.v11.2, Version=11.2.20112.2086, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" Namespace="Infragistics.Web.UI.EditorControls" TagPrefix="ig" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">

function changeState() {
var editorA = $find("WebTextEditor1");
var editorB = $find("WebTextEditor2");
var copyto = document.getElementById("copyto");
editorB.set_value(editorA.get_value());
editorB.set_text(editorA.get_text());
editorB.set_enabled(!copyto.checked);

}

</script>
<script type="text/javascript" id="igClientScript1">

function WebTextEditor1_ValueChanged(sender, eventArgs)
{
///<summary>
///
///</summary>
///<param name="sender" type="Infragistics.Web.UI.WebTextEditor"></param>
///<param name="eventArgs" type="Infragistics.Web.UI.TextEditorValueChangedEventArgs"></param>
var copyto = document.getElementById("copyto");
if (copyto.checked == true) {
var editorB = $find("WebTextEditor2");
editorB.set_value(sender.get_value());
editorB.set_text(editorA.get_text());
}

}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>

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

<ig:WebTextEditor ID="WebTextEditor1" runat="server" NullText="Enter a Value">
<ClientEvents ValueChanged="WebTextEditor1_ValueChanged" />
</ig:WebTextEditor>
<input type="checkbox" id="copyto" onclick="changeState()"/>
<ig:WebTextEditor ID="WebTextEditor2" runat="server" NullText="Enter A Value">
</ig:WebTextEditor>

</div>
</form>
</body>
</html>
Cancel
Reply

Cancel
935

Insula Group Pty Ltd posted over 11 years ago in reply to Alan Halama

Hi Alan,

Thanks for your help. I am using Version=11.2.20112.2086 and not the latest version. Using this version set_value does not work for me, the text editor control B is always blank. My code is

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

<%@ Register Assembly="Infragistics35.Web.v11.2,Version=11.2.20112.2086 , Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" Namespace="Infragistics.Web.UI.EditorControls" TagPrefix="ig" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">

function changeState() {
var editorA = $find("WebTextEditor1");
var editorB = $find("WebTextEditor2");
var copyto = document.getElementById("copyto");
editorB.set_value(editorA.get_value());
editorB.set_enabled(!copyto.checked);

}

</script>
<script type="text/javascript" id="igClientScript1">

function WebTextEditor1_ValueChanged(sender, eventArgs)
{
///<summary>
///
///</summary>
///<param name="sender" type="Infragistics.Web.UI.WebTextEditor"></param>
///<param name="eventArgs" type="Infragistics.Web.UI.TextEditorValueChangedEventArgs"></param>
var copyto = document.getElementById("copyto");
if (copyto.checked == true) {
var editorB = $find("WebTextEditor2");
editorB.set_value(sender.get_value());
}

}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>

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

<ig:WebTextEditor ID="WebTextEditor1" runat="server" NullText="Enter a Value">
<ClientEvents ValueChanged="WebTextEditor1_ValueChanged" />
</ig:WebTextEditor>
<input type="checkbox" id="copyto" onclick="changeState()"/>
<ig:WebTextEditor ID="WebTextEditor2" runat="server" NullText="Enter A Value">
</ig:WebTextEditor>

</div>
</form>
</body>
</html>
Cancel
Reply

Cancel
22852

Offline Alan Halama posted over 11 years ago in reply to Insula Group Pty Ltd

Hello,

I have done some testing with my sample after updating the changeState() function to be:

function changeState() {
    var editorA = $find("WebTextEditor1");
    var editorB = $find("WebTextEditor2");
    var copyto = document.getElementById("copyto");
    editorB.set_value(editorA.get_value());
    editorB.set_enabled(!copyto.checked);
}

With this change I don't reproduce the issue that you have. Of if I am I am not looking at it correctly. Please update my sample so that it does reproduce the issue and provide me with the exact steps to duplicate the issue so that I may look into this.

Let me know if you have any questions with this matter.
Cancel
Reply

Cancel