これがシナリオです
剣道グリッドにデータを表示したいのですが、そのグリッドで行を選択すると、その行の詳細がテキストボックス付きのフォームに表示されます。ユーザーが値を更新できるようになり、剣道グリッドに反映されるはずです。これにはknockout-kendo.jsを使用しています。
ここにjsfiddleリンクがあります - http://jsfiddle.net/saisworld/u7YnY/
データを表示してグリッドにバインドできますが、グリッドの行をクリックすると。フォームに反映されません。何が欠けているのかわからない。お知らせ下さい。
また、Kendo UI mvc ラッパーを使用して同じシナリオをテストし、(上記の例のように宣言的な初期化を使用する代わりに) グリッドを表示し、Knockout-kendo.js フレームワークを一緒に使用して、それらが連携できるかどうかを確認したいと考えています。
ここでは、データをグリッドにバインドしてから、ノックアウト剣道または単にノックアウトを使用してグリッドからデータを取得し、フォームに表示できますが、グリッドで更新されません。
<p class="k-block k-header k-shadow"> Kendo Grid - Companies</p>
@(Html.Kendo().Grid(Model)
.Name("somegrid")
.DataSource(ds => ds.Ajax().PageSize(10).ServerOperation(false))
.Columns(c =>
{
c.Bound(p => p.CompanyName).Width(2);
c.Bound(p => p.FullAddress).Width(2);
})
.Selectable(s => s.Mode(GridSelectionMode.Single))
.Events(e=>e.Change("onChange"))
.Pageable()
.Sortable()
.Filterable()
)
<form class="kCompaniesClass k-block k-info-colored">
<div class="k-header k-shadow">Company Details - using Kendo MVVM</div>
<table>
<tr>
<th>Company Name</th>
<th>Address</th>
</tr>
<tr>
<td>
@Html.TextBox("CompanyName",null,new Dictionary<string, object>{{"data-bind","value: CompanyName"}})
</td>
<td>
@Html.TextBox("Fulladdress",null,new Dictionary<string, object>{{"data-bind","value: FullAddress"}})
</td>
</tr>
</table>
</form>
<script type="text/javascript">
var viewModel = {
CompanyName: ko.observable(""),
FullAddress: ko.observable("")
};
function onChange(e) {
grid = e.sender;
var koCompanyItem = grid.dataItem(this.select());
viewModel = koCompanyItem;
/* ko.cleanNode(document.getElementById("somegrid"));
ko.applyBindings(viewModel, document.getElementById("somegrid"));*/
ko.applyBindings(viewModel);
}