This is a migrated thread and some comments may be shown as answers.

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

4 Answers 66 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Raphael
Top achievements
Rank 1
Raphael asked on 27 Jan 2021, 02:59 PM

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
        });

4 Answers, 1 is accepted

Sort by
1
Martin
Telerik team
answered on 29 Jan 2021, 10:34 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Raphael
Top achievements
Rank 1
answered on 29 Jan 2021, 05:44 PM
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
1
Accepted
Martin
Telerik team
answered on 02 Feb 2021, 02:11 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Raphael
Top achievements
Rank 1
answered on 02 Feb 2021, 08:59 PM

Hi Martin,

Thank you very much, now it worked.

Tags
DropDownList
Asked by
Raphael
Top achievements
Rank 1
Answers by
Martin
Telerik team
Raphael
Top achievements
Rank 1
Share this question
or