4

私はMVC3.0アプリケーションで作業しています。私のプロジェクトでは、データリストにTelerkmvcグリッドを使用しました。グリッド編集モデルを「InCell」として作成し、質問回答領域にキーボードナビゲーションを提供しました。各質問には、「ファクト」や「アクション」などの2つの回答オプションがあり、数値になります。この目的のために「整数」エディターテンプレートを使用しました。私の要件は、ユーザーが「ファクト」整数教科書からタブキーを押すと、フォーカスが「アクション」整数テキストボックスに移動し、ユーザーが「アクション」からタブを押すと、次の行の「ファクト」テキストボックスに移動することです。ただし、現在、キーボードナビゲーションはグリッド内のすべてのセルを通過します。「ファクト」と「アクション」の間にいくつかの列があります。グリッドリストの私のコードは次のようになります。

@(Html.Telerik().Grid<AnswerQuestionVM>()
    .Name("GridQuestions")
    .DataKeys(keys =>
    {
        keys.Add(p => p.QuestionID);
    })
    .Columns(columns =>
    {

        columns.Bound(p => p.QuestionNumber).Format("{0:0.00}").HtmlAttributes(new { style = "text-align:center;" }).Title("#").Width("5%").ReadOnly();

        columns.Bound(p => p.QuestionName).Title("Question Name").Width("43%").ReadOnly();

        columns.Bound(p => p.Facts).Width("8%");

        columns.Template(@<text></text>).ClientTemplate("<img src='" + @Url.Content("~/images/help.gif") + "' name='help' alt='help' title='<#=FactOptions#>' />");

        columns.Bound(p => p.Actions).Width("8%");

        columns.Template(@<text></text>).Width("2%").ClientTemplate("<img src='" + @Url.Content("~/images/help.gif") + "' name='help' alt='help' title='<#=ActionOptions#>' />");

        columns.Template(@<text></text>).Title("Skip").Width("3%").ClientTemplate(
        "<# if(Skip==false) {#>" +
        "<input type='checkbox' style='cursor:pointer;' class='skipClass' />" +
                 "<#} else{#>" +
        "<input type='checkbox' style='cursor:pointer;' class='skipClass' checked='checked' />" +
        "<# } #>"
        );

        columns.Bound(p => p.Note).Title("Note").Width("26%");

    })
         .Editable(editing => editing.Mode(Telerik.Web.Mvc.UI.GridEditMode.InCell))
         .KeyboardNavigation( navigation => navigation.EditOnTab(true))
         .ClientEvents(e => e.OnSave("OnSave"))
         .DataBinding(dataBinding =>
         {
            dataBinding.Ajax().Select("GetQuestion", "AnswerQuestion", new { Area = "question",  ajax = true }).Enabled(true);
         })
                                                                                              .Scrollable(scrolling => scrolling.Enabled(false))
                                                                                             .Sortable(sorting => sorting.Enabled(true))
                                                                                             .Pageable(paging => paging.Enabled(true))
                                                                                             .Filterable(filtering => filtering.Enabled(true))
                                                                                             .Groupable(grouping => grouping.Enabled(false))
                                                                                             .Footer(true)
                                                                 )

以下の「ファクト」列と「アクション」列の整数エディターテンプレートのコード。

@(Html.Telerik().IntegerTextBox()
    .Name(ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))
            .InputHtmlAttributes(new { style = "width:100%", pattern = "[0-9]*" })
    .MinValue(1)
    .MaxValue(5)
    .Value(Model)

）。

解決策を提供してください。どんな助けでも大歓迎です。

4

2 に答える 2

2

あなたの目標はそのままではサポートされていないため、回避策として提案できるのは次のとおりです。

自由に実装を最適化/変更するか、より一般的なものにしてください (たとえば、クラスを使用してセルを検索し、インデックスに依存しないようにします)。

 $(function () {
    $('#persons tbody').on('keydown', function (e) {
        if (e.keyCode == 9) {
            var currentCell = $(e.target).closest('td');
            var cellIndex = currentCell.index();
            if (cellIndex == 2 || cellIndex == 4) { //if editing cell in third or fifth column, use different indexes if needed
                e.stopPropagation();
                e.preventDefault();
                var grid = $('#persons').data().kendoGrid;

                if (cellIndex == 2) {
                    var cellToEdit = currentCell.parent().find('td:eq(4)');
                    grid._handleEditing(currentCell, cellToEdit);  
                }
                if (cellIndex == 4) {
                    var cellToEdit = currentCell.parent().find('td:eq(2)');
                    grid._handleEditing(currentCell, cellToEdit);   
                }
                setTimeout(function () {
                    cellToEdit.find('input').focus();
                })
            }
        }
    })
})
于 2012-12-03T21:18:12.323 に答える
0

これを行う方法がよくわかりませんが、おそらく htmlAttributes 内で使用して、tabindex のようなものを使用してみましたか? とにかく、私はこのようなことをしたことがありませんが、その分野で何かを試すことができるかもしれません:

columns.Bound(p => p.Facts).Width("8%").HtmlAttributes(new { tabindex = 1 });
columns.Bound(p => p.Actions).Title("Practice").Width("8%").HtmlAttributes(new { tabindex = 2 });

Telerik Grid を使用しているため、これを各アイテム内で何らかの方法で混合する必要がある場合があります。繰り返しになりますが、私はあなたの主張を誤解しているかもしれません (私はそうすることが知られています) :)

于 2012-12-03T17:20:28.767 に答える