javascript - 在 Kendo UI 网格中选择数据项

Question

我在 MVC4 应用程序中有 KendoUI Grid，如下所示:

@(Html.Kendo().Grid<ProjectSystem.Web.Models.ProjectModel>()
      .Name("Grid")
      .Editable(editable =>
          {
              if(User.IsInRole(Constants.Admin)) 
              { 
                editable.Mode(GridEditMode.InCell);
              }
              else
              {
                  editable.Enabled(false);
              }
          })
      .Sortable(sortable => sortable.AllowUnsort(false))
      .Navigatable()
      .ToolBar(toolbar =>
          {
              if (User.IsInRole(Constants.Admin))
              {
                  toolbar.Create();
                  toolbar.Save();
              }
          })
          .Selectable(s => s.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
          .Columns(columns =>
      {
          columns.Bound(p => p.ProjectId);
              columns.Bound(p => p.Name);
              columns.Bound(p => p.Address);
              columns.Bound(p => p.Postcode);
              columns.Bound(p => p.Contact);
              columns.Bound(p => p.Files);
              columns.Bound(p => p.Link).ClientTemplate("<a href='#=Link#' target='_blank'>#=Files!=null && Files.length > 0  ? 'Dropbox' : ''  #</a>");
              columns.Bound(p => p.ProjectStatus);
              columns.Bound(p => p.Active).ClientTemplate("<input type='checkbox' class='chkboxActive' #= Active ? checked='checked' : '' # ></input>");
              columns.Bound(p => p.Unused).ClientTemplate("<input type='checkbox' class='chkboxUnused' #= Unused ? checked='checked' : '' # ></input>");
              columns.Bound(p => p.IsSMS).ClientTemplate("<input type='checkbox' class='chkboxIsSMS' #= IsSMS ? checked='checked' : '' # ></input>");
              columns.Bound(p => p.MaterialLink).Title("").ClientTemplate("<a href='/Material/index?projectId=#=ProjectId#'>#=GetText()#</a>");
          })
      .DataSource(dataSource => dataSource.Ajax()
                                          .Model(model => model.Id(p => p.ProjectId))
                                          .Batch(true)
                                          .Events(events => events.Error("error"))
                                          .Events(events => events.RequestEnd("onRequestEnd"))
                                          .Create(create => create.Action("ProjectCreate", "Project"))
                                          .Update(update => update.Action("ProjectUpdate", "Project"))
                                          .Read(read => read.Action("ProjectRead", "Project").Data("ExtraData"))
      )
      )

ProjectStatus 列是一个 Enum，它有一个名为 StatusColumn 的 UIHint；都在这里展示:

枚举:

public enum ProjectStatus
{
    Open = 1,
    Closed = 2
}

View 模型:

[UIHint("StatusColumn")]
[Display(Name = "Status")]
public ProjectStatus ProjectStatus { get; set; }

UIHint(局部 View ):

@(Html.Kendo().DropDownList().Name("ProjectStatus")
.BindTo(new List<DropDownListItem>
            {
                new DropDownListItem{Text = "", Value = "0"},
                new DropDownListItem{Text = "Open", Value = "1"},
                new DropDownListItem{Text = "Closed", Value = "2"}
            }
    ).Events(e => e.Select("saveProjectStatus")))

*问题:*

当 saveProjectStatus 事件在上面显示的下拉 UI 提示上触发时，我实际上正在尝试获取 ProjectId 值(上面显示的网格中的一列)。

我设法获得如下选定的值:

function saveProjectStatus(e) {
    debugger;
    var grid = e.sender;

    var row = grid.select();
    var currentDataItem = grid.dataItem(this.select());
    var selectedValue = currentDataItem.Text;

     //     var data = grid.dataItem("tr:eq(1)");
    //   var dataItem = grid.dataItem($(this).closest('tr'));
    // var uid = currentDataItem.uid; //.Name;

    //  var dataContext = grid.dataSource.getByUid(uid);

    //      var parentRow = e.wrapper.closest("tr");

    //var uid = $(e)parent().parent().attr('data-uid');
    //var dataContext = grid.dataSource.getByUid(uid);
}

但是我不能对 ProjectId 做同样的事情!在过去的一个小时里，我曾多次尝试(上面都已注释掉)来解决这个问题，但都没有成功。

我也很乐意将行隐藏在 DOM 中而不是获取 ProjectId，如果这也是可能的话。

如果可以，请帮忙。

非常感谢。

Answer 1

看起来您的网格设置为单选，您可以像这样访问所选网格行的值。

$('#Grid').click(function () {
    var gview = $(this).data("kendoGrid");
    var selectedItem = gview.dataItem(gview.select());
    var ProjectId = selectedItem.ProjectId;       
})

编辑:每一行都有下拉菜单吗？并且您希望在下拉列表更改时触发事件并获取行的 ID？