如何將輸入焦點設置爲自舉模式下的kendo-ui網格輸入

Question

在將自己的kendo-ui網格移動到自舉模式中之前，我會點擊添加行，並選擇3個輸入中的第一個。然後，我會選擇第二，然後第三，然後選擇複選框按鈕，我會按下輸入，行將被添加。然後焦點返回到添加行按鈕，我可以按Enter鍵以重新開始處理。那麼現在它是在一個模式中，我失去了一切，除了Tab鍵。我找到了使用jQuery來應用焦點的解決方案，但是我已經在我的網格控制器中使用了它。

劍道的UI網格控制器

$scope.mainGridOptions = { 
     dataSource: dataSource, 
     pageable: false, 
     toolbar: [{ name: "create", text: "Add Product", }], 
     columns: [ 
     { field: "product", title: "Product", width: "95px", editor: productEditor }, 
     { 
      field: "price", title: "Price", width: "95px", format: "{0:c2}", editor: priceEditor 
     }, 
     { 
      field: "sqft", title: "Square Feet", width: "95px", editor: sqftEditor 
     }, 
     { 
      command: [{ name: 'edit', text: { edit: '', update: '', cancel: '' }, width: '20px' }, { name: 'destroy', text: '' }], title: ' ', width: '80px' 
     }], 
     editable: 'inline' 
    }; 

    function productEditor(container, options) { 
     $('<input id="product" name="product" data-bind="value:product" data-productvalidation-msg="Put the Product!" />') 
      .appendTo(container) 
      .kendoMaskedTextBox({}); 
     $("#product").focus(function() { 
      var input = $(this); 
      setTimeout(function() { 
       input.select(); 
      }); 
     }); 
    }; 

    function priceEditor(container, options) { 
     $('<input id="price" name="price" data-bind="value:price" data-step="10000" style="" data-productvalidation-msg="Put the Price!"/>') 
      .appendTo(container) 
      .kendoNumericTextBox({ format: 'c0', min: 0 }); 
     $("#price").focus(function() { 
      var input = $(this); 
      setTimeout(function() { 
       input.select(); 
      }); 
     }); 
    } 

    function sqftEditor(container, options) { 
     $('<input id="sqft" name="sqft" data-bind="value:sqft" data-step="500" style="" data-productvalidation-msg="Put the Sqft!"/>') 
      .appendTo(container) 
      .kendoNumericTextBox({ format: '0', min: 0 }); 
     $("#sqft").focus(function() { 
      var input = $(this); 
      setTimeout(function() { 
       input.select(); 
      }); 
     }); 
    }; 

模態

<!-- Grid Modal --> 
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
         <div class="modal-dialog modal-lg" role="document"> 
          <div class="modal-content"> 
           <div class="modal-header"> 
            <div style="width:100%"><span class="modal-label">My Product Data</span><button style="float:right" class="btn btn-custom waves-effect" data-dismiss="modal"><i class="zmdi zmdi-close"></i></button></div> 
           </div> 
           <div class="modal-body"> 
            <div kendo-grid id="grid" options="mainGridOptions"></div> 
           </div> 
          </div> 
         </div> 
        </div><!--End Grid Modal --> 

函數打開模態

$scope.openGrid = function() { 
    $('#myModal').modal('show'); 
}; 

Answer 1

論NumericTextBox Kendo-UI控制的API函數它表明聚焦可以通過以下方式獲得執行以下僞代碼：

var numerictextbox = $("#numerictextbox").data("kendoNumericTextBox"); 
numerictextbox.focus(); 

所以將其應用到你的代碼，它會是這個樣子：

var price= $("#price").data("kendoNumericTextBox"); 
price.focus(); 

此外，因爲你的模式彈出更多的是一個應用程序，我會建議切換訪問性屬性從

role="document"到role="application"

Answer 2

我認爲重點是從bootstrap模式本身劫持，您可以使用shown事件並相應地設置焦點。

編號：

引導爲大多數的插件的獨特操作的自定義事件。 通常，這些不定式和過去分詞形式 - 其中不定式（例如節目）在事件開始時觸發， 及其過去分詞形式（例如顯示）在 完成時觸發行動。

從3.0.0開始，所有Bootstrap事件都是命名空間。

所有不定式事件都提供preventDefault功能。這個 提供了在其開始之前停止執行動作的能力。

代碼：

$('#myModal').on('shown.bs.modal', function() { 
    //your current focus set 
}); 

Answer 3

嘗試......在演出模式窗口

this.$workModal.on('show.bs.modal', (e) => { 
    $('#workId_input').data('kendoNumericTextBox').focus(); 
}); 

在UI ....你必須輸入ID ...

<input id='workId_input', data-bind="kendoNumericTextBox ......">