我使用MVC
,尝试使用inline-editing
来实现 Kendo网格的Foreign Key Column
...这应该显示并保存从中选择的值这与ComboBox
有关。
编辑有效...但是在更新该行时不会显示所选的值。
我的视图控件外观:
@(Html.Kendo().Grid<RTUDeviceCustomRegisterModbus>()
.Columns(columns =>
{
columns.Bound(x => x.Id)
.Visible(false);
columns.Bound(x => x.RTUDeviceId)
.Visible(false);
columns.Bound(x => x.Register)
.Title("Register")
.Width(50);
columns.Bound(x => x.Description)
.Title("Description")
.Width(100);
columns.ForeignKey(x => x.DataUnitId, Model.DataUnits, "Id", "DataUnitName")
.ClientTemplate((@Html.Kendo().ComboBox()
.BindTo(Model.DataUnits)
.Name("ddlDataUnits_#=Id#")
.DataValueField("Id")
.DataTextField("DataUnitName")
.ToClientTemplate()).ToHtmlString())
.Title("Units")
.Width(50);
columns.ForeignKey(x => x.DataTypeId, Model.DataTypes, "Id", "DataTypeName")
.Title("Data Type")
.Width(50);
columns.Bound(x => x.DataTypeSize)
.Title("ASCII (size)")
.Width(50);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(100);
})
.Name("gridCustomRegisterModbus")
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Sortable()
.Scrollable()
.BindTo(Model.RTUDeviceCustomRegisterModbuses)
.DataSource(dataSource => dataSource.Ajax()
.ServerOperation(true)
.PageSize(50)
.Model(model => { model.Id(m => m.Id); })
.Create(update => update.Action("Create", "CustomRegisterModbus", new { Area = "Documents" }))
.Update(update => update.Action("Update", "CustomRegisterModbus", new { Area = "Documents" }))
.Destroy(update => update.Action("Destroy", "CustomRegisterModbus", new { Area = "Documents" }))
)
.HtmlAttributes(new { @class = "", @style = "height: 400px;" }))
喜欢我的动作:
是的,它调用了操作...但是DataUnitId为NULL。因此,我猜我需要该部分的客户端模板...但这不起作用。
public class CustomRegisterModbusController : BaseController
{
#region <Actions>
[HttpPost]
public ActionResult Create([DataSourceRequest] DataSourceRequest request, RTUDeviceCustomRegisterModbus entity)
{
// It makes the call to CREATE...but the value of the ID is null
return Json(new[] { entity }.ToDataSourceResult(request, ModelState));
}
[HttpPost]
public ActionResult Update([DataSourceRequest] DataSourceRequest request, RTUDeviceCustomRegisterModbus entity)
{
// Do awesome stuff
return Json(new[] { entity }.ToDataSourceResult(request, ModelState));
}
[HttpPost]
public ActionResult Destroy([DataSourceRequest] DataSourceRequest request, RTUDeviceCustomRegisterModbus entity)
{
// Do awesome stuff
return Json(new[] { entity }.ToDataSourceResult(request, ModelState));
}
#endregion
}
答案 0 :(得分:0)
我不想回答自己的问题,但这是...
DROP DOWN LIST
值设置到模型中我尝试了各种其他已发布的解决方案...这是唯一可行的方法。
最终剃刀标记看起来像:
@(Html.Kendo().Grid<RTUDeviceCustomRegisterModbus>()
.Columns(columns =>
{
columns.Bound(x => x.Id)
.Visible(false);
columns.Bound(x => x.RTUDeviceId)
.Visible(false);
columns.Bound(x => x.Register)
.Title("Register")
.Width(50);
columns.Bound(x => x.Description)
.Title("Description")
.Width(100);
columns.ForeignKey(x => x.DataUnitId, Model.DataUnits, "Id", "DataUnitName")
.Title("Units")
.Width(50);
columns.ForeignKey(x => x.DataTypeId, Model.DataTypes, "Id", "DataTypeName")
.Title("Data Type")
.Width(50);
columns.Bound(x => x.DataTypeSize)
.Title("ASCII (size)")
.Width(50);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(100);
})
.Name("gridCustomRegisterModbus")
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Sortable()
.Scrollable()
.BindTo(Model.RTUDeviceCustomRegisterModbuses)
.DataSource(dataSource => dataSource.Ajax()
.ServerOperation(true)
.PageSize(50)
.Model(model => { model.Id(m => m.Id); })
.Create(update => update.Action("Create", "CustomRegisterModbus", new { Area = "Documents" }))
.Update(update => update.Action("Update", "CustomRegisterModbus", new { Area = "Documents" }))
.Destroy(update => update.Action("Destroy", "CustomRegisterModbus", new { Area = "Documents" }))
)
.HtmlAttributes(new { @class = "", @style = "height: 400px;" }))
类似于Javascript的方法
当然,您可能会将该方法放在自己的“控制器”类中
如果您使用Razor绑定到GRIDS事件...
.Events(events => events.Save("onSave"))
如果您使用自定义JavaScript控制器绑定事件...
// Instances
var grid = $('#mygrid').data('kendoGrid');
// Bindings
grid.bind('save', onSave);
// Of course you would point to a custom Object
function onSave(e) {
var model = e.model;
var ddl = null;
var text = null;
// DataUnits
ddl = $(e.container.find('[data-role=dropdownlist]')[0]).data('kendoDropDownList');
text = ddl.value();
if (text !== null && text.length > 0) {
//model.DataUnitId = 0;
model.set('DataUnitId', text);
}
// DataTypes
ddl = $(e.container.find('[data-role=dropdownlist]')[1]).data('kendoDropDownList');
text = ddl.value();
if (text !== null && text.length > 0) {
//model.DataTypeId = 0;
model.set('DataTypeId', text);
}
}