Hello,
I tried to add/edit data in dynamically added grids of a main grid. See code below. When I added a new record in sub grid, the selected row in parent grid was collapsed and the first row was expanded. You can see screen captures in attached pdf file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="/_content/Plat.Core.UI.RazorComponent//Lib/Kendo/css/kendo.common-bootstrap.min.css">
<link rel="stylesheet" href="/_content/Plat.Core.UI.RazorComponent//lib/kendo/css/kendo.bootstrap.min.css">
<script src="/_content/Plat.Core.UI.RazorComponent/Lib/jquery/jquery-3.3.1.js"></script>
<script src="/_content/Plat.Core.UI.RazorComponent/Lib/jquery/jquery-migrate-3.0.1.min.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="/Lib/KendoNew/js/kendo.all.min.js"></script>
<title></title>
</head>
<body>
<div id="divMain">
<div id="dsgrid" class="grid"
data-role="grid"
data-sortable="true"
data-toolbar="['create']"
data-detail-init="viewModel.dsgrid_detailInit"
data-bind="source: dsSource, events: { dataBound: ds_dataBound }"
data-editable='{"mode": "popup" }'
data-columns='[
{"field":"Name","title":"Name"},
{"field":"Title","title":"Title"},
{"command": [ "edit", "destroy" ], "filterable": false, "sortable": false, "width:": "240px"}
]'
data-detail-template='dssubgrid'
data-scrollable="false">
</div>
</div>
<script>
var viewModel;
$(document).ready(function () {
var reobj = {};
reobj.Sources = [];
viewModel = kendo.observable({
dsSource: new kendo.data.DataSource({
data: reobj.Sources,
schema: {
model: {
id: "Name",
fields: {
Name: { validation: { required: true } },
Title: { validation: { required: true } },
TableName: { editable: true },
GetDataUrl: { editable: true },
TextField: { editable: true },
ValueField: { editable: true }
}
}
}
}),
dsgrid_detailInit: function (e) {
if (!e.data.Values) e.data.Values = [];
var ds = new kendo.data.DataSource({
data: e.data.Values,
schema: {
model: {
id: "Text",
fields: {
Text: { editable: true, validation: { required: true } },
Value: { editable: true, validation: { required: true } }
}
}
}
});
e.detailRow.find(".grid").kendoGrid({
dataSource: ds,
editable: "popup",
toolbar: ['create'],
columns: [{
title: "Value",
field: "Value"
}, {
title: "Text",
field: "Text"
}, {
command: ["edit", "destroy"]
}
]
});
},
ds_dataBound: function (e) {
e.sender.expandRow(e.sender.tbody.find("tr.k-master-row").first());
},
});
kendo.bind($("#divMain"), viewModel);
});
</script>
<script id="dssubgrid" type="text/x-kendo-template">
<div class='grid'></div>
</script>
</body>
</html>
How can I solve this issue?
Thanks
Lei