How can I allow selecting a value in the dropdownlist with the mouse only.

[Raphael]

Hello, I have a Kendo grid and in one of the columns includes a dropdownlist as in this example: 

https://demos.telerik.com/kendo-ui/grid/editing-custom?_ga=2.173256099.1285932464.1611750479-1230347328.1609856499 -> Column: "Category"

It turns out that because it is inside a grid I want to disable the selection of any button on the keyboard. I want the user to select only by the mouse.
How do I do that? I tried to use navigatable: false and .off ("keydown"), but it didn't work. Here is my code:

 

$('<input required name="' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: false,
            dataTextField: "text",
            dataValueField: "text",
            dataSource: data,
            optionLabel: {
                text: "Select an Admission Status...",
                value: ""
            },
            select: onSelectAdmissionStatus
        });

[Martin]

Hello, Raphael,

Could you please try the code below:

      <script>
        $(document).ready(function () {
          $("#select").kendoDropDownList();
          $("span.k-dropdown").off("keydown");
        });
      </script>

It appears to be preventing the keyboard navigation on my side. Here is a small example to see it in action.

Let me know how that works for you.

Regards,
Martin
Progress Telerik

[Raphael]

No, I already tried that code. I have several dropdowns within the grid. As in this example: https://demos.telerik.com/kendo-ui/grid/editing-custom?_ga=2.173256099.1285932464.1611750479-1230347328.1609856499

[Martin]

Hello, Raphael,

I tested the suggested code in the example you shared, and it seems to be working in that scenario as well. Please review the modified example.

function categoryDropDownEditor(container, options) {
          $('<input required name="' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
            autoBind: false,
            dataTextField: "CategoryName",
            dataValueField: "CategoryID",
            dataSource: {
              type: "odata",
              transport: {
                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
              }
            }
          });
          $("span.k-dropdown").off("keydown");
        }

If I am missing something, please modify the Dojo example so that I can observe the problem you are experiencing.

Regards,
Martin
Progress Telerik

[Raphael]

Hi Martin,

Thank you very much, now it worked.