1

今私がやろうとしているのは、ハイブリッドまたはサーバーコントロールとjavascriptです。剣道のサーバーコントロールはエレガントだと思います。ご覧のとおり、グリッド内の編集可能なプロパティにアクセスする方法を必死に探していますが、運がありません。

 var grid = $("#Grid").data("kendoGrid");
 grid.editable.template = function () { kendo.template($("#MyTemplate").html()) };

ユーザーが編集ボタンをクリックすると、剣道のデフォルトのhtmlバージョンではなく#MyTemplateが表示されるという考え方です。たぶん、私は別の方向に進む必要があります私を導いてください。

これが参考のための私の完全なコードです。

 @model IEnumerable<Msh.Intranet.Models.ApiAdFileDisplayGridModel>
<script type="text/x-kendo-template" id="myTemplate">           
            <input data-bind="value: Id" name="Id"/>
        </script>
@(Html.Kendo().Grid(Model)
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Id).Visible(false);
        columns.Bound(p => p.FileName).Visible(false);
        columns.Bound(p => p.FormNumber);
        columns.Bound(p => p.FormTitle);
        columns.Bound(p => p.Class);
        columns.Bound(p => p.SecondaryCategory).Title("Category") ;
        columns.Bound(p => p.RevisionDate).Format("{0:MM/dd/yyyy}");
        columns.Command(c =>
        {

            c.Edit();
            c.Destroy();
        });

    })
    .Selectable()
     .Groupable()
     .Pageable()
     .Filterable()
     //.Sortable()
           .ToolBar(tools =>
      {
          tools.Create();
      })
      .Editable(editor => editor.Mode(GridEditMode.PopUp))
     .DataSource(dataSource => dataSource
        .Ajax()

        //this tells kendo I am the primary key
            .Model(model => 
            { 
                model.Id(p => p.Id);
                model.Field(p => p.RevisionDate);
            })
        .Read(read => read.Url(@Url.Action("ApiAdFileDisplayGrid","api",null,null)).Type(HttpVerbs.Get))
        .Create(create=>create.Url(@Url.Action("ApiAdFileDisplayGrid","api",null,null)).Type(HttpVerbs.Post))
        .Update(update=>update.Url(@Url.Action("ApiAdFileDisplayGrid","api",null,null)).Type(HttpVerbs.Put))
        .Destroy(destroy=>destroy.Url(@Url.Action("ApiAdFileDisplayGrid","api",null,null)).Type(HttpVerbs.Delete))
    )
)
<script type="text/javascript">

    $(function () {
        var grid = $("#Grid").data("kendoGrid");

        //grid.bind("change", function () {
        //    alert("Change ");
        //});

        grid.bind("dataBound", function (data) {
            alert("dataBound");

        });

        grid.bind("edit", function (e) {

            if (e.model.isNew()) {

                //create
                alert("new");


            } else {

                //edit
                alert("edit");

            }

        })

    // WebAPI needs the ID of the entity to be part of the URL e.g. PUT /api/Product/80
    grid.dataSource.transport.options.update.url = function (data) {
        var baseUrl = "@Url.Content("~/api/ApiAdFileDisplayGrid/")" +data.Id;
        return baseUrl;
    }

    // WebAPI needs the ID of the entity to be part of the URL e.g. DELETE /api/Product/80
    grid.dataSource.transport.options.destroy.url = function(data) {
        var baseUrl = "@Url.Content("~/api/ApiAdFileDisplayGrid/")" + data.Id;
        return baseUrl;
    }
        grid.editable.template = function () { kendo.template($("#MyTemplate").html()) };
});

</script>
4

2 に答える 2

2

エディターをカスタマイズするには、MVCエディターテンプレートエンジンを使用する必要があります。このコードライブラリのアプローチに従ってください。

于 2012-12-25T11:37:00.250 に答える
0

私はこのスレッドを剣道サイトで見つけました。これは、テンプレートを実行する方法の代替手段を提供します: http ://www.kendoui.c​​om/forums/mvc/grid/new-client-details-template.aspx#2427170

ただし、kendohtmlヘルパーが作成するjavascriptオブジェクトを操作する方法を確認するのは興味深いことです。

于 2012-12-26T16:02:33.240 に答える