calculate other cell value on RadComboBox selectedIndexChange event placed inside EditItemTemplate

[Bibek]

Hi i am using BatchEdit mode of Telerik Control binding to Objectdatasource as following markup , i want to change text of boundcolumn INVOICEUNIT from telerik ComboBox1 attribute "Attributes['Unit']" ,on selectionindexchanged event of ComboBox1 , and calculate values for another boundcolumn INVOICEAMOUNT on the basis of Attributes['Unit'] * boundcolumn INVOICENUMBER ,how can i do this with javascript so that calculated values are persisted in post back also ? I have tried with event ClientEvents-OnBatchEditSetCellValue ,but when values are changed in that boundcolumn ,it can be edited anymore ,if i click that cell (after values are changed in OnBatchEditSetCellValue)

function SetCellValue(sender, args) {
                if (args.get_columnUniqueName() === "ArticleNo") {
                    var value = args.get_value();
                    args.get_row().cells[4].innerText = "Something";

                }
            }

<telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" GridLines="None" runat="server" AllowAutomaticDeletes="True" AllowAutomaticUpdates="True" AllowAutomaticInserts="True" OnItemDataBound="OnItemDataBoundHandler"
                               PageSize="10" OnItemDeleted="RadGrid1_ItemDeleted" OnItemInserted="RadGrid1_ItemInserted"
                               OnItemUpdated="RadGrid1_ItemUpdated" OnPreRender="RadGrid1_PreRender" AllowPaging="True" DataSourceID="ObjectDataSource1"
                               AutoGenerateColumns="False" OnBatchEditCommand="RadGrid1_BatchEditCommand">
                               <MasterTableView CommandItemDisplay="Top" DataKeyNames="VINVOICEROWSID"
                                   DataSourceID="ObjectDataSource1" HorizontalAlign="NotSet" EditMode="Batch" AutoGenerateColumns="False">
                                   <BatchEditingSettings EditType="Cell" />
                                   <SortExpressions>
                                       <telerik:GridSortExpression FieldName="VINVOICEROWSID" SortOrder="Descending" />
                                   </SortExpressions>
                                   <Columns>
                                       <telerik:GridCheckBoxColumn DataField="SelectCheckBox" HeaderStyle-Width="80px" HeaderText="Select" SortExpression="SelectCheckBox"
                                           UniqueName="SelectCheckBox">
                                       </telerik:GridCheckBoxColumn>
                                       <telerik:GridTemplateColumn HeaderText="InvoiceRowDate" HeaderStyle-Width="180px" UniqueName="INVOICEROWDATE" DataField="INVOICEROWDATE">
                                           <ItemTemplate>
                                               <%-- <%# IIf(String.IsNullOrEmpty(Eval("INVOICEROWDATE")), "", Convert.ToDateTime(Eval("INVOICEROWDATE")).ToString("dd-MM-yyyy"))%>--%>
                                               <%# Eval("INVOICEROWDATE")%>
                                           </ItemTemplate>
                                           <EditItemTemplate>
                                               <telerik:RadDatePicker ID="rdInvoiceRowDate" runat="server">
                                               </telerik:RadDatePicker>
                                           </EditItemTemplate>
                                       </telerik:GridTemplateColumn>
                                       <telerik:GridTemplateColumn HeaderText="ArticleNo" DefaultInsertValue="" HeaderStyle-Width="250px" UniqueName="ArticleNo" DataField="ArticleNo">
                                           <ItemTemplate>
                                               <%# Eval("ArticleNo")%>
                                           </ItemTemplate>
                                           <EditItemTemplate>
                                               <telerik:RadComboBox RenderMode="Lightweight" runat="server" ID="RadComboBox1" EnableLoadOnDemand="True" DataTextField="ArticleDesc" AutoPostBack="false"
                                                   OnItemsRequested="RadComboBox1_ItemsRequested" DataValueField="ArticleNo"
                                                   HighlightTemplatedItems="true" Height="220px" Width="220px" DropDownWidth="420px">
                                                   <HeaderTemplate>
                                                       <table>
                                                           <tr>
                                                               <td>ArticleNo
                                                               </td>
                                                               <td>Article Description
                                                               </td>
                                                               <td>
                                                                   Unit
                                                               </td>
                                                           </tr>
                                                       </table>
                                                   </HeaderTemplate>
                                                   <ItemTemplate>
                                                       <table>
                                                           <tr>
                                                               <td>
                                                                   <%# DataBinder.Eval(Container, "Text")%>
                                                               </td>
                                                               <td>
                                                                   <%# DataBinder.Eval(Container, "Value")%>
                                                               </td>
                                                               <td>
                                                                   <%# DataBinder.Eval(Container, "Attributes['Unit']")%>
                                                               </td>
                                                           </tr>
                                                       </table>
                                                   </ItemTemplate>
                                               </telerik:RadComboBox>
                                           </EditItemTemplate>
                                       </telerik:GridTemplateColumn>
                                       <telerik:GridBoundColumn DataField="INVOICEROWDESCRIPTION" HeaderStyle-Width="250px" ItemStyle-Width="250px" HeaderText="InvoiceRowDesc" SortExpression="INVOICEROWDESCRIPTION"
                                           UniqueName="INVOICEROWDESCRIPTION">
                                       </telerik:GridBoundColumn>
                                       <telerik:GridBoundColumn DataField="INVOICEUNIT" HeaderStyle-Width="100px" ItemStyle-Width="100px" ItemStyle-BorderWidth="3" HeaderText="Unit" SortExpression="INVOICEUNIT"
                                           UniqueName="Unit">
                                       </telerik:GridBoundColumn>
                                       <telerik:GridNumericColumn DataField="INVOICENUMBER" HeaderStyle-Width="100px" ItemStyle-Width="100px" HeaderText="InvoiceNumber" SortExpression="INVOICENUMBER"
                                           UniqueName="INVOICENUMBER">
                                       </telerik:GridNumericColumn>
                                       <telerik:GridBoundColumn DataField="INVOICEAMOUNT" HeaderStyle-Width="100px" ItemStyle-Width="100px" HeaderText="InvoiceAmount" SortExpression="INVOICEAMOUNT"
                                           UniqueName="INVOICEAMOUNT">
                                       </telerik:GridBoundColumn>
                                       <telerik:GridTemplateColumn HeaderText="InvoiceVat" DefaultInsertValue="" HeaderStyle-Width="250px" UniqueName="INVOICEVAT" DataField="INVOICEVAT">
                                           <ItemTemplate>
                                               <%# Eval("INVOICEVAT")%>
                                           </ItemTemplate>
                                           <EditItemTemplate>
                                               <telerik:RadDropDownList RenderMode="Lightweight" runat="server" ID="VatDropDown" DataValueField="Value" DataSourceID="SqlDataSource2"
                                                   DataTextField="VAT">
                                               </telerik:RadDropDownList>
                                           </EditItemTemplate>
                                       </telerik:GridTemplateColumn>
                                       <telerik:GridTemplateColumn HeaderText="INVOICEUNIT" HeaderStyle-Width="180px" UniqueName="INVOICEUNIT" DataField="INVOICEUNIT">
                                          <ItemTemplate>
                                                   <%# Eval("INVOICEUNIT")%>
                                               </ItemTemplate>
                                               <EditItemTemplate>
                                                   <asp:TextBox runat="server"  ID="TextBox1" />
                                               </EditItemTemplate>
                                       </telerik:GridTemplateColumn>
                                       <telerik:GridButtonColumn ConfirmText="Delete this product?" ConfirmDialogType="RadWindow"
                                           ConfirmTitle="Delete" HeaderText="Delete" HeaderStyle-Width="50px"
                                           CommandName="Delete" Text="Delete" UniqueName="DeleteColumn">
                                       </telerik:GridButtonColumn>
                                   </Columns>
                               </MasterTableView>
                               <ClientSettings AllowKeyboardNavigation="true" ClientEvents-OnBatchEditSetCellValue="SetCellValue"></ClientSettings>
                           </telerik:RadGrid>

 

 

[Angel Petrov]

Hello,

The OnClientSelectedIndexChanged event of the combo will be fired multiple times by the batch editing mechanism. This will cause the recalculation of the values which is not suitable if the related cells values will be changed.

In order to make things work I suggest changing the related cells values in the OnBatchEditClosed event. The idea is to obtain the attribute value in the OnBatchEditGetEditorValue event.

JavaScript:

var attrValue;
function getEditorValue(sender, args) {
    if (args.get_columnUniqueName() === "ArticleNo") {
        var combo = $telerik.findControl(args.get_cell(), "RadComboBox1");
        attrValue = combo.get_selectedItem().get_attributes().getAttribute("Unit");
    }
}

And later inside the OnBatchEditClosed extract the cell values using the getCellValue method of the batch editing manager, calculate the new values and set them via the changeCellValue method. A description of both method of the batch manager can be found here. As for the code it should look something like this.

JavaScript:

function batchClosed(sender, args) {
    if (args.get_columnUniqueName() === "ArticleNo") {
        var dataItem = $find(args.get_row().id);
        var batchManager = sender.get_batchEditingManager();
        setTimeout(function () {
            var invoiceAmountCell = dataItem.get_cell("INVOICEAMOUNT");
            var invoiceNumberCell = dataItem.get_cell("INVOICENUMBER");
            var invoiceAmount = batchManager.getCellValue(invoiceAmountCell);
            var invoiceNumber = batchManager.getCellValue(invoiceNumberCell);
            // Calculate the new values and call changeCellValue to set them to the cells.
        }, 100);
    }
}

Finally I would like to mention that the cell value changes will be perseved on postback only if they are saved either by clicking the grid save changes button or manually calling the saveChanges method of the batch manager, for the table view. In all other cases if a postback is triggered they will be erased as they are kept only locally on the client machine.

Regards,
Angel Petrov
Telerik

[bryan]

this was a very helpful solution.  I had a special scenario, with batch edit grid.

The users wanted to see 2 separate columns, but only one could be modified.  The column to be modified had a template column with a dropdown list.  When the selected index changed, they wanted to see the "key" displayed in that column (usually we display the text value), and instead show the text value in a separate column (which had to be read only).   Very nice!