CODEWITHSUNDEEP
drop-down-menukendo-uitelerik
AntLaC
AntLaC

Reputation: 1225

Kendo DropDownList Open and Closes on First Click When in a Grid

This may very well be a bug since this a new behavior since upgrading the Kendo libraries. I do have a support ticket in with Telerik.

I have a grid and one of the columns is using a client template that defines an input element with a class of shipMethodDD. The data bound event for the grid then looks for input elements with said class. The drop downs are initiated just fine. The problem is, the first time the user clicks on the drop down, it opens and then immediately closes. Any subsequent click will open it and it will stay open as expected. I put an input element outside of the grid on the same page and it behaved as expected. So it is an issue with it being in the grid.

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

}

Upvotes: 2

Views: 5934

Answers (1)

AntLaC
AntLaC

Reputation: 1225

The reason for the problem is that not the entire dropdownlist is visible inside the cell. When clicking on the dropdownlist, it needs to focus the element so that it can handle key events for the keyboard navigation feature and when focusing an element in IE that is not entirely visible it automatically performs scrollIntoView which will cause the popup to be closed. This did not occur with the previous version because of a bug in the dropdownlist which prevented the element from being focused and thus the keyboard navigation from working. In order to avoid the problem you should increase the column width:

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

or decrease the input width:

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

or decrease the column padding:

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

so that the entire dropdownlist is visible.

Upvotes: 2

Related Questions