Kendo Editable Grid : row contents changing after clicking "Edit->Cancel" Button

2 posts, 0 answers
  1. nagaraju
    nagaraju avatar
    1 posts
    Member since:
    Mar 2016

    Posted 20 Apr Link to this post

    Hi,

    I am using Kendo Hierarchial grid with child grid as editable grid using jsp and servlets.

    In the child grid, 

    Once i click on Edit Button, pop-up window opening and the moment i click "Cancel", that row contents are replaced with the "first row contents"in the child grid.

    I am pasting my code here.

    -----

    <%@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>
    <!-- For Progress Logo -->
    <%@ include file="header.jsp"%>
    <!-- Header -->
    <table cellpadding="0" cellspacing="0" border="0" bgcolor="#4682B4"
    width="100%">
    <tr>
    <td>
    <table cellpadding="0" cellspacing="1" width="100%" border="0"
    height="5">
    <tr>
    <td class="header1" height="2" colspan='2'>Welcome To
    Progress</td>
    </tr>
    </table>
    </td>
    </tr>
    </table>

    <div class=" submit-section">
    <div class="row ">
    <div class="col-md-3 label-class" >CostCenter</div>
    <div class="col-md-1 label-class">:</div>
    <div class="col-md-8">
    <select class="dropdown-class" id="costcenters">
    </select>
    </div>
    </div>
    <div class="row ">
    <div class="col-md-3 label-class" >Team</div>
    <div class="col-md-1 label-class">:</div>
    <div class="col-md-8">
    <select class="dropdown-class" id="teams">
    <option value="">Select Team</option>
    </select>
    </div>
    </div>
    <div class="row ">
    <div class="col-md-3 label-class" >Location</div>
    <div class="col-md-1 label-class">:</div>
    <div class="col-md-8">
    <select class="dropdown-class" id="locations">
    <option value="">Select Location</option>
    </select>
    </div>
    </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="CostCenter" field="employeeCostcenter" />
          <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"
    edit="onEdit"
    change="onChange"
    cancel="onCancel"
    pageable="true" 
    sortable="true" 
    scrollable="true"
    editable="true"  
    >
        <kendo:grid-editable mode="popup" 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="CostCenter" field="employeeCostcenter" width="90px" />
    <kendo:grid-column title="Product" field="productName" width="90px" />
    <kendo:grid-column title="Activity" field="activityName" width="90px" />
    <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" /> 
                <kendo:grid-column-commandItem name="destroy" />
                </kendo:grid-column-command>
                </kendo:grid-column>         
    </kendo:grid-columns>

    <kendo:dataSource pageSize="10" serverPaging="true" serverSorting="true" >
          
          
                <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="employeeID">
                        <kendo:dataSource-schema-model-fields>
                            <kendo:dataSource-schema-model-field name="employeeCostcenter" type="string">
                            <kendo:dataSource-schema-model-field-validation required="true" />
                            </kendo:dataSource-schema-model-field>
                            <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(){
    $("#grid-id").hide();
    //$("#grid-nested-id").hide();
    console.log("Entered JQuery");
    var selCostcenter="";
    var selTeam="";
    var selLocation="";
       $.ajax({
    url:"CostCenterController",
       contentType: "application/json",
    success:function(responseJSON){
    var $cc=$("#costcenters");
    $cc.empty(); // remove old options
    $cc.append($("<option></option>")
                             .attr("value", '').text('Select CostCenter'));
    $.each(responseJSON, function(value, key) {
    var costcen=responseJSON[value].employeeCostcenter;

    $cc.append($("<option></option>")
                                 .attr("value", costcen).text(costcen));
                     });
    }
    });
       

    $("#costcenters").change(function(){
    selCostcenter= $(this).val();
       var costCenterString={"selectedCostCenter":selCostcenter};
       $.ajax({
    data:costCenterString,
       contentType: "application/json",
    url:"TeamController",
    success:function(responseJSON){

    var $teams=$("#teams");
    $teams.empty(); // remove old options
    var $locations=$("#locations");
    $locations.empty(); // remove old options
    $locations.append($("<option></option>")
                            .attr("value", '').text('Select Location'));

    $teams.append($("<option></option>")
                            .attr("value", '').text('Select Team'));
    $.each(responseJSON, function(value, key) {
    var team=responseJSON[value].employeeTeam;

    $teams.append($("<option></option>")
                                .attr("value", team).text(team));
                    });
           
    }

    });
       
    });

    $("#teams").change(function(event){
    selTeam = $(this).val();
    var teamString={"selectedCostCenter":selCostcenter,"selectedTeam":selTeam};

    $.ajax({
    data:teamString,
    url:"LocationController",
       contentType: "application/json",
    success:function(responseJSON){
    var $locations=$("#locations");
    $locations.empty(); // remove old options
    $locations.append($("<option></option>")
                            .attr("value", '').text('Select Location'));
    $.each(responseJSON, function(value, key) {
    var location=responseJSON[value].employeeLocation;

    $locations.append($("<option></option>")
                                .attr("value", location).text(location));
                    });
           

    }

    });
    });


    $("#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"});



    /*$(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");

    //console.log(e);
    console.log("Exit From Edit");

    }


    function onChange(){
    console.log("Entered On Change");

    }

    function onCancel(){
    console.log("Entered On onCancel");

    }

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

    </script>
    </body>
    </html>

     

    ------

    Thanks in advance..

  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 25 Apr Link to this post

    Hello,

    The described problem can occur if the detail records have the same id value. Could you verify that the field specified as id(seems to be employeeID) has unique values?

    Regards,
    Daniel
    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
Back to Top