Javascript txtbox.value='sometxt' doesn't refresh display

[CSurieux]

Hello,

I have a TextBox which could be a RadTextBox or an asp:TextBox.
When it is a RadTextBox and I set it's value on clientside using myBox.value="newtext", the value is not refreshed on display.
How to force redraw independently of he fact it is rad or not.

Thank you fr help.
CS

[Schlurk]

For the RadTextBox I believe the get_value and set_value client-side functions are the way to go. You can find more information on each RadInput type and their client-side objects in this documentation article.

[CSurieux]

Hi,

Thanks but if it is a normal textbox ? is set_value working ?

CS

[Dimo]

No. You should use set_value() for RadTextBox and .value for asp:TextBox.

Regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[CSurieux]

Hello Dimo,
Sure but how to identify a RadTextBox or a normal TextBox on the client ?
That's all my original question.

Something like

if ( mytextBox.set_value)
    mytextBox.set_value(newval);
else mytextBox.vale=newval;


Regards
CS

[Shinu]

Hi Christia,

Try the following approach in order to differentiate between Telerik textbox and ASP.NET textbox.

JavaScript:

<script type="text/javascript">
    function getControl(textboxID) {
        var text = $find(textboxID);
        if (text == null) {
            alert("standard textbox");
        }
        else {
            alert("Telerik");
        }
    }
</script>

-Shinu.

[CSurieux]

Hi Shin,

I don't think that will work, asp:TextBox will result as Telerik...

CS

[Dimo]

Christian,

Your question makes me believe that you have neglected to familiarize yourself with the RadTextBox HTML rendering. If this is the case, then use the provided documentation...

http://www.telerik.com/help/aspnet-ajax/input_appearancecssfile.html
(setion 2 - Layout of the input control)

... or any web inspector such as Firebug.

There is no "correct" or "recommended" way to accomplish your task. Use your common sense and basic knowledge of HTML and Javascript operations with DOM properties. There are some easily noticable patterns that you can use to distinguish between the RadTextBoxes and asp:TextBoxes - both types of controls contain <input> elements, but everything else is different - HTML structure, CSS classes, inline styles and client ID patterns.


Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[CSurieux]

Hello Dimo,

My previous answer seems to have disappeared, may by blocked by some word checker.
In case it doesn't reach the forum, I was just saying usually I get fast and concise answer on your forums.
May be I neglected reading the full doc but I don't neglected paying the license fees.
Is sending back users to long documentation the task of support  in each case ?
I am not a javascript addict, I suppose you don't know each computer language ?

Regards
CS

[CSurieux]

Dimo,

Even reading your documentation I still don't understand how I could differentiate an asp:texbox from a rad:texbox in javascript.
I did lot of search on forums and in hlp file and still nothing.

Thanks for a real help if available
CS

[Dimo]

Hello Christian,

OK, here is how to do it.

The HTML rendering of RadTextBox basically consists of several <input> elements wrapped in a container. You need to isolate the textbox, which carries the RadTextBox client control instance and skip the others. If an <input> element is neither of the three RadTextBox <input> element types, and is not a checkbox/radio button, etc., then it is an asp:TextBox.

<span>
<input type="text" class="riTextBox riEnabled" id="RadTextBox1_text" />
<input type="text" id="RadTextBox1" style="visibility:hidden;width:1px;height:1px"  />
<input type="hidden" id="RadTextBox1_ClientState" />
</span>

There is one more RadTextBox rendering mode, which uses a <div> and a <table> instead of a <span>, but in that case the logic is the same and I will review only the above scenario for simplicity.


Let me know if there is anything unclear.

By the way, I am eager to know the following things, so please tell me:

1. Why do you use asp:TextBoxes and RadTextBoxes at the same time?
2. What is this scenario in which are setting values to a number of controls, and you have a collection of "something", but you don't have enough information about this "something" beforehand?

<%@ Page Language="C#" %>
<%@ 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 runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls for ASP.NET AJAX</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<h1>Set values to random textboxes</h1>

Value: <asp:TextBox ID="ValueTB" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Set" OnClientClick="return setValues()" />

<script type="text/javascript">

function setValues()
{
    setUsingIDs();
    setUsingDOM();

    return false;
}

</script>

<h2>Using IDs</h2>

<p>This approach assumes that you have a collection of control IDs</p>

asp:TextBox 1 <asp:TextBox ID="TextBox1" runat="server" />
<br /><br />
RadTextBox 1 <telerik:RadTextBox ID="RadTextBox1" runat="server" />
<br /><br />
asp:TextBox 2 <asp:TextBox ID="TextBox2" runat="server" />
<br /><br />
RadTextBox 2 <telerik:RadTextBox ID="RadTextBox2" runat="server" />

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">

function setUsingIDs()
{
    var tbValue = $get("<%= ValueTB.ClientID %>").value;

    var IDs = new Array(
        "<%= TextBox1.ClientID %>",
        "<%= RadTextBox1.ClientID %>",
        "<%= TextBox2.ClientID %>",
        "<%= RadTextBox2.ClientID %>"
    );

    for (var j = 0; j < IDs.length; j++)
    {
        var cci = $find(IDs[j]);
        // check whether there is a Telerik textbox instance attached to this ID
        // the type name check is generally not necessary if the ID collection is valid and contains only texbox control IDs
        if (cci != null && Object.getType(cci).getBaseType().getName() == "Telerik.Web.UI.RadInputControl")
        {
            cci.set_value(tbValue);
            continue;
        }

        // the ID is of an asp:TextBox
        $get(IDs[j]).value = tbValue;
    }
}

</script>
</telerik:RadCodeBlock>

<h2>Using DOM elements</h2>

<p>This approach assumes that you have a collection of <input> elements</p>

<asp:Panel ID="Panel1" runat="server">
asp:TextBox 3 <asp:TextBox ID="TextBox3" runat="server" />
<br /><br />
RadTextBox 3 <telerik:RadTextBox ID="RadTextBox3" runat="server" />
<br /><br />
asp:TextBox 4 <asp:TextBox ID="TextBox4" runat="server" />
<br /><br />
RadTextBox 4 <telerik:RadTextBox ID="RadTextBox4" runat="server" />
</asp:Panel>

<telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">
<script type="text/javascript">

function setUsingDOM()
{
    var tbValue = $get("<%= ValueTB.ClientID %>").value;

    var inputs = $get("<%= Panel1.ClientID %>").getElementsByTagName("INPUT");

    for (var j = 0; j < inputs.length; j++)
    {
        // skip checkboxes, radiobuttons, etc.
        if (!inputs[j].type || inputs[j].type != "text")
            continue;

        // skip RadTextBox visible input elements
        if (
            inputs[j].id != "" &&
            inputs[j].id.indexOf("_text") == inputs[j].id.length - 5 &&
            $find(inputs[j].id.replace("_text", "")) != null
        )
        {
            continue;
        }

        // check whether the textbox is a RadTextBox hidden input element, because
        // the RadTextBox client control instances are attached to these hidden input elements
        if (inputs[j].id != "" && $get(inputs[j].id + "_text") != null && inputs[j].style.visibility == "hidden")
        {
            // if true, then we should set the value using the RadTextBox API
            var rtb = $find(inputs[j].id);
            if (rtb)
            {
                rtb.set_value(tbValue);
                continue;
            }
        }

        // the input element is an asp:TextBox
        inputs[j].value = tbValue;
    }
}

</script>
</telerik:RadCodeBlock>

</form>
</body>
</html>

Regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[CSurieux]

Hello Dimo,

The page is created by a sub assembly with a config switch : UseTelerik=true/false.

Concerning your detailled answer, thanks.
I just discovered I was using $get and that it was not working with Telerik.
Then I discovered that testing if (myFindTextBox.set_value) could be ok to differntiate asp and telerik TextBox.
Is it true and does it works for each browser.

Regards
CS

[Dimo]

>> Then I discovered that testing if (myFindTextBox.set_value) could be ok to differntiate asp and telerik TextBox. Is it true and does it works for each browser.

Technically, yes, but if myFindTextBox.set_value is defined as a function, this means that myFindTextBox is a client control instance. This very fact means that myFindTextBox is NOT an asp:TextBox, because they don't have client control instances. So no need to check further for set_value.


Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Dimo]

P.S.

In addition, the example I provided you is too complex for your scenario, because as far as I understand, you are NOT using both types of textboxes at the same time. Since you can find that on the server, then you can send some property to the client, so that the Javascript code is a lot simpler and without that many checks.

[CSurieux]

Thanks Dimo,

The if ( myTb.set_value) is Ok for me.
Concerning serverside, I have no easy way to set a flag somewhere.

Regards
CS