Client API: read values inside a radNumerictextBox

[marco]

Hi

I have a radGrid with template columns.

Inside one of them, there is radNumericTextBox which fire the client events onValueChanged, that go through each row to make some calculation.

I'd like to make everything client-side without any postback, but I'm not able to access the value of the radNumericTextBox.

Is there a way to do this?

 

Here is the code:

 

<telerik:RadGrid ID="GrdCartList" runat="server" AutoGenerateColumns="false" OnNeedDataSource="GrdCartList_NeedDataSource" Skin="Bootstrap">
    <MasterTableView DataKeyNames="ProductId">
        <Columns>
            <telerik:GridTemplateColumn DataField="ProductId" FilterControlAltText="Filter ProductId column" FilterControlWidth="100px"
                HeaderText="Id" UniqueName="ProductId" SortExpression="ProductId" AutoPostBackOnFilter="true">
                <ItemTemplate>
                    #<%# Eval("ProductId") %>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn DataField="ProductName" FilterControlAltText="Filter ProductName column" FilterControlWidth="350px"
                HeaderText="Prodotto" UniqueName="ProductName" SortExpression="ProductName" AutoPostBackOnFilter="true">
                <ItemTemplate>
                    <%# Eval("BrandName") %> - <strong><%# Eval("ProductName") %></strong>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn DataField="ProductSellPrice" FilterControlAltText="Filter ProductSellPrice column" FilterControlWidth="150px"
                HeaderText="Prezzo" UniqueName="ProductSellPrice" SortExpression="ProductSellPrice" AutoPostBackOnFilter="true">
                <ItemTemplate>
                    <%# Eval("ProductSellPrice") %>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn DataField="ScProductQuantity" FilterControlAltText="Filter ScProductQuantity column" FilterControlWidth="150px"
                HeaderText="Quantita'" UniqueName="ScProductQuantity" SortExpression="ScProductQuantity" AutoPostBackOnFilter="true">
                <ItemTemplate>
                    <telerik:RadNumericTextBox ID="TxtQuantity" runat="server" Value='<%# Convert.ToInt32(Eval("ScProductQuantity")) %>' NumberFormat-DecimalDigits="0"
                        Type="Number" MinValue="1" ShowSpinButtons="true" >
                        <ClientEvents OnValueChanged="onClientValueChanged" />
                    </telerik:RadNumericTextBox>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>



<script type="text/javascript">
    function onClientValueChanged(sender, args) {
        calculateCart();
    }

    function calculateCart() {
        var grid = $find("<%=GrdCartList.ClientID %>");
        var masterTableView = grid.get_masterTableView();
        var selectedRows = masterTableView.get_dataItems();
        var total = 0;

        for (var i = 0; i < selectedRows.length; i++) {
            var row = selectedRows[i];
            var cellPrice = masterTableView.getCellByColumnUniqueName(row, "ProductSellPrice")
            var cellQty = masterTableView.getCellByColumnUniqueName(row, "ScProductQuantity")
            alert(cellQty.innerHTML);

            // total += (cellPrice.innerHTML * cellQty.innerHTML);

        }
    }
</script>

 

 

 

[Konstantin Dikov]

Hi Marco,

Since the innerHTML property will return the entire content of the cell, which will include the rendered HTML of the RadNumericTextBox control, in order to retrieve the value you will have to get reference to the client object of the control and the use the get_value() method.

Following is the modified JavaScript that will calculate correctly your total:

<script type="text/javascript">
    function onClientValueChanged(sender, args) {
        calculateCart();
    }

    function calculateCart() {
        var grid = $find("<%=GrdCartList.ClientID %>");
        var masterTableView = grid.get_masterTableView();
        var selectedRows = masterTableView.get_dataItems();
        var total = 0;

        for (var i = 0; i < selectedRows.length; i++) {
            var row = selectedRows[i];
            var cellPrice = masterTableView.getCellByColumnUniqueName(row, "ProductSellPrice");
            var cellQty = masterTableView.getCellByColumnUniqueName(row, "ScProductQuantity");

            var cellQtyValue = $telerik.findControl(cellQty, "TxtQuantity").get_value();

            total += (cellPrice.innerHTML * cellQtyValue);
        }

        alert(total);
    }
</script>

Hope this helps.


Regards,
Konstantin Dikov
Telerik