Kendo Detail Grid : Refresh parent row when child row is changed

4 posts, 0 answers
  1. Nagaraju
    Nagaraju avatar
    5 posts
    Member since:
    Apr 2016

    Posted 29 Apr Link to this post

    Hi,

       I have a Kendo Detail Grid in which the Parent row contains the total percentage and the child row contains the individual percentages.

    The Inner grid has Read/Create/Update and delete operations.

    My requirements is when ever any of the operations performed in child grid, I need to update the total percentage column has to be updated in parent grid.

    here is my code

     

     

    <%@taglib prefix="shared" tagdir="/WEB-INF/tags"%>
    <%@page import="java.util.HashMap"%>
    <%@taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>







    <shared:header></shared:header>



    <!DOCTYPE html>
    <html>
    <head>


    <style>
    html {
     font-size: 14px;
     font-family: Arial, Helvetica, sans-serif;
    }
    </style>
    <title>Demo</title>


    <link rel="stylesheet"
     href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <link rel="stylesheet" href="styles/layout-jsp.css" />


    <link href="styles/kendo.common.min.css" rel="stylesheet">
    <link href="styles/kendo.default.min.css" rel="stylesheet">
    <!-- jquery and kendo javascript. jquery MUST be first. -->
    <script src="js/jquery.min.js"></script>


    <script src="js/kendo.all.min.js"></script>



    </head>


    <body>
      </div>
      <button type="submit" class="btn btn-default btn-class"
       id="submitbutton">Submit</button>
     </div>
     
     
     <%               
        HashMap<String, Object> data = new HashMap<String, Object>();
        data.put("employeeID", "#=employeeID#");


    %>



     <div class="grid-class" id="grid-id">
      <kendo:grid id="parent-grid" name="parent-grid"
       detailInit="detailInit" detailExpand="DetailExpand" pageable="true"
       detailTemplate="grid-nested-id" sortable="true">
       <kendo:grid-pageable pageSizes="true"></kendo:grid-pageable>
       <kendo:dataSource pageSize="10">
        <kendo:dataSource-transport read="SubmitController">
         <kendo:dataSource-transport-parameterMap>
          <script>
                function parameterMap(options, operation) {
                    console.log(options);
                    return options;
                }
              </script>
         </kendo:dataSource-transport-parameterMap>
        </kendo:dataSource-transport>
       </kendo:dataSource>
       <kendo:grid-columns>
        <kendo:grid-column title="ID" field="employeeID" />
        <kendo:grid-column title="FirstName" field="employeeFirstName" />
        <kendo:grid-column title="LastName" field="employeeLastName" />
        <kendo:grid-column title="Percentage" field="percentage" />
       </kendo:grid-columns>
      </kendo:grid>


      <kendo:grid-detailTemplate id="grid-nested-id">
       <kendo:grid id="child-grid_#=employeeID#"
        name="child-grid_#=employeeID#" class="child-grid-class"
        save="onSave" pageable="true" sortable="true" editable="true"
        edit="onEdit" cancel="onCancel" change="onChange">
        <kendo:grid-editable mode="inline"
         confirmation="Are you sure you want to remove this item?" />
        <kendo:grid-toolbar>
         <kendo:grid-toolbarItem name="create" />
        </kendo:grid-toolbar>
        <kendo:grid-columns>
         <kendo:grid-column title="Employee ID" field="employeeID"
          width="90px" />
         <kendo:grid-column title="Product" field="productName"
          editor="productEditor" width="90px"></kendo:grid-column>
         <kendo:grid-column title="Activity" field="activityName"
          editor="activityEditor" width="150px"></kendo:grid-column>


         <kendo:grid-column title="Percentage" field="percentage"
          width="90px" />
         <kendo:grid-column title="&nbsp;" width="250px">
          <kendo:grid-column-command>
           <kendo:grid-column-commandItem name="edit" text="modify" />


           <kendo:grid-column-commandItem name="destroy" />
          </kendo:grid-column-command>
         </kendo:grid-column>
        </kendo:grid-columns>
        <kendo:dataSource pageSize="10">



         <kendo:dataSource-transport>
          <kendo:dataSource-transport-create
           url="SubmitController?action=create" type="POST"
           contentType="application/json" />
          <kendo:dataSource-transport-read url="SubmitController" />
          <kendo:dataSource-transport-update
           url="SubmitController?action=update" type="POST"
           contentType="application/json" />
          <kendo:dataSource-transport-destroy
           url="SubmitController?action=destroy" type="POST"
           contentType="application/json" />


          <kendo:dataSource-transport-parameterMap>
           <script>
                function parameterMap(options, operation) {
                    console.log(options);
                    return options;
                }
              </script>
          </kendo:dataSource-transport-parameterMap>
         </kendo:dataSource-transport>
         <kendo:dataSource-schema>
          <kendo:dataSource-schema-model id="uId">
           <kendo:dataSource-schema-model-fields>
            <kendo:dataSource-schema-model-field name="employeeID"
             type="string" />
            <kendo:dataSource-schema-model-field name="productName"
             type="string">
             <kendo:dataSource-schema-model-field-validation required="true" />
            </kendo:dataSource-schema-model-field>
            <kendo:dataSource-schema-model-field name="activityName"
             type="string">
             <kendo:dataSource-schema-model-field-validation required="true" />
            </kendo:dataSource-schema-model-field>
            <kendo:dataSource-schema-model-field name="percentage"
             type="number" />
            <kendo:dataSource-schema-model-field name="totalPercentage"
             type="string" />
           </kendo:dataSource-schema-model-fields>
          </kendo:dataSource-schema-model>


         </kendo:dataSource-schema>
        </kendo:dataSource>



       </kendo:grid>
      </kendo:grid-detailTemplate>


     </div>


     <script type="text/javascript">
     $(document).ready(function(){
      
      $("#submitbutton").click(function(){
       $("#grid-id").show();
       $("#grid-nested-id").show();
       console.log("Submit Button Clicked");
       console.log(selCostcenter);
       console.log(selTeam);
       var $locations=$("#locations");
       selLocation = $locations.val();
       console.log(selLocation);
       var submitString={"costcenter":selCostcenter,"team":selTeam,"location":selLocation};
       $("#parent-grid").data().kendoGrid.dataSource.read({"costcenter":selCostcenter,"team":selTeam,"location":selLocation});
       
      }); 
     });





     function DetailExpand(e){
      console.log("detailExpand");
      //console.log(e.detailRow);
      var row = e.masterRow[0];
      var employeeID= $(row).closest('tr').find('td').eq(1).text();
      console.log("eID:"+employeeID);
      var childGrid = "#child-grid_"+employeeID;
      $(childGrid).data().kendoGrid.dataSource.read({"employeeID":employeeID,"infoType":"detailed"});
      console.log($(childGrid).data().kendoGrid.dataSource);
      /*$(row).closest('tr').find('td').each(function() {
              var textval = $(this).text(); // this will be the text of each <td>
              console.log(textval);
         });
      */
      
      
      
     }


     function detailInit(e){
      console.log("detailInit");
     }
     function onSave(e){
      console.log("Entered On Save");
      //console.log(e);
      //console.log("---");
      var parentRow = this.wrapper.closest("tr").prev();
    //   var employeeID= $(parentRow).find('td').eq(1).text();
       //console.log("eID:"+employeeID);
       //var totalpercent = e.model.o.totalPercentage;
      /*
       var Model = e.model;
       
       for(var key in Model) {
           var value = Model[key];
           console.log("key: " + key);
           console.log("value: " + value);
       }
       
    */
       /*
       var totalPercent =  Model["totalPercentage"];
       for(var key in totalPercent) {
           var value = totalPercent[key];
           console.log("key: " + key);
           console.log("value: " + value);
       }
       */
       


       console.log( e.model["totalPercentage"]);
       //console.log( Model["totalPercentage"]);
              //$(parentRow).find('td').eq(5).text(totalpercent) ;


      
     }
     function onEdit(e){
      console.log("Entered On Edit");
      
       var parentRow = this.wrapper.closest("tr");
       console.log(parentRow);  
      console.log("Exit From Edit");
      
     }
     
     function onChange(){
      console.log("Entered On Change");
     }


     
     function cancel(e){
      console.log("Entered cancel");
      e.preventDefault();
     }
     


     function OnChildRequestEnd () {
      console.log("Entered Into OnChildRequestEnd");
     }
     function OnSync () {
      console.log("Entered Into OnSync");
     }


     // this function creates a Kendo UI DropDown List which will be attached to the row in the grid
     // where it is required
     function productEditor(container, options) {
      // create an input field with jQuery and configure it's values with declarative intialization
      // see http://docs.kendoui.com/howto/declarative_initialization for more information
      $("<input data-text-field='productName' data-value-field='productName' data-bind='value: " + options.field + "' />")
      // append it to the container (grid row currently in edit mode)
      .appendTo(container)
      // create the Kendo UI DropDown List
      .kendoDropDownList({
       dataSource: {
        // define the endpoint that will provide the data for this control
        transport: {
         read: "ProductController"
        }
       }
      });
     }


     function activityEditor(container, options) {
      // create an input field with jQuery and configure it's values with declarative intialization
      // see http://docs.kendoui.com/howto/declarative_initialization for more information
      $("<input data-text-field='activityName' data-value-field='activityName' data-bind='value: " + options.field + "' />")
      // append it to the container (grid row currently in edit mode)
      .appendTo(container)
      // create the Kendo UI DropDown List
      .kendoDropDownList({
       dataSource: {
        // define the endpoint that will provide the data for this control
        transport: {
         read: "ActivityController"
        }
       }
      });
     }


     function dataBound() {
            this.expandRow(this.tbody.find("tr.k-master-row").first());
        }
     
    </script>
    </body>
    </html>

     

     

     

     

    please help.

  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 03 May Link to this post

    Hi Nagaraju,

    You can use the following approach:

    1) subscribe to the requestStart event of the detail Grid's dataSource
    http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#events-requestStart

    2) in the event handler, check the request type

    3) if the request type is not "read", attach a one-time dataBound handler to the current detail Grid
    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-dataBound
    http://docs.telerik.com/kendo-ui/intro/widget-basics/events-and-methods#events-Event

    4) in the dataBound handler of the detail Grid, execute the read() method of the master Grid's dataSource
    http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-read

    Note that the last step will re-render all master rows and detail Grids, and will collapse all expanded detail Grids. You can persist the expanded state of the detail Grids like this:

    http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/persist-expanded-rows

    An alternative approach to steps 2, 3 and 4 is to calculate the new total percentage manually and inject it via standard DOM manipulation techniques. Once the master Grid is rebound (e.g. paged or reloaded), the new total value will be rendered via the existsing logic.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET AJAX banner
  4. Nagaraju
    Nagaraju avatar
    5 posts
    Member since:
    Apr 2016

    Posted 04 May in reply to Dimo Link to this post

    Dimo,

       Thank you somuch.I am caliculating the "totalPercentage" in Servlet and returning to the UI. and in UI I am setting the "totalPercentage" to "masterRow" column and refreshing the childgrid in "one time sync":function.

    It is working fine as of now..

    And in the same way, For the case of delete child row, Which event I need to implement to set the "totalPercentage" to parent row?

     

    regards,

    Nagaraju.V

  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 05 May Link to this post

    Hi Nagaraju,

    The information provided in my previous reply is applicable to delete actions as well.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
UI for ASP.NET AJAX banner