Client API: read values inside a radNumerictextBox

2 posts, 0 answers
  1. marco
    marco avatar
    33 posts
    Member since:
    Sep 2007

    Posted 07 Apr 2015 Link to this post

    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>

     

     

     

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1803 posts

    Posted 10 Apr 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top