剣道グリッドEdit BootstrapクラスとEditorTemplateでテキストボックスオートフォーカスが動作しない

Question

私はasp.net MVC用の剣道グリッドを使用しています。私は

1に直面しています

2つの問題 - ユーザーのためのビューを作成して表示している間は、私が最初のテキストボックスにオートフォーカス属性を設定しています。剣道を使わないと、オートフォーカスがうまく働き、ドームに注射されます。しかし、kendoとeditortemplateを使用すると、オートフォーカス属性が挿入されていないことがあります。

2 - また、剣道のAjax編集で、リンク編集ボタンをクリックすると、テキストボックスにブートストラップスタイルが表示されません。続き

はコード

INDEXビューでKENDO GRID

@(Html.Kendo().Grid(Model) 
.Name("Grid") 
.Columns(columns => 
{ 
    columns.Bound(u => u.USERNAME); 
    columns.Bound(u => u.PASSWORD); 
    columns.Bound(u => u.ROLE); 
    columns.Bound(u => u.STATUS); 
    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250); 
} 
) 
.Pageable() 
.DataSource(datasource => datasource 
    .Ajax() 
    .Model(model => model.Id(u => u.ID)) 
    .Update(update => update.Action("Edit", "Users")) 
    .Destroy(destroy => destroy.Action("Delete", "Users")) 
) 

）

ある私は

<div class="form-group"> 
     @Html.LabelFor(model => model.USERNAME, htmlAttributes: new { @class = "control-label col-md-2" }) 
     <div class="col-md-10"> 
      @Html.TextBoxFor(model => model.USERNAME, new { @autofocus = "autofocus", @class = "form-control" }) 
      @Html.ValidationMessageFor(model => model.USERNAME, "", new { @class = "text-danger" }) 
     </div> 
    </div> 

を直面していますWHERE第一PROBLEMユーザに対するVIEW USERNAMEスニペットをCREATE

私はautofocusを作成ビューに入れましたが、剣道使用時にはページの読み込みに焦点を当てることができません。 KendoとEditorTemplateを削除すると、オートフォーカスがうまく動作します。

私はコードといくつかの詳細を追加しました。私が直面している基本的に2つの問題、私が剣道を使用する場合、私はCreate.cshtmlのUSERNAMEテキストボックスのオートフォーカスを取得できません。 2番目の剣道グリッド編集では、フォルダにEditorTemplateを適用しない限り、編集モードでテキストボックスに適用されるブートストラップクラスを見ることができません。 editortemplateを適用すると、create.cshtmlでオートフォーカスが働きません。

Answer 1

最初の問題として、オートフォーカスの属性は、がロードされたときにフォーカスがある入力を識別します。しかし、ユーザーが行の編集ボタンをクリックすると、剣道グリッドエディタのポップアップがページに動的に追加されます。したがって、グリッド編集イベントでjavascriptコードを使用して手動でフォーカスを設定する必要があります。だから、あなたのグリッド設定中：

.Events(events => events.Edit("gridEdit")) 

そして、これは私は通常私のgridEditイベントハンドラに入れたコードです：

function gridEdit(e) { 
    // get the handle of the edit window 
    var wnd = e.container.data("kendoWindow"); 
    // set focus to the first input 
    wnd.bind('activate', function() { 
     e.container.find(':input:visible:enabled:first').focus(); 
    }); 
} 

私たちは、とき、編集ウィンドウの活性化にフォーカスを設定する必要があります内側の要素は準備が整いました。私のコードでは、最初に表示されている可視入力要素にフォーカスが設定されていますが、ロジックが異なる場合があります。

あなたの2番目の質問は私には分かりませんが、新しい質問をする必要があります。問題のスナップショットイメージのような詳細を含めてください。