複数のタブを持つアプリケーションがあり、コードが .js ファイルにあるタブの 1 つに KendoUI グリッドが配置されています。(つまり、ビューに div タグがあり、div タグが .js ファイルの KendoUI グリッドにレンダリングされます)。そのデータソースは、MVC ベースのアプリケーションのモデル ファイルに記述されたクラスから値を取得しています。グリッドを編集可能にし、他のタブに移動するときに変更を非同期的にデータソースに保存したいと考えています。この方向への指針は素晴らしいでしょう...
MVC アプリのビュー ファイルには次が含まれます。
<div id="example" class="k-content">
<div id="grid"></div>
div タグは、.js ファイルで KendoUi グリッドにレンダリングされます。コードは次のとおりです。
function createGrid()
{
$("#grid").kendoGrid({
dataSource: dataSource,
height: 430,
columns: [
{ field:"ProductName",title:"Product Name" },
{ field: "Category", title: "Category"},
{ field: "UnitPrice", title:"Unit Price" },
editable: true
});
}
function createDataSource()
{
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: BaseUrl + "/Products", //this is the action method in Controller which returns a list of Products which is hardcoded in this method itself.
dataType: "json"
},
autoSync: true,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages"} },
UnitPrice: { type: "number", validation: { required: true, min: 1} }
}
}
}
});
}
タブ/ボタンをクリックすると、createDataSource() および createGrid() 関数が呼び出されます。他のタブをクリックしたときに、この編集可能なグリッドで行われた変更をデータソースに保存したいと考えています。