How do you reference controls on item client-side?

3 posts, 0 answers
  1. Christopher
    Christopher avatar
    10 posts
    Member since:
    Dec 2008

    Posted 18 Dec 2013 Link to this post

    In my RadTreeList I have two data columns displayed. The first column is a number and the second column is a percent. On the client side I wish to update the percent value when the number changes; and when the percent changes I wish to update the number. Both columns are defined as TreeListNumericColumns and are configured to use a RadNumericTextBox. I have attached OnValueChanged events to both columns.

    Using JavaScript if the number changes I can determine the new number, but I do not know how to get a reference to the percent column so I can update the percent. I know how to get a reference to the item containing the numeric column updated and I can get a reference to the table cell containing the percent RadNumericTextBox but I need a reference to the RadNumericTextBox which is in the innerHTML so that I can update the Percent..

    Here is my Javascript code for the OnValueChangedEvent when the number changes. This all works but I cannot figure out how to get a reference to the RadNumericTextBox containing the percent so I can update the value displayed on the client.
    function NumberValueChanged(sender, eventArgs) {
        var treelist = $find('<%=rtvProducts.ClientID %>');
        var numericTextBox = sender.get_element();                    
        var item = treelist.getContainerItem(numericTextBox);   
        var index = item.get_displayIndex();                                     
        var column = treelist.getColumnByUniqueName('Percent');
        var colname = column.get_uniqueName();
        var cell = treelist.getCellByColumnUniqueName(item, colname); 
    I am using Telerik version 2013.1.417.40

    Any help would be appreciated. 

    Chris J.

  2. Vasil
    Vasil avatar
    1541 posts

    Posted 23 Dec 2013 Link to this post

    Hello Chris,

    The two inputs has own row, and their ID should be similar. The only difference will be the name of the input itself, so you can use string replace method to get the ID of the rest inputs in your row. Here is an example:

    function NumberValueChanged(sender, eventArgs) {
        var treelist = $find('<%=rtvProducts.ClientID %>');
        var numericTextBoxInputElement = sender.get_element();
        var id =;
        var targetID = id.replace("Products" , "Percent");
        var targetNumeric = $find(targetID);

    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. DevCraft R3 2016 release webinar banner
  4. Christopher
    Christopher avatar
    10 posts
    Member since:
    Dec 2008

    Posted 26 Dec 2013 Link to this post


    Thanks for your suggestion. Your approach is probably easier than the approach I eventually took. Once I got a reference to the cell I used getElementByTagName. After I was able to examine the innerHTML, I was figured out what to search for in the cell -  that is why I was searching for "Editor". (Total was calcuated beforehand and was used to calculate the percentage. Supply was the number in the numeric column.)
    var inputs = cell.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        var radinput = inputs[i];
        if (endsWith(, "Editor")) {
            // Calcuate new percentage
            // var supply
            if ((total > 0) && (supply > 0)) {
                radinput.value = (supply * 100 / total).toFixed(2).toString() + " %";
            else {
                radinput.value = ""

    Thanks again for your suggestion.


Back to Top