Calculate value in a cell in RadGrid - BatchEdit

[Tan]

I am using a grid 2014 Q3 that has 4 columns: Service, Unit, Price, TotalPrice. The grid is in Batch Edit mode using client-side api.

Each column has <ItemTemplate> and <ItemEditTemplate>.
Column 1: Inside <ItemEditTemplate> I have a RadDropDownList.
Column 2: Inside <ItemEditTemplate> I have a RadNumericTextBox for Units.
Column 3: Inside <ItemEditTemplate> I have a RadNumericTextBox for Price.
Column 4: Inside <ItemEditTemplate> I have a RadNumericTextBox for TotalPrice.

I have tried to do the following for the last couple of days with little success:
1. Calculate total price when user enters a value in unit and/or price column.
2. Update column 4 with total price.

I subscribed to various client events, such as BatchEditClosed, BatchEditCellValueChanged. I noticed the client-side function is called 4 times, one for each cell.

Is there a way I can do the following:

1. Get the row once edit mode is complete/closed and have the function called once.
2. Get the values for each cell.
3. Calculate total price.
4. Update TotalPrice column with calculated value.

Could you please provide guidance with sample code snippet?

Thanks,
Tan

[Viktor Tachev]

Hi Tan,

Based on your description I guess that the field TotalPrice wouldnot be editable by the user. The value in it will be calculated based on the Unit and Price fields. Please correct me if I am wrong.

In order to implement the functionality you could use GridCalculatedColumn. It can be used to calculate the total price automatically. Note that the column will use the values from the data source to perform the calculations. This means that when the user changes a value you need to save the changes in order for the calculation to be updated. If you would like more information on this column type you would find this article interesting.

Regarding your other query. The batch editing events are called automatically by RadGrid. You cannot make the OnBatchEditClosed be called only once for a row. However, you can determine the column for which it was called. Thus, you can implement custom logic only for some columns.

function batchEditClosed(sender, args) {
    var columnUniqueName = args.get_columnUniqueName();

    if (columnUniqueName == "Unit") {
        // add custom logic here
    }
}

Regards,
Viktor Tachev
Telerik

 

 

[Dennis]

Hello Viktor

 The above post is actually similar to my specific scenario except that the TotalPrice column is also editable by the user on the grid. I understand that may not make sense but assume that field is also an editable field or cell. Can you still use the GridCalculatedColumn?

Also bearing in mind that I have tried this before but without using a grid calculated column implementing the batch edit process strictly on the client side, I discovered that the column of the updated cell becomes disabled preventing further edits. So in this case, because I programmatically updated  the TotalPrice Cell for the edited row by updating the innerText property of the TotalPrice cell with the calculated value, the TotalPrice column becomes disabled from further edits.

Can you suggest why and or advice 

Thanks  

Dennis

[Viktor Tachev]

Hi Dennis,

If you would like to make the calculated field editable you should consider using a different column type, like GridTemplateColumn. In the ItemTemplate you can calculate the value manually. In addition you can provide EditItemTemplate so that the user can modify the value.

Check out the following code snippet that outlines the approach:

<telerik:GridTemplateColumn HeaderText="Calculated">
    <ItemTemplate>
        <%# double.Parse(Eval("SomeField").ToString()) + 3.14159265359 %>
    </ItemTemplate>
    <EditItemTemplate>
        <asp:TextBox runat="server" ID="TextBox1" />
    </EditItemTemplate>
</telerik:GridTemplateColumn>

Regarding you other query. Have in mind that Batch Editing is using a lot of client-side logic. If editing is not working as expected this could be caused by a JavaScript error. Open the browser console by pressing F12 and ensure that there are no errors listed there.

Regards,
Viktor Tachev
Telerik