बूटस्ट्रैप मोडल

Question

के अंदर केंडो-यूई ग्रिड इनपुट पर इनपुट फोकस कैसे सेट करें बूटस्ट्रैप मोडल के अंदर अपना केंडो-यूई ग्रिड ले जाने से पहले मैं एड पंक्ति पर क्लिक करूंगा और 3 इनपुट में से पहला चयन किया जाएगा। मैं फिर टैब को दूसरे, फिर तीसरे और फिर टैब को चेकबॉक्स बटन पर रखूंगा जहां मैं एंटर दबाता हूं और पंक्ति जोड़ दी जाएगी। फिर फोकस ऐड पंक्ति बटन पर वापस जायेगा जहां मैं फिर से प्रक्रिया शुरू करने के लिए एंटर दबा सकता हूं। ठीक है अब यह एक मोडल के अंदर है, मैंने टैबबिंग को छोड़कर सब कुछ खो दिया है। मुझे ऐसे समाधान मिल गए हैं जो फोकस लागू करने के लिए 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 नियंत्रण के लिए एपीआई कार्यों पर यह पता चलता है कि ध्यान देने के द्वारा प्राप्त किया जा सकता निम्नलिखित छद्म कोड का प्रदर्शन:

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

तो अपने कोड को यह लागू करने के यह कुछ इस तरह दिखेगा:

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

इसके अतिरिक्त के बाद से अपने मोडल पॉपअप एक आवेदन मैं स्विचन पहुंच-योग्यता से

role="document" को जिम्मेदार बताते हैं सुझाव है कि अधिक है role="application"

Answer 2

मुझे लगता है कि बूटस्ट्रैप मोडल से फोकस को अपहरण कर लिया गया है, तो आप shown ईवेंट का उपयोग कर सकते हैं और तदनुसार फोकस सेट कर सकते हैं।

रेफरी:

बूटस्ट्रैप सबसे प्लग इन 'अनन्य कार्य के लिए कस्टम घटनाओं प्रदान करता है। आम तौर पर, ये एक infinitive और पिछले प्रतिभागी रूप में आते हैं - जहां infinitive (ex। Show) किसी ईवेंट की शुरुआत में ट्रिगर किया जाता है, और इसके पिछले प्रतिभागी फॉर्म (उदा। दिखाया गया) पर पूरा हो गया है कार्रवाई।

3.0.0 के रूप में, सभी बूटस्ट्रैप ईवेंट नामित हैं।

सभी infinitive घटनाओं 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(); 
}); 

यूआई पर

.... आप इनपुट पर आईडी की आवश्यकता है ...

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