1. Home
  2. Forum
  3. ASP.NET Core
  4. Focus always on first control

Focus always on first control

Hi,

I have a dialog with the ajax content type (getting the partialview)

This is the beginning of the partial cshtml:

<div class="container-fluid">
        <div class="row">
            <div class="col">
                <label for="InvoiceType">Type</label>
                <input type="text" id="InvoiceType" />
            </div>
            <div class="col">
                <label for="InvoiceNumber">Invoice Number</label>
                <input id="InvoiceNumber" type="text" />
            </div>
            <div class="col">
                <label for="YearID">Year</label>
                <input type="text" id="YearID" />
            </div>
      <div class="col">
                <label for="ContractNumber">Contract Number</label>
                <input id="ContractNumber" type="text" />
            </div>
etc...
<script>
 $("#ContractNumber").ejNumericTextbox({
            showRoundedCorner: true,
            groupSeparator: "",
            width: '90',
            showSpinButton: false
        });

etc...
</script>



I'm calling the dialog this way:
 function openDialog() {
         $("#CustomInvoiceAddEdit").ejDialog("open");
         $("#InvoiceType").ejDropDownList("selectItemByValue", 1);      
         $("#ContractNumber").ejNumericTextbox("instance")._hiddenInput.focus();        
     }

When the dialog opens the ContractNumber control gets the focus but immediately loses it and the first control (whatever it may be) gets the focus.
In my case InvoiceType. 
I tried moving the controls and concluded that the first control always gets the focus regardless of me manually setting it (._hiddenInput.focus();)

How to override focus from first control to any another?

9 Replies
BS Buvana Sathasivam Syncfusion Team December 13, 2017 11:14 AM UTC

Hi Pratura,   
  
Thanks for using Syncfusion Products.   
  
We have analyzed your reported query.  As per the standard behavior of Dialog, the first form element in the Dialog will be always focused.  This is the default behavior of our dialog and this support is given for the keyboard accessibility and fast access.  We suspect your focusing code is set before dialog source focus changes done. So, it is not working. To resolve this, you can focus the specific element in dialog open event.   
  
We have rendered dialog control with partial view page and focused on particular numeric text box(ContractNumber).  You can specify focus element on inside the document function.  Please find the below code.   
  
DialogFeatures.cshtml   
  
<ej-dialog id="basicDialog" title="Audi-Q3 Drive" content-type="ajax" content-url="@Url.Content("~/Dialog/AjaxContent").ToString()" open="onopen">  // Dialog open event   
</ej-dialog>   
  
We can set focus element for numeric text box, previous element(input element).   
  
DialogFeatures.cshtml   
   
<script>   
     function onopen(e) {  // Triggered when dialog was opened   
             $("#InvoiceType").ejDropDownList("selectItemByValue", 1);    
             $(document).ready(function () {       
                $("#ContractNumber").prev().focus(); // Focused particular text box   
             });   
     }       
</script>   
    
                                                                         
Note: In your code, you can use object for numeric text box and set focused on hidden Input. This is one of the way to  use focusing element.  Either you can follow above table or else below table.    
  
<script>   
     function onopen(e) {  // Triggered when dialog was opened   
                
             $(document).ready(function () {       
               $("#ContractNumber").ejNumericTextbox("instance")._hiddenInput.focus();// Focused particular text box   
             });   
     }       
</script>   



  
AjaxContent.cshtml   
  
   
<form id="myform">   
    <div id="content">   
        <div>   
            <div class="container-fluid">   
                <div class="row">    
                   …………   
                    <div class="col">   
                        <label for="ContractNumber">Contract Number</label>   
                        <input id="ContractNumber" type="text" />   
                    </div>   
                </div>   
            </div>   
            </div>   
        </div>   
</form>   
<script>   
$("#ContractNumber").ejNumericTextbox({   
            showRoundedCorner: true,   
            groupSeparator: "",   
            width: '90',   
            showSpinButton: false   
});   
$("#InvoiceType").ejDropDownList({});   
$("#YearID").ejNumericTextbox({…});   
</script>   


  
In your code, you can use openDialog() method.  Please let us know, which action openDialog() method is triggered.    
  
   
To know more about the ejDialog component members.  Please refer the below reference.              
   
Regards,   
Buvana S.         
 


PR Pratura December 15, 2017 11:10 AM UTC

Hi Buvana,

thank you for the reply.
The OnOpen event solved the problem so I've rewrote it this way.

Another way that it worked without the Onopen event is to set the enable-animation="false".

Thanks for the help.


BS Buvana Sathasivam Syncfusion Team December 18, 2017 06:43 AM UTC

Hi Pratura,   
  
Thanks for your reply.   
  
Yes.  First input element of Dialog content gets focused based on animation time duration.  If you don’t need to set animation when dialog is open, you can set enableAnimation as false to achieve your requirement instead of using Open event in dialog control.    
  
Let us know if any other queries.   
  
Regards,   
Buvana S.   
 


PR Pratura December 19, 2017 01:04 PM UTC

Hi Buvana

Thanks for your reply.  

I have the following situation now with the dialog.

Since I have several dropdown controls in the dialog with datamanager populating its datasource all of the APIs that populate them (by quering the database) are being executed when the main page (that hold the dialog) is being loaded.
Even though the dialog showOnInit is false and I'm using ajax content, all the datamanagers for controls are firing before the dialog is even opened first.

Is this normal behavior?
I was thinking that point of ajax method on dialog was to call it dynamically when needed.
But this way I have loads of server requests for each datamanager even if the user on that page doesn't need to open the dialog which is not uncommon scenario.



BS Buvana Sathasivam Syncfusion Team December 20, 2017 09:22 AM UTC

Hi Pratura,   
  
Thanks for your update.   
  
Query #1: “Is this normal behavior?”   
  
Yes.  “At initial dialog rendering, all controls inside the dialog content is rendered using ajax post” is the normal behavior of our dialog control.  The showOnInit property is used to hide the dialog control, after the dialog control is rendered.      
  
Query #2: “I was thinking that point of ajax method on dialog was to call it dynamically when needed.”   
  
If you wish to send dialog ajax post request when dialog is open, you can specify the ajax post on before the dialog control is open.  We have externally created one button and dialog control is rendered with showOnOnit property set as false.  Now, dialog content ajax post is not specified in the initial rendering of dialog control.  If you click external button, dialog ajax contentUrl is defined before open the dialog form.  Please find the below code.   
  
DialogFeatures.cshtml   
  
<ej-button click="onclick" /> // Button with click event   
   
<ej-dialog id="basicDialog" content-type="ajax" show-on-init="false" enable-animation="false">  // Dialog control without contentUrl   
</ej-dialog>      
   
   
<script>   
     function onclick(args) {  // Triggered when button is clicked   
         dialogObj = $("#basicDialog").ejDialog("instance") // Dialog object   
         dialogObj.option("contentUrl", '/Dialog/AjaxContent'); // Set contentUrl into dialog    
         dialogObj.open(); // Dialog open   
         $("#ContractNumber").prev().focus(); // Focused on particular element   
     }   
</script>   
  
  
  
    
Regards,   
Buvana S.   
 


PR Pratura December 20, 2017 10:28 AM UTC

Thanks Buvana, that works.

But I still have problem getting the focus on the control.
And setting the value for the dropdown control, after the dialog is opened.

Your sample works probably because you have an in-memory data and only one datamanager.

I have more, so in my case even with the OnOpen event, the focus and the dropdown value are set when i open the dialog for the second time.
Because it's then already rendered and the dropdowns are populated.

The first time it doesen't.
Do you have any solution for that, please?


BS Buvana Sathasivam Syncfusion Team December 21, 2017 09:32 AM UTC

Hi Pratura,   
  
Thanks for your update.   
  
We have analyzed your reported query.  We were able to reproduce your reported issue.  We suspect that the cause of the issue is, particular element gets focused before the ajax post request send at first time.  In this ajax post request, we are rendering control by getting post data and it causes the delay.  We have set focused on particular element after ajax request send at initial rendering of dialog content using ajax-success event.  Because, after ajax post only dialog content is rendered and also set focused on particular element after opening the dialog (This is consider after loaded ajax content into dialog).  Please find the below code.   
  
DialogFeature.cshtml   
  
<ej-button id="mute" click="onclick" />   
          
<ej-dialog id="basicDialog" content-type="ajax" show-on-init="false" ajax-success="success" enable-animation="false"> // Dialog ajax success event   
        </ej-dialog>   
   
   
<script>   
   function onclick(args) {  // Triggered when external button clicked   
         dialogObj = $("#basicDialog").ejDialog("instance")    
         dialogObj.option("contentUrl", '/Dialog/AjaxContent');   
         dialogObj.open();   
         $("#mute").hide();   
         $("#ContractNumber").prev().focus();  // Set focused whenever open dialog(this is not included on first time)   
     }   
     function success(args) {   
         $("#ContractNumber").prev().focus(); // Set focused on particular element after ajax post succeeded   
     }   
</script>   
                
   
   
  
  
Regards,   
Buvana S.   
   
 


PR Pratura December 21, 2017 03:18 PM UTC

Thanks Buvana.

The focus now works on ajax success, but not the dropdown value setting.
At least not the first time.

<code>
<script>   
   function onclick(args) { 
         dialogObj = $("#basicDialog").ejDialog("instance")    
         dialogObj.option("contentUrl", '/Dialog/AjaxContent');   
         dialogObj.open();   
         $("#TypeID").ejDropDownList({ value: 1 });
         $("#ContractNumber").prev().focus();    
     }   
     function success(args) {   
         $("#ContractNumber").prev().focus(); 
         $("#TypeID").ejDropDownList({ value: 1 });
     }   
</script> 
</code>

BS Buvana Sathasivam Syncfusion Team December 22, 2017 12:22 PM UTC

Hi Pratura,   
  
Thanks for your update.   
  
We suspect that the cause of the issue is, dropdown data was not loaded when dialog ajaxSuccess event triggered.  This ajaxSuccess event fires when dialog ajax post is succeeded.  It is delayed because control is rendered from data obtained in dialog’s ajaxSuccess event.  So, we suggest you to set dropdown value into partial view page when rendering drop down list.  Please find the below code.   
  
AjaxContent.cshtml   
  
<div class="col">   
     <label for="InvoiceType">Type</label>  // Drop down list   
     <input type="text" id="InvoiceType" />   
</div>   
   
<script>   
    var dataManager = ej.DataManager({   
        url: "/Dialog/GetCities",   
        adaptor: new ej.WebApiAdaptor()   
    });   
   
 $("#InvoiceType").ejDropDownList({   // Rendering dropdown list   
     dataSource: dataManager,      
     value: "a",    // Set value to drop down list           
     fields: { text: "CityName", value: "id" },   
     watermarkText: "Select City",   
});   
</script>   
   
  
  


  
Regards,   
Buvana S.   
 


Loader.
Up arrow icon