вкладка не работает в редактировании ячеек Kendo UI Grid

Question

Я использую Kendo UI Grid. И я хочу сделать редактирование InCell на нем. Редактирование InCell работает хорошо. И как только я нажимаю кнопку «Добавить новую запись», тогда он показывает текстовое поле для первого столбца «Имя».

Моя проблема в том, когда я нажимаю вкладку после ввода значения в поле «Имя», а затем не переходит во второе поле «Описание». И порядок вкладок должен работать там.

Ниже приведен фрагмент кода для кэндо сетки: -

@using Gts.GlaspacLX.Web.App_Start; 
@using Gts.GlaspacLX.ListValues; 
@using System.Collections; 
@using Kendo.Mvc.UI 

@ @

.к-грязный {дисплей: нет; }

<fieldset> 
    <form>   
     <div id="divProduct" style="display: none;"> 


@(Html.Kendo().Grid<Gts.GlaspacLX.Web.ViewModel.ProductViewModel>() 
    .Name("ProductGrid") 
    .Columns(columns => { 
     columns.Bound(p => p.Name).Width(50); 
     columns.Bound(p => p.Description).Width(200);              
     columns.Command(command => { command.Destroy(); }).Width(75); 
     columns.Bound(p => p.ID).Hidden(); 
    }) 
    .ToolBar(commands => { 
     commands.Create(); 
     commands.Save(); 
    }) 
    .Editable(editable => editable.Mode(GridEditMode.InCell)) 
    .DataSource(dataSource => dataSource 
     .Ajax() 
     .Batch(true) 
     .ServerOperation(false) 
     .Model(model => { 
      model.Id(p => p.ID); 
     })           
     .Read(read => read.Action("ProductEditingInline_Read", "Product")) 
     .Create(create => create.Action("ProductEditingInline_Create", "Product")) 
     .Update(update => update.Action("ProductEditingInline_Update", "Product")) 
     .Destroy(destroy => destroy.Action("ProductEditingInline_Destroy", "Product") 
     ) 
     .Events(events => events.Change("onProductChange")) 
     // .Events(events => events.Error("error_handler")) 
    ) 
) 


      <input type="button" value="Cancel" onclick=" $('.k-button.k-button-icontext.k-grid-cancel-changes').click(); $('#productWindow').data('kendoWindow').close(); " /> 
      <input type="button" value="Save" onclick=" SaveProductChanges(); " /> 
     </div> 
    </form> 
</fieldset> 
} 

Может кто-нибудь помочь мне в этом?

Answer 1

Вы хотите использовать сетку navigatable option. Ниже приведен пример jsfiddle, который я построил: Kendo Grid Example with keyboard navigation. В MVC navigatable опция включена, вызвав .Navigatable() на сетке (смотри пример ниже):

@(Html.Kendo().Grid<TestModel>() 
.Name("TestGrid") 
.Columns(columns => 
{ 
    columns.Bind(c => c.DisabledString); 
    columns.Bind(c => c.Description); 
    columns.Bind(c => c.TestInvisibleDate); 
    columns.Bind(c => c.TestDate); 
    columns.Bind(c => c.AllExpressions); 
}) 
.HtmlAttributes(new { style = "height:550px;" }) 
.Editable(editable => editable.Mode(GridEditMode.InCell)) 
.Sortable() 
.Scrollable(s => { s.Enabled(true); s.Virtual(true); }) 
.Pageable(p => p.Enabled(false)) 
.Mobile(MobileMode.Disabled) 
.Navigatable() 
.Resizable(s => s.Columns(true)) 
.Reorderable(c => c.Columns(true)) 
.DataSource(dataSource => dataSource 
    .Ajax() 
    .Batch(true) 
    .PageSize(50) 
    .ServerOperation(false) 
    .Model(model => 
    { 
     model.Id(e => e.UniqueId); 
    }) 
    ) 
) 

Эта помощь?