telerik asp.net controls clear client-side

Question

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

thnx

Answer 1

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>

Answer 2

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

Answer 3

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