web-dev-qa-db-ja.com

Kendo UIグリッドを編集した後、どのようにグリッドを更新できますか？

Telerikのデモページに示されているように、editable: "popup"を使用してグリッドを編集します。 グリッドを編集した後、グリッドを更新します。グリッドには、グリッドを編集した後に呼び出されるイベントがありますか？

データバインドイベントを使用しようとしました。このイベントでは、データソースを読み取らせますが、グリッドを更新するのは無限ループであることがわかります。 saveChangesイベントを使用しようとしましたが、機能しません。

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
.Name("grid")
.Columns(columns =>
{
    columns.Bound(p => p.ProductName);
    columns.Bound(p => p.UnitPrice).Width(100);
    columns.Bound(p => p.UnitsInStock).Width(100);
    columns.Bound(p => p.Discontinued).Width(100);
    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(160);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.Pageable()
.Sortable()
.Scrollable()
  .Events(events => events.Change("saveChanges "))
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(20)
    .Events(events => events.Error("error_handler"))
    .Model(model => model.Id(p => p.ProductID))
    .Create(update => update.Action("EditingPopup_Create", "Grid"))
    .Read(read => read.Action("EditingPopup_Read", "Grid"))
    .Update(update => update.Action("EditingPopup_Update", "Grid"))
    .Destroy(update => update.Action("EditingPopup_Destroy", "Grid"))
))
kendo-uikendo-gridkendo-asp.net-mvc
32
Sarly

グリッドのデータソースのSyncイベントをサブスクライブし、そのデータソースの読み取りメソッドを呼び出すことができます。

.Events(events => events.Error("error_handler").Sync("sync_handler"))

function sync_handler(e) {
   this.read();
}
43
Atanas Korchev

イベントをデータソースに追加

.DataSource(dataSource => dataSource.Ajax(

        .Events(e => e.RequestEnd("PowerPlantProduction.onRequestEnd"))**
)

Javascript：

onRequestEnd: function (e) {

        if (e.type == "update") {
            if (!e.response.Errors) {
               e.sender.read();
            }
        }
    },
17
TrieuH

サーバー側の検証を使用している場合、受け入れられた回答は予期しない動作を引き起こす可能性があります。同期イベントは、リクエストが成功したかどうかに関係なくサーバーに更新が送信されるたびにトリガーされるため、リクエストがサーバー側の検証エラー（またはその他のエラー）をトリガーした場合、グリッドは更新され、変更は失われます。まだこれを見ていますが、私が見つけた最良の解決策は、データソースのonRequestEnd()イベントを使用して、手動でエラーをチェックすることです。

例えば：

function onRequestEnd(e)
{
    var grid = $("#grid").data("kendoGrid");
    var data = grid.dataSource;
    if (e.type == "create" || e.type == "update") {
        if (!e.response.Errors) 
            data.read();
        else console.log("I had some issues");
    }
}
6
Gumbo

これによりグリッドが更新されます

 var grid = $("#Name").data("kendoGrid");
     grid.dataSource.page(1);

.page（1）が機能しない場合は、.readを試してください。ただし、

4
CSharper

グリッドを更新する場合に使用します。

$("#WorkOrderDetails").data("kendoGrid").refresh();
3
Shaz

これは非常に古い質問であることに同意しますが、残念ながら私は数日前にこのエラーの犠牲者でもありました。私のシナリオは

  1. 初めてポップアップメソッドを使用してデータベースに新しいレコードを挿入できました
  2. 更新せずに同じグリッドに別のレコードを追加すると、グリッドは両方のレコードをサーバーに送信し、残念ながら値の重複エラーが発生します。

最後に、問題の解決策を得たと思いますデータベースに挿入してそのオブジェクトを返すときに、レコードに主キー値を設定していませんでした

以下は私の剣道グリッドコードです

@(Html.Kendo().Grid<TeamMemberViewModel>()
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.abcd);
            columns.Bound(p => p.abcd_id).Hidden();
            columns.Bound(p => p.abcd12_id).Hidden();
            columns.Command(command =>
            {
                command.Edit();
                command.Destroy();
            });
        })
        .ToolBar(toolbar =>
        {
            if (ViewBag.IsAddAllowed)
            {
                toolbar.Create().Text("Add new");
            }

            //  toolbar.Save().SaveText("Save Changes");

        })
        .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ABCD")
        )
        .Pageable()
        .Navigatable()
        .Sortable()
        .Scrollable()
        .DataSource(dataSource => dataSource
            .Ajax()                
            .PageSize(20)
            .ServerOperation(false)
            .Events(events =>
            {
                events.Error("error_handler");
                events.RequestEnd("request_end");
            }
)
        .Model(model =>
        {
            model.Id(p => p.primarykey_id);
            model.Field(p => p.abcd);
        })
        .Create("ABCD_Create", "TeamMember", new { id = Model.abcd_id})
        .Read("ABCD_Read", "TeamMember", new { id = Model.abcd_id })
        .Update("ABCD_Update", "TeamMember", new { id = Model.abcd_id })
        .Destroy("TeamMember_Destroy", "TeamMember", new { id = Model.hackathon_id })
    )
)

以下はエラー処理コードです

  function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            $(".errorMessage").text(message);
            alert(message);
        }
    }



    function request_end(e) {
        switch (e.type) {
            case "create":
                if (e.Errors == undefined && e.response.Total > 0) {
                    //  alert("Saved Successfully");
                    $(".errorMessage").text("Saved Successfully");
                }
                break;

            case "update":
                if (e.Errors == undefined && e.response.Total > 0) {
                    // alert("Updated Successfully");
                    $(".errorMessage").text("Updated Successfully");
                }
                break;

            case "destroy":
                if (e.Errors == undefined && e.response.Total > 0) {
                    // alert("Deleted Successfully");
                    $(".errorMessage").text("Deleted Successfully");
                }
                break;

            default:
                $(".errorMessage").text("");
                break;
        }

        return true;
    }

サーバーコード

 [AcceptVerbs(HttpVerbs.Post)]
public ActionResult ABCD_Create([DataSourceRequest] DataSourceRequest request, MyViewModel my, short abcd_id)
{
    if (my != null && ModelState.IsValid)
    {

        MY tm = Mapper.Map<MyViewModel>(my);
        tm.abcd_id = abcd_id;

        try
        {
            repo.Create(tm);
            my.primarykey_id = tm.primarykey_id;   ///This is most important                           
        }
        catch (Exception ex)
        {
            ModelState.AddModelError("Duplicate Value Found", string.Format("error: {0} already exists", my.abcd));
        }
    }
    else
    {
        ModelState.AddModelError("Error", "Not valid please send data again");
    }

    return Json(new[] { my }.ToDataSourceResult(request, ModelState));
}

これが誰かを助けることを願っています

3
Sandesh Daddi

他の誰かがこれを行う方法を知る必要がある場合に備えて。作成および更新ビットに「完全な」機能を含めることができます。

transport: {
    read: {
        url: "http://myurl.json"
    },
    create: {
        url: "http://mycreate.json",
        type: "POST",
        complete: function(e) {
            $("#grid").data("kendoGrid").dataSource.read(); 
        }
    },
2
GenXisT

編集ボタンのクリックで関数を呼び出すことができ、その中でグリッドを更新できます：

function EditRow(){
     var grid = $("#YourGridName").data("kendoGrid");
     grid.dataSource.read();              
}
1
user3040830
.sync: function (e) {
this.read();
},
1
Matthew J Coffman

ポップアップ編集モードを持つajax mvc剣道グリッドでAutoSync(true)を使用すると、ポップアップがまったく表示されなくなります。

だから私はこれを使う

function onRequestEnd(e) {
        if(e.type == "create" || e.type == "destroy" || e.type == "update") {
            setTimeout(function myfunction() {
                $("#mygrid").data("kendoGrid").dataSource.read();
            }, 1000);
        }
    }

タイムアウトは、クラッディング操作を重ねないようにすることです。

0
Rohit Vipin Mathews

新しいアイテムを作成した後、グリッドを更新する方法を見つけようとしてきました。シナリオは次のとおりです。クライアントでアイテムを作成し、サーバーにリクエストを送信し、レスポンスを受信して​​クライアントを更新します。 （または、グリッドがサーバー側の作成関数で返すアイテムを使用していない理由を理解することはできません）

この投稿 はrequestEndイベントに言及していますが、カミソリでは公開されていません。このイベントは、要求が終了した後、つまりサーバーがイベントを処理した後に発生するようです。そのため、クライアントで作成された新しいオブジェクトは、処理のためにサーバーに既に送信されます。クライアントはデータを失うことなく最新情報を要求できます。グリッドデータソースオブジェクトはページの読み込み時に未定義だったため、最終的に.Changeイベントは、requestEndイベントをフックします。

@(Html.Kendo().Grid
.Name("user-grid")
...
.Pageable(pageable => pageable
    ...
    .Events( e => e.Remove("grid_remove").Change("hook_request_end"))
.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(20)
    .Model(m =>
    {
        m.Id(vm => vm.DocumentId);
        m.Field<DateTime>("LastModified").Editable(false);
    })
    .Read(a => a.Action("KList", "Controller"))
    .Create(a => a.Action("KCreate", "Controller"))
    .Update(a => a.Action("KUpdate", "Controller"))
)

そして、javascript：

var requestEndHooked = false;
function hook_request_end()
{
    if (requestEndHooked == true)
    {
        return;
    }

    requestEndHooked = true;
    $("#user-grid").data("kendoGrid").dataSource.bind("requestEnd", dataSource_requestEnd);
}

function dataSource_requestEnd(e)
{
    try
    {
        if (e.type == "create")
        {
            $("#user-grid").data("kendoGrid").dataSource.read();
        }

    }
    catch (e)
    {
    }
}

もっと良い方法があれば、知りたいです。

質問に答えるために、「作成」以外のイベントがあります：「読み取り」、「更新」

0
BurnsBA