ページの上部に剣道グリッドと保存ボタンがあります。[Add New Record] ツールバーをクリックすると、グリッドに新しい行が追加されます (クライアント側)。保存ボタンをクリックすると、コントローラーのアクション メソッドで更新されたビューモデルが取得され、データベースのデータが追加/更新されます。
ここで、グリッドに既に 5 行ある場合、グリッドに行を追加することを制限したいと思います。つまり、グリッドが制限 (5 行) に達すると、ユーザーは新しい行を追加できなくなります。
ユーザーがグリッドに新しい行を追加することを制限するクライアント側スクリプト (jquery) のサンプルを教えてください。
どうもありがとうございました！！！！！！！
インデックス.cshtml
@using (Html.BeginForm("Save", "UDF", FormMethod.Post))
{
<input class="button" type="submit" name="save" value="Save"/>
@(Html.Kendo().Grid(Model.List1)
.Name("List1")
.HtmlAttributes(new { style = "width:auto;height:100%" })
.ToolBar(toolbar => toolbar.Create().Text("Add New Record"))
.Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Top))
.Columns(columns =>
{
columns.Bound(p => p.Title)
.ClientTemplate("#= Title #" +
"<input type='hidden' name='DateFields[#= index(data)#].Title' value='#= Title #' />")
.Title("Title").HtmlAttributes(new { style = "width:30%" });
columns.Bound(p => p.MaxPrecision).Title("Decimal Places")
.ClientTemplate("#= MaxPrecision #" +
"<input type='hidden' name='DateFields[#= index(data)#].MaxPrecision' value='#= MaxPrecision #' />");
columns.Bound(p => p.IsObsolete).Title("Obsolete")
.ClientTemplate("#= IsObsolete #" +
"<input type='hidden' name='DateFields[#= index(data)#].IsObsolete' value='#= IsObsolete #' />");
})
.DataSource(datasource => datasource
.Ajax()
.Model(model =>
{
{
model.Id(p => p.Title);
model.Field(p => p.Title).Editable(true);
model.Field(p => p.MaxPrecision).Editable(true);
model.Field(p => p.IsObsolete).Editable(true);
}
}
)
)
)
}