calculate other cell value on RadComboBox selectedIndexChange event placed inside EditItemTemplate

2 posts, 0 answers
  1. Bibek
    Bibek avatar
    1 posts
    Member since:
    Jul 2015

    Posted 10 Feb Link to this post

    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>

     

     

  2. Angel Petrov
    Admin
    Angel Petrov avatar
    1006 posts

    Posted 12 Feb Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top