Telerik Grid ─ Pass additional values from clientside events


Telerik GridDelete只要有unique value作為識別,就可以取得特定資料,進行刪除的動作。
unique可藉設定DataKeys達到,例如
    .DataKeys(datakeys =>
    {
        datakeys.Add(o => o.Id).RouteKey("KeyId");
        datakeys.Add(o => o.Name).RouteKey("KeyName");
    })

但有時會希望刪除後要做些額外處理,總不能設NRouteKey吧(也不是不對,蠻爛的就是….

依據Telerik論壇的資訊,可以傳遞額外的資訊,參考網址如下

若額外資訊不只一組,使用論壇建議的方法~直接用JSON包,傳值還是有問題,經過本人測試,只要一個一個指定就OK!程式碼如下
JavaScript function Grid_OnDelete(e) {
    e.values.A= $('#myA').val();
    e.values.B= $('#myB').val();
}

C#
[GridAction]
public ActionResult _AjaxDelete(string KeyId,string A, string B)
{   //略
}

最後附上完整的UI
@(Html.Telerik().Grid()
    .Name("Grid")
    .DataKeys(datakeys =>
    {
        datakeys.Add(o => o.Id).RouteKey("KeyId");
        datakeys.Add(o => o.GroupName).RouteKey("KeyGroupName");
    })
    .ToolBar(commands => commands.Insert().ButtonType(GridButtonType.Text).ImageHtmlAttributes(new { style = "margin-left:0" }))
    .Columns(columns =>
    {
        columns.Bound(o => o.GroupName);
        columns.Bound(o => o.Description);
        columns.Bound(o => o.CloudGroup);
        columns.Bound(o => o.SocialGroup);
        columns.Command(commands =>
        {
            commands.Edit().ButtonType(GridButtonType.Text);
            commands.Delete().ButtonType(GridButtonType.Text);
        });
    })
    .DataBinding(d => d.Ajax().Select("_AjaxBinding", "Partner")
        .Insert("_AjaxInsert", "Partner")
        .Update("_AjaxUpdate", "Partner")
        .Delete("_AjaxDelete", "Partner"))
    .ClientEvents(c => c.OnDelete("Grid_OnDelete"))
)

補充:不只Delete能傳遞額外資訊,Update亦可,只是要寫在OnSave event,範例如下
JavaScript
    function Grid_OnSave(e) {
        if (e.mode == 'edit') {
            e.values.A= $('#myA').val();
            e.values.B= $('#myB').val();
        }
    }

沒有留言: