Set Focus to User Control

I have created a user control in ASP.Net that embeds a datagrid so as to extend lots of features, the problem is that I cant set focus to the datagrid within the user control on page load. I've tried with some javascript snippets but this would not work, it would give me a javascript error stating that the control name I have used in my focus script is null or does not exists(even though I have used the id generated by .Net i.e: MyUserControlName_UserControlDatagridName). Anybody has an idea how to work around this.

all help appreciated, thanx

Important note:
Your usercontrol doesn't receive focus, because it doesn't render as an htmlcontrol that uniquely identifies it. It only exists on the server side inside the .Net framework. Once it gets to the client, 'it' is only the composition of the html that makes it useful.

Let's pretend that instead of your control, your using this control:

A control class called 'MyTextBox' which inside it contains:
An asp:textbox
An asp:RequiredFieldValidator

You also slap an ID on the asp:textbox of 'textboxAlpha'
And an ID on the RequiredFieldValidtor of 'rq1'

Now, when you throw your MyTextBox control on a webform, ASP.NET will probably give it an ID of 'MyTextBox1', and unless you rename the ID, it will take that by default.

Now... to access the textbox in this control from Javascript you would use:

Code:

---

document.getElementById('MyTextBox1_textboxAlpha');

---

That's easy enough.

Things get a little different when working with 'databound-controls'.

I know that for repeaters... to get to the contents of a textbox inside the repeater, you have to use 'repeater1_ctrl0_ctrl0'.

The first _ctrl0 part is actually the first listed dataitem, and the second _ctrl0 is the first control in that dataitem.

So for a repeater... if you had two items that were listed, and in the repeater item template you told it to render THREE textboxes with each item that gets listed, your repeater would have these controls:
repeater1_ctrl0_ctrl0
repeater1_ctrl0_ctrl1
repeater1_ctrl0_ctrl2
repeater1_ctrl1_ctrl0
repeater1_ctrl1_ctrl1
repeater1_ctrl1_ctrl2

Anyway, best thing to do is choose View Source after your page has rendered, and look what the DataGrid wrote for you. You'll be looking for an INPUT tag that would have the name of your Datagrid plus _ctrl0 or something like that.

Thanx for the reply but actually I still cant get this to work. As you can see the HTML output of the page is similar to this:

Code:

---



        <div id="UcDtgMain_pnlMain" style="border-width:0px;border-style:Solid;Width:0;Height:226;">               
                <div id="UcDtgMain_pnlHeader" align="Center">                       
                        <span id="UcDtgMain_lblTitre" class="TitleStyle">Title of DataGrid</span>               
                </div>
                <table class="DataGridStyle" cellspacing="0" id="UcDtgMain_DataGrid1">
                        <tr><td>Code</td><td>Description</td></tr>
                        <tr class="ItemStyle">
                                <td align="Right"><span id="UcDtgMain_DataGrid1__ctl2_lblCode"><acronym Title='1'>1</acronym></span></td><td align="Left"><span id="UcDtgMain_DataGrid1__ctl2_lblDescription"><acronym Title='Monsieur'>Monsieur</acronym></span></td></tr>
                        <tr class="AlternatingItemStyle" onclick="javascript:__doPostBack('UcDtgMain:DataGrid1:_ctl3:LinkButton1','')">
                                <td align="Right"><span id="UcDtgMain_DataGrid1__ctl3_lblCode"><acronym Title='2'>2</acronym></span></td><td align="Left"><span id="UcDtgMain_DataGrid1__ctl3_lblDescription"><acronym Title='Madame'>Madame</acronym></span></td>
                        </tr><tr class="ItemStyle" onclick="javascript:__doPostBack('UcDtgMain:DataGrid1:_ctl4:LinkButton1','')">
                                <td align="Right"><span id="UcDtgMain_DataGrid1__ctl4_lblCode"><acronym Title='3'>3</acronym></span></td><td align="Left"><span id="UcDtgMain_DataGrid1__ctl4_lblDescription"><acronym Title='Mademoiselle'>Mademoiselle</acronym></span></td>
                        </tr><tr class="AlternatingItemStyle" onclick="javascript:__doPostBack('UcDtgMain:DataGrid1:_ctl5:LinkButton1','')">
                                <td align="Right"><span id="UcDtgMain_DataGrid1__ctl5_lblCode"><acronym Title='4'>4</acronym></span></td><td align="Left"><span id="UcDtgMain_DataGrid1__ctl5_lblDescription"><acronym Title='Sir'>Sir</acronym></span></td>
                        </tr><tr class="ItemStyle" onclick="javascript:__doPostBack('UcDtgMain:DataGrid1:_ctl6:LinkButton1','')">
                                <td align="Right"><span id="UcDtgMain_DataGrid1__ctl6_lblCode"><acronym Title='5'>5</acronym></span></td><td align="Left"><span id="UcDtgMain_DataGrid1__ctl6_lblDescription"><acronym Title='Miss'>Miss</acronym></span></td>
                        </tr>
                </table>
       
        </div>

---

So basically there are a set on container controls that have been created and even if I use this:

VB Code:

Page.RegisterStartupScript("focus", _
                          "<script language=""JavaScript"">" & vbCrLf & vbTab & _
                          "document.getElementById(""UcDtgMain_DataGrid1__ctl2_lblCodeLIBCIVILITE"").focus();" & vbCrLf & _
                          "<" & "/script>")

it simply does not seem to work, am I missing something over here? I Think that maybe since the controls are finally interpreted as HTML tables then this might be the reason for this.

Well, spans can't receive focus. You have to have at least some control that can (usually ony type="INPUT" ), in your Item and AlternatingItem templates. Additionally, I'm pretty sure TR's cant receive events period, they must be TD's for onclicks... I could be wrong on that last part though.

Anyway, concerning the first part, I've seen people put a checkbox to select, which postsback and changes the TD (TD with a table and then a TR, and then TD's for each control in that datarow) background-color to mark it as selected, or simply throw a linkbutton that does nothing but simply display the Text in the span.

In fact, setting the datagrid's selected index to 1 would make the first row being selected and it would change in color, thus appearing to be selected. But since I use the arrow keys to navigate through the grid, it does not scroll up and down the grid until I perform a first click on the control. So maybe there is another work around for this.
Actually my datagrid user control is quite heavy in terms of functionalities, it even allows navigating through the control through arrow keys, allows paging to be done on Page Up and Page Down keys, column sorting and lots of other useful stuffs.
Anyway, I dont know if others have developed a similar control but it would have been good if they did. Maybe some of us could work on a more enhanced version of the datagrid control!!! Anybody wanna go for it??? :rolleyes:

thanx again.