Can't modify tab index for kendo dropdown inside kendo grid

Question

I am using Asp.Net Mvc's Editor Template to bind the kendo DropdownList inside kendo grid

The Navigatable property(.Navaigatable(o=>o.Enabled(true))) of the grid is set to true but I am unable to get the focus on the dropdownlist when I press tab i.e, the focus is lost for that particular cell.

I would like a behavior where I can get the focus on the dropdownlist and can change its value with the Up and Down Arrow Keys.

Thank You. I really appreciate the help! :)

Answer 1

In Editor Template do code like below:

    @(Html.Kendo().DropDownListFor(m => m)
                      .AutoBind(false)
                          .DataTextField("Text")
                          .DataValueField("Value")
                          .OptionLabel("SelectType")
                          .HtmlAttributes(new { @id = "SecondDropDownName"})
                          .DataSource(dataSource =>
                           {
                            dataSource.Read(read => read.Action("actionName", "ControllerName")              .Data("filterFunctionFordataPassing"))
                            .ServerFiltering(true);


                      })
                        .CascadeFrom("FirstDropDownName")
                        .Enable(false)
                )

And in Main Page where Kendo grid is bound make one Function for passing the first dropdown value :

        function filterFunctionFordataPassing() {
                return {
                    ddlValue: $("#FirstDropDownName").data("kendoDropDownList").value()
                };
            }

Now do second drop down binding code: this function should called from Change event of First drop down :

        function SeconDropdownFunction(e) {      
                   $.ajax({
                       type: 'POST',
                       url: '@Url.Action("SecondDropdownActionName", "ControllerName")',
                       cache: false,               
                        success: function (result) {
                            if (JSON.stringify(result) != "[]") {
                                var ddl = $('#SecondDropDownName').data("kendoDropDownList");
                                ddl.setDataSource(result);
                                ddl.refresh();                         
                            }        
                        }
                    });     

                }