Solved

DataGrid on the web is a blur

Posted on 2004-09-03
10
508 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:hbash
  • 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:hbash
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:hbash
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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 1

Author Comment

by:hbash
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:hbash
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:hbash
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Author Note: Since this E-E article was originally written, years ago, formal testing has come into common use in the world of PHP.  PHPUnit (http://en.wikipedia.org/wiki/PHPUnit) and similar technologies have enjoyed wide adoption, making it possib…
Read about why website design really matters in today's demanding market.
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

743 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

11 Experts available now in Live!

Get 1:1 Help Now