Solved

DataGrid on the web is a blur

Posted on 2004-09-03
10
509 Views
Last Modified: 2012-06-27
I like this grid, but some of the hoops you must jump through to make it do the slightly more complex and the support documentation, seems spotty at best.

It would be nice if when the datagrid has a row put into edit mode, if the cursor would appear in a column of that row.  Since the datagrid,  behind the scene is using textboxes for each column, do I set focus on the cell or the textbox or are they the same or what?
0
Comment
Question by:Howard Bash
  • 5
  • 3
  • 2
10 Comments
 
LVL 4

Expert Comment

by:Sicos
ID: 11977722
You can make some custom code to set the focus on the textbox you want.

You need to set the focus on the textbox.

Make a javascript client sided that set the focus..

function SetFocus(component)
{
  component.setfocus
}
0
 
LVL 1

Author Comment

by:Howard Bash
ID: 11978484
When and where would you do this?  The app is a mix of C#, ASP.NET, and JavaScript?  The DataGrid1_EditCommand,  the DataGrid1_ItemCommand know about the row being switched to edit mode.
0
 
LVL 1

Author Comment

by:Howard Bash
ID: 11978857
In C# file, I have tried

In the DataGrid1_EditCommand I added the following :

Response.Write ("<script>javascript:SetFocus(" + DataGrid1.Items[m_RowSelected].Cells[2].ClientID + ")</script>");
to get to the second "textbox" of the data grid row being edited, but this fails also.

with the error:

"
Microsoft JScript runtime error: 'DataGrid1__ctl5__ctl11' is undefined
"

Where SetFocus is a javascript func that calls the passed in control's SetFocus method.

I'd love a clue here folks.

thanks.


0
 
LVL 4

Expert Comment

by:Sicos
ID: 11984759
Do it in the onload event of the page..
0
 
LVL 4

Expert Comment

by:Sicos
ID: 11984811
I think the best way is to make a template column for the column you want to edit.
This way you can put in an edit box and give it the name you want. The most likely
reason why your code doesn't work is because only the name of the edit box has been
set and not the ID. With the default column you can add your own id to a textbox.


Greetings,
Sicos
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 1

Author Comment

by:Howard Bash
ID: 12059120
Still the problem is about the focus:

Since you make an ItemTemple and and EditItemTemplate,  to set focus to the cell when the grid is placed in edit mode,  can I set focus to a cell ala e.Item.FindControl("EditID").setfocus or some variation on that using something like

Response.write ("<script>javascript:SetFocus(" + e.Item.FindControl("EditID") + ")</script>")

Where SetFocus is a javascript Function

function SetFocus(kontrol)
{
  kontrol.focus();
}

Lots of roads to Rome it appears.

I appreciate and thoughts on this.

Thanks,
Howard
0
 
LVL 1

Expert Comment

by:CS_Lewis
ID: 12059340
Try this inside the DataGrid1_EditCommand event

string script = "<script language='javascript'> document.getElementById('" + e.Item.FindControl("EditID").ClientID + "').focus(); </script>";

this.RegisterStartupScript("setFocus", script);
0
 
LVL 1

Author Comment

by:Howard Bash
ID: 12072262

I get the following error:

It errors on the line (below) with string declare and assignment about not finding the control and so no object for .ClientID


Here is the template for the cell i want to have focus when we go into edit mode on a row:
<asp:TemplateColumn HeaderText="CreateDate">
      <ItemTemplate>
            <asp:Label runat="server" ID="CreateDateLabelID" Text='<%# DataBinder.Eval(Container, "DataItem.CreateDate") %>'>
            </asp:Label>
      </ItemTemplate>
      <EditItemTemplate>
            <asp:TextBox runat="server" ID="CreateDateTextBoxID" Text='<%# DataBinder.Eval(Container, "DataItem.CreateDate") %>'>
            </asp:TextBox>
      </EditItemTemplate>
</asp:TemplateColumn>

In my DataGrid1_EditCommand my code is :
      string script = "<script language='javascript'> document.getElementById('" + e.Item.FindControl("CreateDateTextBoxID").ClientID + "').focus(); </script>";

      this.RegisterStartupScript("setFocus", script);


0
 
LVL 1

Accepted Solution

by:
CS_Lewis earned 250 total points
ID: 12079459
Okay, I think I see what's going on.  The Date Text Box does not get created until the page is reloaded.

Try putting this code in the ItemDataBound function.

If e.Item.ItemType == ListItemType.EditItem
{
     string script = "<script language='javascript'> document.getElementById('" + e.Item.FindControl("CreateDateTextBoxID").ClientID + "').focus(); </script>";
     this.RegisterStartupScript("setFocus", script);
}

I think at this point the TextBox should exist, and you will be able to get a handle on the ClientID.
0
 
LVL 1

Author Comment

by:Howard Bash
ID: 12081555
I'll try this as soon as I can break in the routine.  For some reason the grid event properties don't show the routines that are for those events and the datagrid seems bound, although i don't see an sql connection, ds, etc, in development mode in the IDE.  I think this is a bug and that some information in the IDE is not being correctly maintained about the project itself.

By the way,  I added the handler back by selecting it in the event properties dropdown for that event.  And it still did not break there.



0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now