jak ustawić fokus wejściowy na wejściach siatki kendo-ui wewnątrz modemu początkowego

Question

Przed przeniesieniem siatki kendo-ui do modemu początkowego kliknąłem Dodaj wiersz i wybrałbym pierwsze z 3 wejść. Następnie przestawiłbym zakładkę na 2, następnie na 3, a następnie zakładkę na przycisk wyboru, gdzie chciałbym nacisnąć enter, a wiersz zostałby dodany. Następnie ostrość powróciłaby do przycisku Dodaj wiersz, gdzie mogłem nacisnąć klawisz Enter, aby rozpocząć proces od nowa. Teraz, gdy znajduje się w modalu, straciłem wszystko, z wyjątkiem tabulacji. Znalazłem rozwiązania, które używają jquery, aby zastosować fokus, ale już mam to w moim kontrolerze sieci.

Kendo-ui kontroler sieci

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

Funkcja otworzyć modalnego

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

Answer 1

na funkcjach API dla NumericTextBox Kendo-UI kontroli pokazuje, że ostrość można uzyskać przez wykonanie następującego pseudokodu:

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

więc zastosowanie tego do kodu to będzie wyglądać mniej więcej tak:

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

Dodatkowo Ponieważ modalne popup jest więcej aplikacji Proponuję przełączającego accessability atrybuty

role="document" do role="application"

Answer 2

Myślę, że fokus został przejęty z samego modala ładowania początkowego, można użyć zdarzenia shown i odpowiednio ustawić ostrość.

Ref:

Bootstrap zapewnia niestandardowych zdarzeń niepowtarzalnych działań większości wtyczek. Zasadniczo są one dostępne w formie bezokolicznika i imiesłowu biernego - , w której bezokolicznik (np. Show) jest uruchamiany na początku zdarzenia, i jego forma imiesłowu (np. Pokazana) jest uruchamiana po zakończeniu operacji akcja.

Począwszy od wersji 3.0.0 wszystkie zdarzenia Bootstrap mają nazwy.

Wszystkie zdarzenia bezokresowe zapewniają funkcjonalność preventDefault. Ta zapewnia możliwość zatrzymania wykonywania akcji przed jej uruchomieniem.

Kod:

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

Answer 3

Spróbuj tego ... w show modalnego okna

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

na UI .... Trzeba mieć identyfikator na wejściu ...

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