Telerik RadGrid - RadNumericTextBox OnValueChanged - Client Side - How Work WIth Current Item(Row)

Question

Here is ASPX :

  <telerik:RadGrid ID="grd_cart" runat="server" AutoGenerateColumns="False" Skin="WebBlue" OnItemCommand="grd_cart_ItemCommand">
    <GroupingSettings CollapseAllTooltip="Collapse all groups"></GroupingSettings>
    <MasterTableView>
        <Columns>
            <telerik:GridTemplateColumn FilterControlAltText="Filter TemplateColumn_ID column" HeaderText="ID" UniqueName="TemplateColumn_ID" Visible="False">
                <ItemTemplate>
                    <asp:Label ID="lbl_id" runat="server" Text='<%# Eval("ID") %>'></asp:Label>
                </ItemTemplate>
                <HeaderStyle Font-Bold="True" Font-Size="Medium" Width="30px" />
                <ItemStyle Font-Size="16px" Height="70px" />
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn FilterControlAltText="Filter TemplateColumn_Quantity column" HeaderText="Quantity" UniqueName="TemplateColumn_Quantity">
                <ItemTemplate>
                    <telerik:RadNumericTextBox ID="rad_n_txt_quantity" runat="server" CssClass="input-text qty text rad_n_txt_quantity_class" MaxValue="100" MinValue="1" NumberFormat-DecimalDigits="0" ShowSpinButtons="True" Value='<%# Convert.ToDouble(Eval("Quantity").ToString()) %>' ClientEvents-OnValueChanged="rad_n_value_changed"></telerik:RadNumericTextBox>
                </ItemTemplate>
                <HeaderStyle Font-Bold="True" Font-Size="Medium" Width="100px" />
                <ItemStyle Font-Size="16px" Height="70px" />
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

Here is JavaScript :

function rad_n_value_changed(sender, eventArgs) {
    var grid = $find("<%=grd_cart.ClientID %>");
    if (grid) {
        alert('grid found');
    } else {
        alert('grid not found');
    }
    var label_id = $find("<%=grd_cart.ClientID %>").get_masterTableView().get_dataItems()[0].findControl("lbl_id");
    alert(label_id.val());
}

This js codes alert lbl_id text of FIRST item(row) of grid.
How can i alert lbl_id text of CURRENT item(row) of grid.
Mean row that we clicked on RadNumericTextBox to change it's value.

Answer 1

Please have a look into the following code snippet which works fine at my end.

ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" DataSourceID="SqlDataSource1"
    AllowPaging="true" OnItemDataBound="RadGrid1_ItemDataBound">
    <MasterTableView DataKeyNames="OrderID">
        <Columns>
            <telerik:GridBoundColumn UniqueName="OrderID" DataField="OrderID" HeaderText="OrderID">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ShipCity" HeaderText="ShipCity" UniqueName="ShipCity" />
            <telerik:GridTemplateColumn HeaderText="value" UniqueName="value">
                <ItemTemplate>
                    <telerik:RadNumericTextBox runat="server" ID="value" NumberFormat-AllowRounding="false">
                        <NumberFormat GroupSeparator="" />
                        <ClientEvents OnValueChanged="checkValues" />
                    </telerik:RadNumericTextBox>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

C#:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        GridDataItem item = e.Item as GridDataItem;
        RadNumericTextBox Editbtn = item.FindControl("value") as RadNumericTextBox;
        Editbtn.Attributes.Add("rowindex", item.ItemIndex.ToString());
    }
}

JavaScript:

<script type="text/javascript">
    function checkValues(sender, args) {
        var radGrid = $find('<%=RadGrid1.ClientID %>');
        var masterTable = radGrid.get_masterTableView();
        var row = sender._element.getAttribute("rowindex");
        if (row != 0) {
            for (var i = 0; i < row; i++) {
                if (masterTable.get_dataItems()[i].findControl("value").get_value() < args.get_newValue()) {
                    sender.set_value(" ");
                    sender.focus();
                }
            }
        }
    }
</script>