làm thế nào để thiết lập đầu vào tập trung vào đầu vào lưới kendo-ui bên trong bootstrap phương thức

Question

Trước khi di chuyển lưới kendo-ui của tôi bên trong một phương thức bootstrap tôi sẽ nhấp vào Add Row và đầu tiên của 3 đầu vào sẽ được chọn. Sau đó tôi sẽ chuyển sang tab thứ 2, sau đó là 3 và sau đó đến nút hộp kiểm nơi tôi sẽ nhấn enter và hàng sẽ được thêm vào. Sau đó, tiêu điểm sẽ quay trở lại nút Thêm hàng vào nơi tôi có thể nhấn enter để bắt đầu lại quá trình. Vâng, bây giờ nó là bên trong một phương thức tôi mất tất cả mọi thứ ngoại trừ tabbing. Tôi đã tìm thấy các giải pháp sử dụng jquery để áp dụng tiêu điểm nhưng tôi đã có điều đó bên trong bộ điều khiển lưới của tôi.

Kendo-ui điều khiển lưới

$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(); 
      }); 
     }); 
    }; 

Modal

<!-- 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 --> 

Chức năng để mở modal

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

Answer 1

Trên Chức năng API cho NumericTextBox Kendo-UI kiểm soát nó cho thấy tập trung mà có thể thu được bằng cách thực hiện mã giả sau:

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

Vì vậy, việc áp dụng này để mã của bạn nó sẽ giống như thế này:

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

Ngoài ra kể từ sổ popup modal của bạn là chi tiết của một ứng dụng Tôi sẽ đề nghị chuyển đổi các hỗ trợ truy cập các thuộc tính từ

role="document" để role="application"

Answer 2

Tôi nghĩ trọng tâm bị tấn công từ phương thức bootstrap, bạn có thể sử dụng sự kiện shown và đặt tiêu điểm cho phù hợp.

Ref:

Bootstrap cung cấp các sự kiện tùy chỉnh cho hành động độc đáo nhất plugins'. Nói chung, chúng xuất hiện dưới dạng phân từ quá khứ và vô hạn - trong đó thông tin vô hạn (ví dụ) được kích hoạt khi bắt đầu sự kiện, và dạng phân từ quá khứ (ví dụ) được kích hoạt khi hoàn thành hoạt động.

Kể từ 3.0.0, tất cả các sự kiện Bootstrap đều được đặt tên không gian.

Tất cả các sự kiện vô hạn đều cung cấp chức năng PreventDefault. Điều này cung cấp khả năng để ngăn chặn việc thực hiện một hành động trước khi nó bắt đầu.

Code:

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

Answer 3

Hãy thử điều này ... trong cửa sổ modal chương

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

trên UI .... Bạn cần có ID trên đầu vào ...

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