我正在使用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收到邮件。 实现这一目标的正确方法是什么?
答案 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>