How do i update the main(parent)grid by selecting a row in the child grid using kendo ui?I have a parent grid which uses local data to get populated and onlclick of add new record there is a tab grid.When i select a row in the child grid and then click on update the data must bind to the parent grid.I am able to retrieve the selected elements but not able to bind to the parent grid datasource.Kindly provide suggestions for the same.
<!DOCTYPE html>
<html>
<head>
<title>Popup editing</title>
<meta charset="utf-8">
<link href="css/examples-offline.css" rel="stylesheet">
<link href="css/kendo.common.min.css" rel="stylesheet">
<link href="css/kendo.rtl.min.css" rel="stylesheet">
<link href="css/kendo.default.min.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script src="../js/kendo.web.min.js"></script>
<script src="../js/userMaintenance.js"></script>
<script src="../js/console.js"></script>
<script>
</script>
</head>
<body>
<center><h2 style="color:blue;">User Maintenance</h2> </center>
<!-- grid element -->
<div id="example" class="k-content">
<div id="grid" ></div>
<script>
var data = createRandomData(50);
var main = [{Globalid:"fdsdf",UserName:"System Admin",SystemRole:"5",Title:"5"},
{Globalid:"qwewqeqwe",UserName:"System Admin",SystemRole:"5",Title:"5"}
];
var mylocaldatasource=new kendo.data.DataSource({
data:main
});
mylocaldatasource.read();
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
data: data,
schema: {
model: {
fields: {
Globalid: { type: "string" },
UserName: { type: "string" },
SystemRole: { type: "string" },
Title: { type: "string" }
}
}
}
},
height: 430,
pageable: false,
editable: {
mode: "popup",
template: kendo.template($("#popup_editor").html())
},
toolbar: ["create"],
columns: [
{
field: "Globalid",
title: "Global id"
},
{
field: "UserName",
title: "User Name"
},
{
field: "SystemRole",
title: "System Role"
},
{
field: "Title",
title: "Title",
format: "{0:c}",
width: "100px"
},
{
command: ["edit", "Remove"],
title: " ",
width: "160px"
}
],
edit: function(e){
e.container.find(".nested-tabstrip").kendoTabStrip({});
e.container.find(".tabstrip-grid").kendoGrid({
dataSource: mylocaldatasource,
pageable: false,
selectable:true,
height: 300,
columns:[
{
field: "Globalid",
title: "Global id"
},
{
field: "UserName",
title: "User Name"
},
{
field: "SystemRole",
title: "System Role"
},
{
field: "Title",
title: "Title",
format: "{0:c}",
width: "100px"
}
],
change:grid_change
});
}
});
function grid_change(e) {
var selectedRows = this.select();
var selectedDataItems = [];
for (var i = 0; i < selectedRows.length; i++) {
var dataItem = this.dataItem(selectedRows[i]);
selectedDataItems.push(dataItem);
// var globalid=this.dataItem(this.select()).Globalid;
alert(this.dataItem(this.select()).Globalid);
}
// selectedDataItems contains all selected data items
}
var grid = $("#grid").data("kendoGrid");
grid.bind("change", grid_change);
grid.dataSource.add({
id:i+1,
Globalid: this.dataItem(this.select()).Globalid,
UserName: selectedDataItems.UserName,
SystemRole: selectedDataItems.SystemRole,
Title: selectedDataItems.Title
});
});
</script>
</div>
<!-- popup editor template -->
<script id="popup_editor" type="text/x-kendo-template">
<div class="nested-tabstrip">
<ul>
<li>
Search
</li>
<li>
Search Results
</li>
</ul>
<div>
<div class="Search">
<div class="k-edit-label">
<label for="Globalid">Global id:</label>
</div>
<div class="k-edit-field">
<input type="text" class="k-input k-textbox" name="Globalid" data-bind="value:Globalid">
</div>
<div class="k-edit-label">
<label for="UserName">User Name: </label>
</div>
<div class="k-edit-field">
<input name="UserName"
data-bind="value:UserName"
data-value-field="UserName"
/>
</div>
<div class="k-edit-label">System Role: </div>
<div class="k-edit-field">
<select name="SystemRole" >
<option value="PAA User">PAA User</option>
<option value="PAA Admin">PAA Admin</option>
<option value="Executive">Executive</option>
<option value="System Admin">System Admin</option>
</select>
</div>
<div class="k-edit-label">
<label for="Title">Title:</label>
</div>
<div class="k-edit-field">
<input type="text" name="Title" data-bind="value:Title" />
</div>
</div>
</div>
<div>
<div class="tabstrip-grid" id="childgrid"></div>
</div>
</div>
</body>
</html>
