Kendo UI ASP MVC 无法获取 Grid Selected 行值答案

【问题标题】：KendoUI ASP MVC Can not get Grids Selected row valueKendo UI ASP MVC 无法获取 Grid Selected 行值
【发布时间】：2012-12-09 03:22:12
【问题描述】：

我正在使用 Kendo UI Grid 来显示邮件列表，当我单击一行时，我需要从客户端已经拥有的邮件对象中选择一行并在编辑器中显示邮件正文。但无法获取选中的行值。

查看代码如下：

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<MVC3toHTML5.Models.MailModel>" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Index</title>
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
     <link href="<%= Url.Content("/Content/web/kendo.common.min.css") %>" rel="stylesheet" type="text/css" />
    <link href="<%= Url.Content("/Content/web/kendo.rtl.min.css") %>" rel="stylesheet" type="text/css" />
    <link href="<%= Url.Content("/Content/web/kendo.default.min.css") %>" rel="stylesheet" type="text/css" />
    <link href="<%= Url.Content("/Content/shared/examples-offline.css") %>" rel="stylesheet" type="text/css" />
    <script src="<%: Url.Content("/Scripts/jquery-1.5.1.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("/Scripts/modernizr-1.7.min.js") %>" type="text/javascript"></script>
      <script src="<%= Url.Content("/Scripts/jquery.min.js") %>"></script>
    <script src="<%= Url.Content("/Scripts/kendo.web.min.js") %>"></script>
    <script src="<%= Url.Content("/Scripts/kendo.aspnetmvc.min.js") %>"></script>
    <script src="<%= Url.Content("/Scripts/console.min.js") %>"></script>
    <script src="<%= Url.Content("/Scripts/prettify.min.js") %>"></script>
</head>
<body>
    <div style="font-size:medium;">
        <%: Html.Kendo().Grid(Model.mailList)
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.MailId).Width(200);
            columns.Bound(p => p.From.Value).Width(200);
            columns.Bound(p => p.Subject).Width(200);

        })
                        .Pageable()
                        .Sortable()
                        .Scrollable()
                        .Filterable()
                        .Groupable()
                        .DataSource(dataSource => dataSource
                            .Ajax()
                            .ServerOperation(false)
                                        .Events(events => events.Change("Grid_OnRowSelectUID"))

                         )
    .Selectable()
%>
    </div>
    <div style="margin-left:220px;">
  <% Html.Kendo().Editor()
      .Name("Editor")
      .HtmlAttributes(new { style = "width: 740px;height:440px;" })


      .Render();
%>
<script type="text/javascript">
    function Grid_OnRowSelectUID() {

        var dataSource = new kendo.data.DataSource({
            change: function (e) {
                alert("datasource");
            }
        });

        dataSource.bind("change", function (e) {
            alert("Bind");
        });

    }









</script>
    </div>
</body>
</html>

控制器如下：

namespace MVC3toHTML5.Controllers
{
    public class Home2Controller : Controller
    {
        public ActionResult Index()
        {
            MailModel mailModelobj = new MailModel();
            mailModelobj.GetMailList();
            return View(mailModelobj);

        }

    }
}

我正在从网络服务接收邮件。实现这一目标的正确方法是什么？

【问题讨论】：

标签： asp.net-mvc grid editor kendo-ui selecteditem

【解决方案1】：

使用Grid的change事件而不是dataSource的change事件。

<%: Html.Kendo().Grid(Model.mailList)
    .Name("Grid")
    .Selectable()
    .Events(ev=>ev.Change("onSelectRow"))
   //...



   <script>
        function onSelectRow(e){
             var currentSelectedItem = this.dataItem(this.select());
             alert(currentSelectedItem.SomeProp);
             $('#Editor').data().kendoEditor.value(currentSelectedItem.SomeProp);
        }
   </script>

【讨论】：