设置:
障碍:
如何使用新模型(来自窗口/窗体javascript)更新Grid的行(dataItem?)。我无法获得目标dataItem的句柄。 Select()在此处不适用,因为未选中该行。相反,自定义按钮事件会打开模态网格窗口,其中包含用于更新,关闭等的字段和命令。
我可以使用原生的网格编辑,但我想要完成的是一种完全自定义弹出窗口的方法,显示可用于呈现CRUD操作的局部视图。
BTW:这样做的基本原理是优化网格行中的空间,通常使用不必要的编辑和删除按钮来消耗空间,使用Kendo本机控件属性。我觉得这更好地在一个单独的细节视图中呈现,就像模型网格窗口一样,在我的情况下。同样,不使用Select(),我无法理解如何在Window / form JavaScript中获取调用它的Grid行的句柄,以便用新模型数据更新行。
感谢您的时间。
答案 0 :(得分:1)
此演示显示如何获取绑定到按下自定义命令键的列的dataItem的引用,并在窗口中显示相应的信息。您也可以使用dataItem更新Grid:
http://demos.telerik.com/kendo-ui/grid/custom-command
以下是一个例子:
http://dojo.telerik.com/abUHI 看一下showDetails函数
答案 1 :(得分:1)
我发布以来的发现......
我是网络演示开发的新手,因此掌握客户端与服务器端元素的区别和范围是关键点。同样,了解Kendo Grid的各种细节也很有帮助。
继续我目前的解决方案......
获取从未使用Select()完成的自定义命令事件中选择的行项目的句柄,因为未选择行。正如之前在其他帖子中所述,这只是所需工作的一部分。在自定义命令事件处理程序JavaScript中(在下面的完整解决方案中再次看到):
var detailDataItem = this.dataItem($(e.target).closest("tr"));
我的解决方案:
在托管Kendo Grid的父窗口中:
@* Declare modal Kendo Grid window control *@
@helper ClientGrid()
{
@(Html.Kendo().Grid<Purevision.Models.Person>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.FirstName).Width(100);
columns.Bound(c => c.LastName).Width(130);
columns.Bound(c => c.Email).Width(140);
columns.Bound(c => c.Phone).ClientTemplate("#= (data.Phone) ? formatPhoneNumber(data.Phone) : 'none' #").Width(130);
columns.Bound(c => c.Comments).Hidden().Width(140);
columns.Bound(c => c.UserId).Hidden();
columns.Bound(c => c.Id).Hidden();
columns.Command(command =>
{
command.Custom("Archive").Click("archiveCommand");
command.Custom("Detail").Click("detailCommand");
}).Width(90);
})
.ToolBar(toolbar => toolbar.Create())
.Selectable(s => s.Mode(GridSelectionMode.Single))
.Events(e => e.Change("onChange").DataBound("onDataBound").DataBinding("onDataBinding"))
.Scrollable()
.Sortable()
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("Edit"))
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(c => c.Id))
.Create(create => create.Action("People_Create", "Clients"))
.Read(read => read.Action("People_Read", "Clients"))
.Update(update => update.Action("People_Update", "Clients"))
.Destroy(update => update.Action("People_Destroy", "Clients"))
)
)
}
@* Declare modal Kendo Grid window control; MUST be named 'detailWindow' as referenced by partial view script *@
@(Html.Kendo().Window().Name("detailWindow")
.Title("Client Details")
.Visible(false)
.Modal(true)
.Draggable(true)
.Width(400)
.Content(@<text>
@Html.Partial("_edit", new Person())
</text>
)
<script type="text/javascript">
function detailCommand(e) {
var window = $("#detailWindow");
var kWnd = window.data("kendoWindow");
var data = this.dataItem($(e.target).closest("tr"));
e.preventDefault();
kendo.bind(window, data);
kWnd.center().open();
}
</script>
&#13;
在Kendo模式窗口中显示的部分视图_edit.cshtml中:
<div class="form-group">
@Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-3" })
<div class="col-md-4">
@Html.EditorFor(model => model.FirstName)
@Html.ValidationMessageFor(model => model.FirstName)
</div>
</div>
<input type="button" id="updateButton" value="Update2" class="btn btn-default" />
在表单就绪期间连接按钮事件,它获取仍在客户端范围内的网格控件的句柄:
<script type="text/javascript">
// as mentioned by Tarek, bind each control's value attribute
$("#detailWindow [name]").each(function () {
var name = $(this).attr("name");
$(this).attr("data-bind", "value:" + name );
});
$(document).ready(function (e) {
var window = $("#detailWindow");
var grid = $("#grid").data("kendoGrid");
$("#updateButton").click(function (e) {
grid.saveChanges();
window.data("kendoWindow").close();
});
});
</script>
我愿意在这里重构建议。在JavaScript中,似乎有很多客户端编码来完成针对Kendo Grid的自定义活动。 (叹气)我很高兴拥有多功能性。 (微笑)
需要进行大量的重新编辑才能获得有用的答案。让我知道。 ;)
参考文献: Telerik Forums / Kendo UI Forum / Grid / How does Grid update its dataSource?
答案 2 :(得分:1)
使用你的方法你正在做双重请求所以我建议: 在编辑时打开一个通过MVVM绑定到行的窗口:
function edit(e) {
//get the row which belongs to clicked edit button
var item = this.dataItem($(e.currentTarget).closest("tr"));
//bind the window to the item via mvvm http://docs.telerik.com/kendo-ui/framework/mvvm/overview
kendo.bind($("#window"), item);
}
该窗口包含一个编辑器模板(Shared / EditorTemplates / Client.cshtml):
@(Html.Kendo().Window().Name("window")
.Title("Client Details")
.Visible(false)
.Modal(true)
.Draggable(true)
.Width(400)
.Content(@<text>
@Html.Partial("EditorTemplates/Client", new Product())
</text>))
//Put in every element in the window data-bind="value:INPUT NAME"
//<input name="price" /> become <input name="price" data-bind="value: price" />
$("#window [name]").each(function () {
var name = $(this).attr("name")
$(this).attr("data-bind", "value:" + name );
});
编辑器模板:
@model Product
@Html.TextBoxFor(m => m.Name)