asp.net - ¿Cómo calcular el valor de la celda RadGrid en el lado del cliente?

javascript jquery

Question

Tengo telerik RadGrid que está en modo de edición. Cada celda contiene NumericTextBox. ¿Es posible calcular una celda basada en otras celdas en la misma fila (en el lado del cliente). Por ejemplo, si tengo una fila que contiene celdas como el precio y el artículo que deseo en cada cambio para calcular el precio total pero en el lado del cliente, sin ir al lado del servidor. ¿Es esto posible con RadGrid?

Answer 1

Es posible siempre que tenga los datos a través del enlace del lado del cliente también, muy probablemente a través de AJAX. De ser así, debería poder obtener todos los valores de la propiedad del origen de datos de la cuadrícula. Si vincula el lado del servidor de datos, se vuelve más difícil porque actualmente la cuadrícula no crea el origen de datos del lado del cliente en este caso.

Answer 2

Mira la demostración en el sitio de Telerik desde RadGrid -> Sección de escenarios de aplicación que usa cuadros de texto numéricos e ilustra lo que estás buscando, amigo.

Polla

Answer 3

Debido a que cada elemento está en una fila de la tabla, puede usar javascript para encontrar el elemento principal y luego recorrer todas las entradas para encontrar las que está buscando. Si va a utilizar jQuery, esto debería ser posible y si quisiera distinguir los cuadros de texto fácilmente, ¿podría aplicar una clase CssClass a cada cuadro de texto?

Answer 4

Gracias por todas sus respuestas, pero encontré la solución aquí en el foro telerik . Voy a pegar la solución aquí en caso de que alguien se quede atascado en el mismo problema.

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>

DO#

  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>