0

こんにちは、Kendoui MVC グリッドにカスタム ドロップダウンを追加しようとしています。グリッドのすべての例は、外部キー関係でこれを行う方法を示しています。私たちのものは、データに対してアクション (詳細の表示、情報の編集、レコードの削除) を実行するドロップダウンであるため、データとは関係ありません。したがって、index.aspxには次のものがあります。

  <% Html.Kendo().Grid<Training.Models.TrainingViewManagementModel>()
.Name("grid")
.Columns(columns =>
    {
        columns.Bound(x => x.SelectAction).Width(95).Title("Select Action").ClientTemplate("#=SelectAction#");
        columns.Bound(x => x.Record).Width(100);
        columns.Bound(x => x.Code).Width(65);
        columns.Bound(x => x.PeopleTrained).Width(75);
        columns.Bound(x => x.TrainingTypes).Width(100);
        columns.Bound(x => x.Trainer).Width(100);
        columns.Bound(x => x.TrainingDate).Format("{0:MM/dd/yyyy}").Width(100);
    })

.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(new { style = "height:500px;" })
.DataSource(dataSource => dataSource
        .Ajax()            
        .PageSize(50)
        .Read("RetrieveTrainingManagementGrid", "Home")
                .Model(m =>
                {
                    m.Id(x => x.TrainingID);
                    m.Field(x => x.SelectAction).Editable(true);
                    m.Field(x => x.Record).Editable(false);
                    m.Field(x => x.Code).Editable(false);
                    m.Field(x => x.PeopleTrained).Editable(false);
                    m.Field(x => x.TrainingTypes).Editable(false);
                    m.Field(x => x.Trainer).Editable(false);
                    m.Field(x => x.TrainingDate).Editable(false);
                })
        ).Render();
%>

そして、サンプル コードのために、次のエディター テンプレートがあります。

<%=Html.Kendo().DropDownListFor(m=>m)
    .Name("SelectAction")
    .Events(e=>e.Change("onGridchange"))
    .DataTextField("DropDownName")
    .DataValueField("DropDownID")
    .DataSource(datasource =>datasource
        .Read("RetrieveDropdownOptionsKendo", "Home"))

 %>

そして、モデルでは、正しいデータを渡していることを確認しています

public IEnumerable<TrainingViewManagementModel> RetrieveAirportManagementView()
        {
            return new List<TrainingViewManagementModel>()
            {
               new TrainingViewManagementModel {
                SelectAction = new List<DropDownOptions> { new DropDownOptions { DropDownID = 0, DropDownName = "Select an action"}},
                TrainingID = 561,
                Record = "2001-xxx",
                ID = 206,
                Code = "BMW",
                PeopleTrained = 0,
                TrainingTypes = "SCRUM, Hi",
                UserID = new Guid(),
                Trainer = "John dowle",
                TrainingDate = DateTime.Parse("2009-11-21"),
                IndividualPeople = "Bob Jim, Jim bob, Jane Bob"
            }
            };
        }

コードを実行すると、ドロップダウン列に [object Object] が表示されます。何かが足りないことはわかっていますが、サンプルとドキュメントから矛盾する情報を取得しています。前もって感謝します。

4

2 に答える 2

0

私はまったく同じ問題を抱えていて、解決策を見つけるのに苦労していました。最後に、少し異なるアプローチを使用して機能させることができました。DropDownList を使用する代わりに、垂直メニューを列のクライアント テンプレートとして使用しました。詳しくは。私はこのようなモデル製品を持っていました

public class Product
    {

        [AutoIncrement]
        [Alias("id")]
        [DataMember]
        public int Id { get; set; }

        [DataMember]
        public string Name { get; set; }


        [DataMember]
        [ForeignKey(typeof(Store), OnDelete = "CASCADE")]
        public int StoreId { get; set; }

        [DataMember]
        [Reference]
        public Store Store { get; set; }


    }

グリッドで、製品の ID、名前、Store モデルへの外部キーである StoreId、Store の名前、および「Open Product」、「Open Store」などのオプションを含む列を表示したいと考えました。など このアプローチを使用http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/faq#how-do-i-use-a-kendo-ui-widget-inside-a-grid -クライアント列テンプレート? 私はこれで終わった

@(Html.Kendo().Grid<PixieKendoMVC.Models.Product>()
    .Name("grid")
    .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .ServerOperation(false)
            .PageSize(20)
                .Events(events => events.Error("onGridError"))
           .Model(model =>
            {
                model.Id(p => p.Id);

            })
            .Read(read => read.Action("Get", "Product" ))
            .Create(create => create.Action("Create", "Product"))
            .Update(update => update.Action("Edit", "Product"))
            .Destroy(destroy => destroy.Action("delete", "Product"))
    )
                 .ToolBar(toolBar =>
                    {
                        toolBar.Create();
                        toolBar.Save();
                    })

    .Columns(columns =>
    {
        columns.Template(p => { }).Width(80).HtmlAttributes(new { @class = "templateCell" }).ClientTemplate(
                Html.Kendo().Menu().Orientation(MenuOrientation.Vertical)
                    .Name("menu_#=Id#")
                    .Items(its =>
                    {
                        its.Add().Text("do").Items(nested =>
                        {
                            nested.Add().Text("Action 1");
                            nested.Add().Text("Action 2");
                            nested.Add().Text("Action 3");
                        });

                    })
                    .ToClientTemplate().ToHtmlString()
                );

        columns.Bound(p => p.Id);
        columns.Bound(p => p.Name);
        columns.Bound(p => p.StoreId);
        columns.ForeignKey(p => p.StoreId, (System.Collections.IEnumerable)ViewData["stores"], "Id", "Name")
           .Title("Store").Width(150);

        columns.Command(command => command.Destroy()).Width(110);

    })
        .Events(ev => ev.DataBound("initMenus"))

    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
)
<span id="notification"></span>

<style type="text/css">
    .k-widget .templateCell {
        overflow: visible;
        width:80px;
        margin:10px;
        padding:10px;
    }

</style>

<script>
    function initMenus(e) {
        $(".templateCell").each(function () {
            eval($(this).children("script").last().html());
        });
    }
</script>

さまざまなメニュー項目で、テキストだけでなくアクションを追加できるようになりました。いくつかの CSS スタイルも必要なので、修正を歓迎します

于 2014-12-21T21:48:51.993 に答える
0

メソッド RetrieveAirportManagementView は、 JsonResult の型を返す必要があります。

public JsonResult RetrieveAirportManagementView()
    {
        var list= new List<TrainingViewManagementModel>()
        {
           new TrainingViewManagementModel {
            SelectAction = new List<DropDownOptions> { new DropDownOptions { DropDownID = 0, DropDownName = "Select an action"}},
            TrainingID = 561,
            Record = "2001-xxx",
            ID = 206,
            Code = "BMW",
            PeopleTrained = 0,
            TrainingTypes = "SCRUM, Hi",
            UserID = new Guid(),
            Trainer = "John dowle",
            TrainingDate = DateTime.Parse("2009-11-21"),
            IndividualPeople = "Bob Jim, Jim bob, Jane Bob"
        }
        };return Json(list, JsonRequestBehavior.AllowGet);
    }
于 2013-09-29T12:54:36.500 に答える