How to calculate RadGrid cell value on Client side?

Question

I have telerik RadGrid which is in edit mode. Each cell contains NumericTextBox. Is it possible to calculate one cell based on other cells in the same row (on client side). For example if I have a row which contains cells like price and item I want on every change to calculate total price but on client side, without going to server side. Is this possible with RadGrid?

Answer 1

It is possible provided you got the data through client side binding as well, most likely through AJAX. If so, you should be able to get all values from the datasource property of the grid. If you bind the data server side it gets harder because currently the grid does not build the client side datasource in this case.

Answer 2

Check out the demo on the Telerik site from RadGrid -> Application scenarios section which uses numeric textboxes and illustrates what you are looking for, dude.

Dick

Answer 3

Because each item is in a table row you could use javascript to find the parent item and then loop through all the inputs to find the ones you are looking for? If you are going to use jQuery this should be possible and if you wanted to distinguish the textboxes easily you could apply a CssClass to each TextBox?

Answer 4

Thanks for all your answers but I found the solution here at telerik forum. I'll just paste the solution here in case that somebody get stuck on the same issue.

ASPX:

<Columns> 
    <rad:GridTemplateColumn UniqueName="Price" HeaderText="Price">
    <EditItemTemplate> 
        <radI:RadNumericTextBox ID="txtPrice" runat="server">  
        </radI:RadNumericTextBox> 
    </EditItemTemplate> 
    </rad:GridTemplateColumn> 
    <rad:GridTemplateColumn UniqueName="Quantity" HeaderText=" Number of Items">  
    <EditItemTemplate> 
        <radI:RadNumericTextBox ID="txtQuantity" runat="server">  
        </radI:RadNumericTextBox> 
    </EditItemTemplate> 
    </rad:GridTemplateColumn> 
    <rad:GridTemplateColumn UniqueName="TotalAmount" HeaderText="Total">
    <EditItemTemplate> 
        <radI:RadNumericTextBox ID="txtTotalAmount" runat="server">  
        </radI:RadNumericTextBox> 
    </EditItemTemplate> 
    </rad:GridTemplateColumn> 
</Columns>

C#

  protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)  
    {  

    if (e.Item is GridDataItem && e.Item.IsInEditMode)  
    {  
        GridDataItem item = (GridDataItem)e.Item;  
        RadNumericTextBox txtPrice= item.FindControl("txtPrice") as RadNumericTextBox;       // Get the textbox for column Price   
        RadNumericTextBox txtQuantity= item.FindControl("txtQuantity") as RadNumericTextBox;    // Get the textbox for column Quantity     
        RadNumericTextBox txtTotalAmount= item.FindControl("txtTotalAmount") as RadNumericTextBox; // Get the textbox for column "TotalAmount", if it is template as shown in aspx    

        txtPrice.Attributes.Add("onFocusout", "return calculate('" + txtPrice.ClientID + "','" + txtQuantity.ClientID + "','" + txtTotalAmount.ClientID + "')");  
        txtQuantity.Attributes.Add("onFocusout", "return calculate('" + txtPrice.ClientID + "','" + txtQuantity.ClientID + "','" + txtTotalAmount.ClientID + "')");  
        txtTotalAmount.Attributes.Add("onfocus", "return calculate('" + txtPrice.ClientID + "','" + txtQuantity.ClientID + "','" + txtTotalAmount.ClientID + "')");  
    }  
}

JavaScript:

<script type="text/javascript">  
function calculate(price, quantity, totalAmount)   
{  
    var text1 = $find(price); //I used Asp.net Ajax find method
    var text2 = $find(quantity);  
    var text3 = $find(totalAmount);  
    var total = text1.GetValue() * text2.GetValue();  
    text3.SetValue(total);  
}  
</script>