Question

这很可能是一个错误，因为这是自升级Kendo库以来的一种新行为。我在Telerik有一张支持票。

我有一个网格，其中一列正在使用客户端模板，该模板定义了一个带有 shipMethodDD 类的输入元素。然后，网格的数据绑定事件查找具有所述类的输入元素。下降开始就好了。问题是，用户第一次点击下拉列表时，会打开然后立即关闭。任何后续点击都会打开它，它将按预期保持打开状态。我将网格外部的输入元素放在同一页面上，它的行为符合预期。所以这是一个问题，它在网格中。

@(Html.Kendo().Grid<Models.ShipmentPlanningLineModel>()
 .Name("ShipmentPlanningOrders")
 .Columns(col =>
     {
         col.Bound(c => c.Order.ShipMethod.Name).Title("Ship Method").Width(150)
             .ClientTemplate("<inputclass='shipMethodDD'data-group='#= Order.Guid #'data-text-field='Name'data-value-field='Guid'data-bind='#= Order.ShipMethodGuid #'value='#= Order.ShipMethodGuid #'style='width:144px;'/>");
     })
 .Filterable()
 .Scrollable(s => s.Height(600))
 .Selectable(s => s.Mode(GridSelectionMode.Single))
 .Sortable(s =>
 {
     s.SortMode(GridSortMode.MultipleColumn);
     s.AllowUnsort(true);
 })
 .Navigatable()
 .Resizable(r => r.Columns(true))
 .DataSource(dataSource => dataSource
         .Ajax()
         .Read(r =>
             {
                 r.Action("Planning", "Shipping");
                 r.Data("getShipmentPlanningParameters");
             })
         .ServerOperation(false)
         .AutoSync(true)
         .PageSize(25)
     )
 .Events(e =>
 {
     e.DataBound("gridBound");
 })

）

functiongridBound(e)
{
vardataSource = newkendo.data.DataSource({
    transport: {
        read: {
            url: location.href.substring(0, location.href.indexOf(':')) + '://'+ location.host + '/Shipping/GetShipMethods'
        }
    }
});
$('.shipMethodDD').each(function(idx, item)
{
    $(item).kendoDropDownList({
        dataTextField: "Name",
        dataValueField: "Guid",
        dataSource: dataSource,
        value: $(item).val(),
        autoBind: true,
        change: function(e)
        {
            varshipMethodGuid = this.value();
            varinput = $(this.wrapper).find('input');
            $(input).val(shipMethodGuid);
            vargroup = $(input).data('group');
            updateShipMethod(group, shipMethodGuid);
        }
    });
});

kendo.ui.progress($('#ShipmentPlanningOrders'), false);

}

Answer 1

问题的原因是并非整个下拉列表在单元格内可见。当点击下拉列表时，它需要聚焦元素，以便它可以处理键盘导航功能的关键事件，并且当在IE中聚焦一个不完全可见的元素时，它会自动执行scrollIntoView，这将导致弹出窗口关闭。由于下拉列表中的一个错误导致元素无法聚焦，因此键盘导航无法工作，因此以前的版本不会出现这种情况。为了避免这个问题，你应该增加列宽：

columns.Bound(c => c.Order.ShipMethod.Name).Title("Ship Method").Width(160)

或减小输入宽度：

.ClientTemplate("<input ... style='width:140px;' />")

或减少列填充：

columns.Bound(c => c.Order.ShipMethod.Name).Title("Ship Method").Width(150).HtmlAttributes(new { style="padding: 4px 3px;"})

以便整个下拉列表可见。

Kendo DropDownList在网格中首次单击时打开和关闭

1 个答案: