3

少し前に、Devexpress コンポーネントを使用して asp.net webforms アプリを開発しました。ユーザーが必要なすべての行を挿入した後、ユーザーは「送信」ボタンを押します。次に、すべてのデータをサーバー側に送信し、データベースに保存します。

私の MVC Telerik グリッドでは、同じことを行う方法がわかりません。これが私の見解です：

  @(Html.Telerik()
      .Grid( Model )
      .Name( "DocumentGrid" )
      .DataKeys(a => a.Add(b=> b.IDDocument))
                      .ToolBar(commands => { commands.Insert().Text("add"); })
                      .Columns(c =>
                                   {                                         
                                       c.Bound(column => column.SupplierIdentification).Title("CNPJ/CPF");
                                       c.Bound(column => column.StatusDescription).Title("Status");                                           
                                       c.Bound(column => column.ExpirationDate).Title("Vencimento");
                                       c.Bound(column => column.IsStock).Title("Estoque");)
                                   .DataBinding(x => 
                                       x.Server().Insert("InsertNewDocument","Client"))
      .Editable(a => a.Mode(GridEditMode.InForm).TemplateName("AddDocumentModel")).ClientEvents(x => x.OnSave("onSave")))

ご覧のとおり、モデルをパラメーターとしてアクションを呼び出す Insert がありますが、グリッドに行を追加し終わったときにそのアクションを「起動」したいと思います。

カスタム編集テンプレートに配置された JavaScript ボタンは次のとおりです。

<a href="javascript:void(0);" onclick="OnUpdateClick(this)"><b>Confirm</b>

このボタンは、一時行をグリッドに挿入する OnUpdateClick 関数を呼び出す必要があります。

function OnUpdateClick() {
    var grid = $("#DocumentGrid").data("tGrid");
    var item = {};
    grid.insertRow(item);
}

このようなものになるはずです。助言がありますか？

編集：

グリッドを編集すると、~/Shared/EditorTemplates フォルダーから編集テンプレートを取得します。EditorTemplate フォルダーのスクリプトからグリッド データを取得することは可能ですか?

4

1 に答える 1

1

Ajax Databinding と Grid Operation Mode を Client として使用することで、よりシンプルにしてみませんか。

これは私がプロジェクトで行ったことなので、基本的にクライアント側でアイテムを一括更新および一括追加でき、保存時にのみサーバーにアップロードされます。このようなものでなければなりません。

@(Html.Telerik().Grid<YourViewModel>()
.Name("DocumentGrid")
.Columns(c =>
{
    c.Bound(column => column.SupplierIdentification).Title("CNPJ/CPF");
    c.Bound(column => column.StatusDescription).Title("Status");                                           
    c.Bound(column => column.ExpirationDate).Title("Vencimento");
    c.Bound(column => column.IsStock).Title("Estoque");
    c.Bound(a => a.IDDocument).Hidden()
})
.DataBinding(d => 
    d.Ajax()
        .OperationMode(GridOperationMode.Client)
        .Select("SelectAction", "YourController")
        .Update("UpdateAction", "YourController")
        .Insert("InsertAction", "YourController")
        .Delete("DeleteAction", "YourController")
    )
.Pageable(p => p.PageSize(50))
.Sortable()
.Scrollable()
.Groupable()
.Filterable()
.KeyboardNavigation()
.Resizable(r => r.Columns(true))
.Reorderable(r => r.Columns(true))
.Editable(e => 
    e.Mode(GridEditMode.InCell)
            .DataKeys(k => k.Add(a => a.IDDocument))
            .ToolBar(c => 
            {
                c.Insert();
                c.SubmitChanges();
            })
    )
)

あなたの行動はこのようになります

[HttpPost]
[GridAction]
public ActionResult UpdateAction([Bind(Prefix = "updated")]IEnumerable<YourViewModel> updatedTransactions)
{
...
}

[HttpPost]
[GridAction]
public ActionResult InsertAction([Bind(Prefix = "inserted")]IEnumerable<YourViewModel> insertedTransactions)
{
...
}

[HttpPost]
[GridAction]
public ActionResult DeleteAction([Bind(Prefix = "deleted")]IEnumerable<YourViewModel> deletedTransactions)
{
...
}
于 2013-11-14T03:20:57.713 に答える