How do you reference controls on item client-side?

[Christopher]

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);
    alert(cell.innerHTML);
    return;
    }

I am using Telerik version 2013.1.417.40

Any help would be appreciated. 

Thanks,
Chris J.


.

[Vasil]

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 = numericTextBoxInputElement.id;
    var targetID = id.replace("Products" , "Percent");
    var targetNumeric = $find(targetID);
}

Regards,
Vasil
Telerik

[Christopher]

Vasil,

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(radinput.name, "Editor")) {
        // Calcuate new percentage
        // var supply
        if ((total > 0) && (supply > 0)) {
            radinput.value = (supply * 100 / total).toFixed(2).toString() + " %";
        }
        else {
            radinput.value = ""
        }
        break;
    }
}

Thanks again for your suggestion.

Chris