Hi I'm using telerik rad controls for asp I have to clear the inputs with javascript; but telerik controls (radbobox e.g.) generates a huge markup so how to clear telerik controls on a page in client-side?

thnx

Hi I'm using telerik rad controls for asp I have to clear the inputs with javascript; but telerik controls (radbobox e.g.) generates a huge markup so how to clear telerik controls on a page in client-side?

thnx

• asp
• javascript
• telerik

• Did you look in the documentation? – John Saunders Commented Jul 2, 2009 at 13:35
• yes but no sample like the question:( – dankyy1 Commented Jul 2, 2009 at 13:42
• what do you mean by "clear" RadComboBox? It is not rendered as an input. – Genady Sergeev Commented Jul 2, 2009 at 14:16
• yes i wanna clear radbobox,raddatepicker e.g..... all controls in page(for example for radbobox setting index 0 ) – dankyy1 Commented Jul 2, 2009 at 14:50

5 Answers 5

I have very simple working example. I hope this would give you some ideas on how to proceed. I have done some clearing for the textboxes.

 <Items>
        <telerik:RadComboBoxItem Text="Oragnes" Value="1" />
 </Items>
 <Items>
        <telerik:RadComboBoxItem Text="Apples" Value="2" />
 </Items>
 <Items>
        <telerik:RadComboBoxItem Text="Bananas" Value="" />
 </Items>

</telerik:RadComboBox>
  &nbsp;
<telerik:RadTextBox ID="rdTextBox" runat="server" ></telerik:RadTextBox>
&nbsp;
<telerik:RadTextBox ID="RadTextBox1" runat="server" ></telerik:RadTextBox>
&nbsp;
<telerik:RadTextBox ID="RadTextBox2" runat="server" ></telerik:RadTextBox>
      <br />
<input type="button" onclick="ClearRadControls()" value="Clear Rad Controls" />

<script language="javascript" type="text/javascript">

function   ClearRadControls()
{
    var radControl1TextBox = document.getElementById("<%=rdTextBox.ClientID  %>" + "_text");
    var RadTextBox1 = document.getElementById("<%=RadTextBox1.ClientID  %>" + "_text");
    var RadTextBox2 = document.getElementById("<%=RadTextBox2.ClientID  %>" + "_text");
    radControl1TextBox.value   = '';
    RadTextBox1.value = "";
    RadTextBox2.value = "";
}

</script>

telerik has somewhat useful help documentation for the asp radcontrols here:

http://www.telerik./help/aspnet-ajax/introduction.html

To answer your question for the bobox:

Use telerik's $find function to return the telerik object of the control. Then you can use the client side functions built in to the controls.

function ClearSelection() {
    var bo = $find("<%= yourCombo.ClientID %>");
    bo.clearSelection(); 
  }

http://www.telerik./help/aspnet-ajax/bobox-client-side-radbobox.html

You can use telerik's $find function to return the telerik object of the control.

<script type="text/javascript">

    function Something() {
        //...
        $find("<%= yourCombo.ClientID %>").clearSelection();
        //... 
    }
</script>

telerik has somewhat useful help documentation for the asp radcontrols here:

http://www.telerik./help/aspnet-ajax/introduction.html

http://www.telerik./help/aspnet-ajax/bobox-client-side-radbobox.html

This could be off topic but the JS framework Dojo could be of help . See this code I use to uncheck all my checkboxes. These controls are all generated on the fly.

> // Uncheck the children
>                   dojo.forEach(
>                       dojo.query("input[type='checkbox']",
> subList),
>                       function(checkboxTag) {
>                           checkboxTag.checked = false;
>                       }
>                   );

I found a js solution over a blog as..

on sample code with I searched up for named "sampleDivInGrid" div item inside a RadGrid..

                 function GetServerElement(serverID, tagName) {
                     if (!tagName)
                         tagName = "*"; //* means all elements  
//i give here the Grid clientID which is owner of the control that we search 
                     var grid = document.getElementById("<%=grdItems.ClientID %>");
                     var elements = grid.getElementsByTagName(tagName);
                     for (var i = 0; i < elements.length; i++) {
                         var element = elements[i];
                         if (element.id.indexOf(serverID) >= 0)
                             return element;
                     }
                 }


                 function OnClientIndexChanged(sender, eventArgs) {

                     var itm = GetServerElement("sampleDivInGrid", "div");
                     var item = eventArgs.get_item();
                     var itmTxt = item.get_text();
                     alert(itmTxt);
                 }