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