Rad Grid Batch Edit Mode Finding the sum of all the cells when auto generated columns true

2 posts, 0 answers
  1. Chakravarthy
    Chakravarthy avatar
    1 posts
    Member since:
    Jan 2015

    Posted 08 Jun 2015 Link to this post

    Hi,

    We have a radgrid.We have a requirement like entering the time and finding the sum of all the cells and display into the last column  of the grid when columns are generating dynamically.

    We have tried with client side event on row selected event but sum is not coming when moving from one cell to second cell.

    Below i am giving the scenarios how we have used the client events please reply to this thread as early as possible.

     



     

    1.       We are
    able to fetch the selected cell value but unable to fetch the remaining
    corresponding cell values. You can find the same in the sample project
    (BatchEdit.aspx – OnBatchEditCellValueChanged event)
    source code:
     <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
          <script type="text/javascript">
              function BatchEditCellValueChanged(sender, args) {


                  var grid = sender;

                  var row = args.get_row();
                  var cell = args.get_cell();
                  var tableView = args.get_tableView();
                  var column = args.get_column();
                  var columnUniqueName = args.get_columnUniqueName();
                  var editorValue = args.get_editorValue();
                  var cellValue = args.get_cellValue();
                  alert(editorValue);

                  var columnlength = grid.get_masterTableView().get_columns().length;
                  for (i = 0 ; i < columnlength; i++) {
                      cell = grid.get_masterTableView().get_columns()[i].get_uniqueName();
                      alert(cell);
                  }

              }
        </script>

    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
           <div>
         <telerik:RadGrid ID="RadGrid1" runat="server">
            <MasterTableView EditMode="Batch" BatchEditingSettings-EditType="Cell">
            </MasterTableView>
            <ClientSettings>
                <Selecting AllowRowSelect="True" CellSelectionMode="MultiCell" />
                <ClientEvents OnBatchEditCellValueChanged="BatchEditCellValueChanged" />
            </ClientSettings>
        </telerik:RadGrid>
        </div>
        </form>
    </body>
    </html>

     code Behind:
    public partial class BatchEdit : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            GetValues();
        }
        private void GetValues()
        {
            DataTable dtTable = new DataTable();
            dtTable.Columns.Add("Sum");
            dtTable.Columns.Add("Value1"); dtTable.Columns.Add("Value2");
            dtTable.Columns.Add("Value3"); dtTable.Columns.Add("Value4");

            DataRow dr = dtTable.NewRow();
            dr["Sum"] = "";
            dr["Value1"] = "1"; dr["Value2"] = "2";
            dr["Value3"] = "3"; dr["Value4"] = "4";
            dtTable.Rows.Add(dr);

            DataRow drr = dtTable.NewRow();
            drr["Sum"] = "";
            drr["Value1"] = "5"; drr["Value2"] = "6";
            drr["Value3"] = "7"; drr["Value4"] = "8";
            dtTable.Rows.Add(drr);


            RadGrid1.DataSource = dtTable;
            RadGrid1.DataBind();

        }
    }
    2.       We are
    able to fetch the selected cell value and corresponding cell values in the same
    row by hardcoding the column names, but dynamically we are unable to get the
    values of the cell. You can find the same in the sample project
    (OnRowSelected.aspx – OnRowSelected event)
    source code:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="OnRowSelected.aspx.cs" Inherits="OnRowSelected" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>

      <script type="text/javascript">
          function RowSelected(sender, eventArgs) {
              var grid = sender;
              var MasterTable = grid.get_masterTableView();
             
              var row = MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()];
              var cell1 = MasterTable.getCellByColumnUniqueName(row, "Value1");
              var cell2 = MasterTable.getCellByColumnUniqueName(row, "Value2");
              var cell3 = MasterTable.getCellByColumnUniqueName(row, "Value3");
              var cell4 = MasterTable.getCellByColumnUniqueName(row, "Value4");
              var total = 0;
              var arr = [];
              var total = 0;
          
              var columnlength = grid.get_masterTableView().get_columns().length;
              for (i = 0 ; i < columnlength; i++) {
                  cell = grid.get_masterTableView().get_columns()[i].get_uniqueName();
               
                  var cell = MasterTable.getCellByColumnUniqueName(row, cell);
                  var val = parseInt(cell.innerText);
                  arr[i] = val;
                 

              }
              for (i = 1; i < arr.length; i++) {

                  total += arr[i];
              }

              var cell1 = MasterTable.getCellByColumnUniqueName(row, "Sum");
              cell1.innerText = total;
              cell1.eventArgs.set_cancel(true);


          }
        </script>
       <%-- var grid = $find("<%=RadGrid1.ClientID%>");
        var tableView = sender.get_masterTableView();
        var batchManager = sender.get_batchEditingManager();
        var items = tableView.get_dataItems();
        var mapValues = [];
        for (var i = 0; i < items.length; i++) {
            var mapCell = items[i].get_cell("Map");
            var mapValue = batchManager.getCellValue(mapCell);
            mapValues.push(mapValue);
        }--%>
    </head>
    <body>
        <form id="form1" runat="server">
             <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
             <asp:HiddenField ID="HiddenField1" runat="server" />
        <div>
        <telerik:RadGrid ID="RadGrid1" runat="server">
            <MasterTableView EditMode="Batch" BatchEditingSettings-EditType="Cell" >
            </MasterTableView>
            <ClientSettings>
                <Selecting AllowRowSelect="True" CellSelectionMode="MultiCell" />
                <ClientEvents OnRowClick="RowSelected" />
            </ClientSettings>
        </telerik:RadGrid>
        </div>
        </form>
    </body>
    </html>

    code behind:

    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;

    public partial class OnRowSelected : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            GetValues();
        }
        private void GetValues()
        {
            DataTable dtTable = new DataTable();
            dtTable.Columns.Add("Sum");
            dtTable.Columns.Add("Value1"); dtTable.Columns.Add("Value2");
            dtTable.Columns.Add("Value3"); dtTable.Columns.Add("Value4");

            DataRow dr = dtTable.NewRow();
            dr["Sum"] = "";
            dr["Value1"] = "1"; dr["Value2"] = "2";
            dr["Value3"] = "3"; dr["Value4"] = "4";
            dtTable.Rows.Add(dr);

            DataRow drr = dtTable.NewRow();
            drr["Sum"] = "";
            drr["Value1"] = "5"; drr["Value2"] = "6";
            drr["Value3"] = "7"; drr["Value4"] = "8";
            dtTable.Rows.Add(drr);


            RadGrid1.DataSource = dtTable;
            RadGrid1.DataBind();

        }
    }
     

  2. Angel Petrov
    Admin
    Angel Petrov avatar
    1097 posts

    Posted 10 Jun 2015 Link to this post

    Hello,

    I have already provided an answer regarding this query in the official support ticket you have opened. In order to help other community members overwhelm such types of problems I am pasting the response from the official ticket here.

    "In order to make things as generic as possible you can traverse the cells of the row inside the OnBatchEditClosed handler and obtain their value using the getCellValue method. After the sum is calculated you can change the sum cell value by calling the changeCellValue method. A possible realization of this scenario is available in the following code snippet."

    ASPX:
    <head id="Head1" runat="server">
         <title></title>
           <script type="text/javascript">
               function batchEditClosed(sender, args) {
                   setTimeout(function myfunction() {
                       var grid = sender;
                       var row = args.get_row();
                       var sum = 0;
                       var columnlength = grid.get_masterTableView().get_columns().length;
                       for (i = 0 ; i < row.cells.length; i++) {
                           if (i !== 0) {
                               sum += parseFloat(grid.get_batchEditingManager().getCellValue(row.cells[i]));
                           }
                       }
                       grid.get_batchEditingManager().changeCellValue(row.cells[0], sum);
                   }, 100);
               }
      
         </script>
       
    </head>
     <body>
         <form id="form1" runat="server">
             <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
            <div>
          <telerik:RadGrid ID="RadGrid1" runat="server">
             <MasterTableView EditMode="Batch" BatchEditingSettings-EditType="Cell">
             </MasterTableView>
             <ClientSettings>
                 <Selecting AllowRowSelect="True" CellSelectionMode="MultiCell" />
                 <ClientEvents OnBatchEditClosed="batchEditClosed" />
             </ClientSettings>
         </telerik:RadGrid>
         </div>
         </form>
     </body>
     </html>

    "Information about the used batch editing manager client-side methods can be found here."

    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
Back to Top