Kendoui Grid自定義下拉框

您好，我正在嘗試添加自定義下拉列表到Kendoui MVC網格。網格的所有例子都顯示瞭如何用外鍵關係做到這一點。我們是對數據執行操作的下拉菜單（查看詳細信息，編輯信息，刪除記錄），因此與數據無關。所以在我的Index.aspx有：Kendoui Grid自定義下拉框

<% 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" 
      } 
      }; 
     }

當我運行代碼，我得到下拉列此[對象的對象。我知道我錯過了一些東西，但是我收到了來自樣本和文檔的相互矛盾的信息。提前致謝。

來源

2013-09-27 mcauthorn

的方法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-29 12:54:36

我有完全相同的問題，我掙扎着找到一個解決方案。最後，我設法使用稍微不同的方法使其工作。我沒有使用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; } 


    }

在我想顯示的產品的編號，名稱，這是一個外鍵存儲模型，商店的名稱，以及該STOREID網格模型產品一列有「打開產品」，「打開商店」等選項。使用這種方法http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/faq#how-do-i-use-a-kendo-ui-widget-inside-a-grid-client-column-template？我結束了這

@(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-21 21:48:51

Kendoui Grid自定義下拉框

回答

相關問題