javascript - how to set input focus on kendo-ui grid input inside bootstrap modal -
before moving kendo-ui grid inside bootstrap modal click on add row , first of 3 inputs selected. tab 2nd, 3rd , tab checkbox button press enter , row added. focus go add row button press enter start process on again. inside modal lost except tabbing. have found solutions use jquery apply focus have inside grid controller.
kendo-ui grid controller
$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 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 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 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 --> function open modal
$scope.opengrid = function () { $('#mymodal').modal('show'); };
on api functions numerictextbox kendo-ui control shows focus can obtained performing following pseudo-code:
var numerictextbox = $("#numerictextbox").data("kendonumerictextbox"); numerictextbox.focus(); so applying code this:
var price= $("#price").data("kendonumerictextbox"); price.focus(); additionally since modal popup more of application suggest switching accessability attributes from
Comments
Post a Comment