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

Question

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

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

@(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;"})

使整个下拉列表可见。