KendoUI ASP MVC无法获取Grids Selected行值

时间:2012-12-21 14:29:10

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

我正在使用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);

        }

    }
}

我从webservice收到邮件。 实现这一目标的正确方法是什么?

1 个答案:

答案 0 :(得分:2)

使用网格的 change 事件而不是dataSource的更改事件。

<%: 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>