小编Jar*_*ter的帖子

在我的应用程序的某些区域中,在网格命令工具栏中将自定义命令放在网格的底部而不是顶部是更加用户友好的.

我想知道这是否可以在Kendo UI中进行,或者是否还有其他一些工作要做.

下面是标准只读BUT可选网格的代码.

提前致谢!

@(Html.Kendo().Grid(Model)
.Name("AddressBookGrid")
.Columns(columns =>
{
    columns.Bound(i => i.IsOrigin).ClientTemplate("<input name='Origin' id='origin' type='radio' value='Origin' />").Width(70);
    columns.Bound(i => i.IsDestination).ClientTemplate("<input name='Destination' id='destination' type='radio' value='Destination' />").Width(70);
    columns.Bound(i => i.CompanyName).Width(120).HtmlAttributes(new { id = "CompanyName" });
    columns.Bound(i => i.AddressLine1).Width(150).HtmlAttributes(new { id = "AddressLine1" });
    columns.Bound(i => i.AddressLine2).Width(150).HtmlAttributes(new { id = "AddressLine2" });
    columns.Bound(i => i.City).Width(100).HtmlAttributes(new { id = "City" });
    columns.Bound(i => i.StateProvince).Width(70).HtmlAttributes(new { id = "StateProvince" });
    columns.Bound(i => i.PostalCode).Width(70).HtmlAttributes(new { id = "PostalCode" });
    columns.Bound(i => i.CountryCode).Width(70).HtmlAttributes(new { id = …

我目前正在对特定表单元素使用焦点,以便知道用户何时向前标签或单击其他字段.

我需要知道这一点,因为ajax调用会在此之后立即启动并填充几个不同的字段(例如,输入有效的邮政编码,它会搜索数据库并返回城市).

现在,我的问题,ajax调用收到一个HTML响应,并在加载它时,导致表单失去当前的焦点.

我需要一种方法来保存焦点并在ajax调用后恢复它.

到目前为止,我已经完成了导航工作.它会破坏很多,并且还会干扰页面上其他内容的加载(例如对话框窗口).所以,我认为必须有一个更好的方法,这就是为什么我在这里.如果您需要更多信息,请与我们联系.代码如下.

祝一切顺利!

    $('.DZipCode').focusout(function () {
      var ZipCode = $('.DZipCode').val();


    $.ajax({ // create an AJAX call...
        async: false,
        type: "POST", // GET or POST
        url: "/Home/SelectZipCodeDataDestination", // the file to call`
        data: { zipCode: ZipCode },
        success: function (response) { // on success.. 
            $(":input").focus(function() {
                var prevFocus;

                prevFocus = $(this).attr("id");
               $('#quotetab').html(response);
                $('#'+prevFocus).focus();
           // });               
        }  // end of success
    });  // end of .ajax

});

更新 我已设法使用值和编辑器模板获取表单呈现(请参阅图像).

对不起,黑色标签.NDA要求......

现在这可以跨多行工作,因为我使用行的uid为详细信息模板提供了一个唯一的名称:

@(Html.Kendo().TabStrip()
    .Name("Details_#=uid#")

我已将下面的来源更新到最新版本,并列出了一些我仍然喜欢帮助的问题.

显着的问题:

• 保存更改时,将详细信息模板与网格一起序列化
• 使用视图模型上的数据注释分配标签和验证规则(这似乎不起作用,因为我似乎无法让Html助手工作.建议会很棒!

Orignal Post文本(源代码已更新)

我正在尝试创建一个批处理网格,其中每个项目包含一个详细信息模板.

每个详细信息模板都包含一个标签,我想在其中保存额外的表单数据.

现在,我有标准的批处理网格工作,但我似乎无法在屏幕上获取每个项目的信息并让它可编辑.此外,当存在多行时,详细信息模板会中断.模板仍然呈现,但按钮不起作用,因为两个模板具有相同的ID,可以理解地破坏用户的交互能力,但我不确定如何确保每个行模板的唯一标识符(可能以某种方式使用父uid？)

我完成第一步后,我也不确定如何序列化此表单数据,但如果证明有必要,我可以单独提出一个问题.

格

@(Html.Kendo().Grid(Model.ItemModelList)
.Name("ItemGrid")
.Columns(columns =>
{
    //Other columns omitted for brevity
    columns.Bound(i => i.Description).Width(100);
    columns.Command(command =>
    {
        command.Destroy();
    }).Width(60);
})
.ClientDetailTemplateId("ItemDetails")
.ToolBar(toolbar =>
{
    toolbar.Create();
    toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
.Pageable()
.Sortable()
.Scrollable()
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
    .Ajax()
    .Batch(true)
    .ServerOperation(false)
    .Events(events => 
    {
        events.Error("ItemGrid_ErrorHandler");
    })
    .Model(model =>
    {
        model.Id(i => i.ItemModelID);
        model.Field(i => i.DimensionUOM).DefaultValue("in");
        model.Field(i => i.WeightUOM).DefaultValue("lbs");
    })
    .Create(create => create.Action("CreateProducts", "ItemGrid")) …

我正在做的是将行从一个网格复制到另一个网格.原始网格不可编辑,但目标网格是.

因此,当我连续加载并更改它时,它也会更改原始网格中的值.

此外,如果我将原始网格中的一行添加到目标网格两次,我会遇到更多问题.目标网格中任一行上的一个数据更改会更改目标表中另一行内的数据,以及原始网格中的"只读"版本.

我怀疑这是由所有复制的行引起的,这些行保留了复制它的父级的data-uid.如果有人可以确认/否认这个并且可能给我一个解决方法,我将非常感激!

旁注:由于实现要求,所有这些代码必须是客户端,所以我不能通过控制器方法完成这项工作.我确实让它以这种方式工作,但它不足以满足我的需要.

原始网格(复制):

@(Html.Kendo().Grid(Model)
.Name("ProductBookGrid")
.Columns(columns =>
{
    columns.Bound(i => i.FreightClass).Width(70);
    columns.Bound(i => i.Length).Width(70);
    columns.Bound(i => i.Width).Width(70);
    columns.Bound(i => i.Height).Width(70);
    columns.Bound(i => i.DimensionUOM).Width(70);
    columns.Bound(i => i.QuantityValue).Width(70);
    columns.Bound(i => i.QuantityUOM).Width(70);
    columns.Bound(i => i.WeightValue).Width(70);
    columns.Bound(i => i.WeightUOM).Width(70);
    columns.Bound(i => i.NMFC).Width(75);
    columns.Bound(i => i.Description).Width(150);
})
.ToolBar(toolbar =>
{
    toolbar.Custom().Text("Add").Url("#_").HtmlAttributes(new { onclick = "PopulateItemGrid()" });
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.DataSource(dataSource => dataSource
    .Ajax()
    .Model(model =>
    {
        model.Id(i => i.ItemModelID);
    })
)
.Selectable(selectable …