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=" " 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.
3 Answers, 1 is accepted
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
Rank 1
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
The information provided in my previous reply is applicable to delete actions as well.
Regards,
Dimo
Telerik