代码之家 › 专栏 › 技术社区 › Prisoner ZERO

Kendo Grids ForeignKey列的ClientTemplate不显示所选值?

kendo-grid kendo-ui model-view-controller

0

Prisoner ZERO · 技术社区 · 7 年前

使用 MVC ,我正在努力实现 inline-editing 剑道格网 使用 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为空。所以,我猜我需要客户端模板的一部分…但这是行不通的。

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
}

1 回复 | 直到 7 年前

1

0

Prisoner ZERO 7 年前

我需要一个客户端方法来处理Grid.Save
此方法将设置任何选定的 DROP DOWN LIST 模型中的值

我尝试了各种各样的解决方案…这是唯一有效的方法。

最终的RAZOR标记如下所示:

@(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方法如下所示:
当然,您可能会将该方法放在自己的“controller”类中

.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);
    }
}