繁体   English   中英

Kendo ui带有下拉列表和网格

[英]Kendo ui with a dropdownlist and a grid

谁能帮帮我,我之前已经发布过相同的问题,但我无法获得答案。 我有一个网格,内部有一个下拉列表,它工作正常,但网格中的列数很少,这取决于下拉列表,所以任何人都可以告诉我,当dropdowlist的选定值更改时如何更改列的值。 在我的网格中,我有一个StudentNumber作为下拉列表,StudentGivenName是一列取决于学生编号的列。 我正在使用asp.net mvc我找不到答案

<%: Html.Kendo().Grid<SSTS.Models.FaresBasedViewModel>()
.Name("grid2")
      .Columns(columns =>
      {
          // columns.Bound(student => student.CustomerName);
    //      columns.Bound(student => student.StudentNumber).Width(150); ;//.ClientTemplate("#=CustomerNames.CustomerName#").Width(160);
          columns.ForeignKey(p => p.StudentNumber, (System.Collections.IEnumerable)ViewData["students"], "StudentNumber", "StudentNumber")
          .Title("StudentNumber").Width(150);
          columns.Bound(student => student.StudentGivenName).Width(150); ;//.ClientTemplate("#=CustomerNames.CustomerName#").Width(160);
          columns.Bound(student => student.DateGovernmentFunded).Width(150); ;//.ClientTemplate("#=CustomerNames.CustomerName#").Width(160);
          columns.Bound(student => student.SectionNumber).Width(150); ;//.ClientTemplate("#=CustomerNames.CustomerName#").Width(160);
          columns.Bound(student => student.Description).Width(150); ;//.ClientTemplate("#=CustomerNames.CustomerName#").Width(160);
          columns.Bound(student => student.Distance).Width(150); ;//.ClientTemplate("#=CustomerNames.CustomerName#").Width(160);
          columns.Bound(student => student.FareNumber).Width(150); ;//.ClientTemplate("#=CustomerNames.CustomerName#").Width(160);
          columns.Bound(student => student.FareType).Width(150); ;//.ClientTemplate("#=CustomerNames.CustomerName#").Width(160);
          columns.Bound(student => student.TopeUpCode).Width(150); ;//.ClientTemplate("#=CustomerNames.CustomerName#").Width(160);
          columns.Bound(student => student.ApplicationID).Width(150); ;//.ClientTemplate("#=CustomerNames.CustomerName#").Width(160);



            columns.Command(commands =>
          {
              commands.Edit(); // The "edit" command will edit and update data items
              commands.Destroy(); // The "destroy" command removes data items
          }).Title("Commands").Width(150);
      })
      .ToolBar(toolbar => toolbar.Create()) // The "create" command adds new data items
      .Editable(editable => editable.Mode(GridEditMode.InLine)) // Use inline editing mode
      .DataSource(dataSource =>
          dataSource.Ajax()
            .Model(model =>
            {
                model.Id(student => student.FareBaseID); // Specify the property which is the unique identifier of the model

                model.Field(p => p.StudentNumber).DefaultValue("");   //    model.Field(student => student.StudentNumber).Editable(false); // Make the studentID property not editable

          //      model.Field(p => p.CustomerNames).DefaultValue(
           //         ViewData["defaultCategory"] as KendoGridAjaxEditing2.Models.CustomerNamesViewModel);


            })
                        .Create(create => create.Action("FaresBased_Create", "ServiceUse")) // Action invoked when the user saves a new data item
                                                .Read(read => read.Action("FaresBased_Read", "ServiceUse"))  // Action invoked when the grid needs data
                                    .Update(update => update.Action("FaresBased_Update", "ServiceUse"))  // Action invoked when the user saves an updated data item
                                    .Destroy(destroy => destroy.Action("FaresBased_Destroy", "ServiceUse")) // Action invoked when the user removes a data item
      )
          .Pageable().Scrollable()

%>

一般来说,我要做的是

  1. 为下拉列表创建自定义编辑器
  2. 编写一个函数以绑定到下拉列表的change事件 (另请参见MVC包装器的相应文档 ),该函数根据所选的下拉列表值设置其他列值

您可以通过使用$(e.sender).element.closest("tr") 从网格和相关的<tr> 获取下拉列表绑定的dataItem

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM