clientevents-onvaluechanged getting the datakey

[marksweat]

I've got a RadNumericTextBox's in a grid and a client side "OnValueChanged" event. How can I get the data key for the row of the control when the event fires? How can I find other controls in the same row.

 

                function onValueChanged(sender, args) {
    }

[Rumen]

Hi,

RadNumericTextBox does not have direct knowledge for the Grid rows and the controls in them, but you can use the sender.get_element(); method to get reference to the HTML wrapper of the radnumeric component and using jQuery or JavaScript to find the other elements/components in the row:

<telerik:RadNumericTextBox ID="RNTB1" runat="server">
    <ClientEvents OnValueChanged="OnValueChanged" />
</telerik:RadNumericTextBox>
<script type="text/javascript">
function OnValueChanged(sender, eventArgs) {
    var element = sender.get_element();
    debugger;
}
</script>

Regards,
Rumen
Progress Telerik

[marksweat]

Rumen,

This what I ended up doing while waiting for you reply. This seems to work. I don't know why.

function onValueChanged(sender, args)
{
     var valueRadNumberBox = sender;
     var dataItem = valueRadNumberBox.get_parent();
     var schedule_master_id = dataItem.getDataKeyValue("schedule_master_id");
     var checkBox = dataItem.findElement("SelectCheckBox");

Telerik seems to be miss a key element in their system. Or, maybe I'm just be too dumb to find it. There's no document that shows how all this stuff fits together such as a hierarchy of classes. I have the same issue with my C# code on the server side. I know the info I need is available, buried some where in you class hierachy, its that I just don't understand what class I have when I get an argument and what its parents are and so forth.

For example I never know when to do the above using get_element(), findControl(), or access a Cell. I always ending trying techniques I've already used in my code and the googling around until something looks good rather than really understanding what's going on. The Telerik docs for these client events is very lean with the small code examples have just showing alerts or some other trivial that nobody would ever do in a commercial application that doesn't show how things fit together. This trial and error approach is very frustrating and time consuming.

Here's another example, where I don't know if I'm getting info the most efficient way... I've got a check box where I want to find other items in the row when the user checks the box. I tripped across the .parentNode.parentNode bit below in one of my googling frenzies try to find something that worked. I could have never figured this out via Telerik documentation or looking a the classes in the debugger. As I said, I know the info is there, its just too hard to know how to access it.

                function CheckItem(itemCheckBox)
                {
                    var masterTableView = RadGrid1.get_masterTableView();
                    DataItems = masterTableView.get_dataItems();
                    var row = itemCheckBox.parentNode.parentNode;
                    var rowOffset = 3;
                    if (masterTableView.PageCount > 1)
                        rowOffset = 4;
                    var thisRowIndex = row.rowIndex - rowOffset;
                    var dataRow = DataItems[thisRowIndex];
                    var schedule_master_id = dataRow.getDataKeyValue("schedule_master_id");
                    var valueRadNumericBox = dataRow.findControl("BudgetRadNumericTextBox");

Another question here is that I seem to have to offset the row index to skip over header elements to find the right data items in the grid. I think the number of rows I have to skip depending on whether or not a pager (and other header features) is included in the grid. Of course the pager might or might not be "there" depending on the number of rows in the grid. You can see I look for the number of pages in the grid to figure out if I need to offset by "one more" or not. Is there a better way to do the above? I'm pretty sure I'd have to go in a change "3" and "4" if I turned off the grid export header row I have in my current grid and this makes for brittle code.

--Mark

 

[Rumen]

Hi Mark,

Thank you for your valuable feedback. We will consider adding a documentation or a knowledge base article that will guide your fellow developers in similar scenarios.

Generally, you can use the $telerik.findControl or findElement methods to get the job done as discussed in the following forum threads:

http://www.telerik.com/forums/how-to-change-and-get-value-from-a-dropdownlist-in-a-radgrid-column#jIjRiaOYhkucLZ82pztwow.

and

http://www.telerik.com/forums/find-control-in-insert-item-grid-client-side#2tgx6AugyU6c562P--mIIg

Here is more information about the methods:

$telerik.findControl() - Finds the client-side Telerik control object by provided server-side ID of the control object in the collection of child elements of the parent DOM element

$telerik.findElement() - Finds the HTML DOM wrapper element of the Telerik control by provided server-side ID in the collection of child elements of the parent DOM element.

findControl - This RadGrid GridDataItem method takes control id for an argument and returns the corresponding client object of RadControl or ASP.NET AJAX control inside the grid row. Useful to reference client objects of controls inside a grid item cell on the client.

findElement - This RadGrid GridDataItem method takes control id for an argument and returns the corresponding DOM element of html or rendered server control inside the grid row. Useful to reference html elements of controls inside a grid item cell on the client.

I have also attached two samples which shows two approaches to get reference to elements through indexing and through the API above.

Best regards,
Rumen
Progress Telerik