This is a migrated thread and some comments may be shown as answers.

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

1 Answer 480 Views
Grid
This is a migrated thread and some comments may be shown as answers.
nagaraju
Top achievements
Rank 1
nagaraju asked on 20 Apr 2016, 10:14 PM

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..

1 Answer, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 25 Apr 2016, 08:31 AM
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!
 
Tags
Grid
Asked by
nagaraju
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Share this question
or