?
Solved

DataGrid on the web is a blur

Posted on 2004-09-03
10
Medium Priority
?
516 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Tutorial: Introduction to Managing a Linux Server

In this tutorial on systemd, we will explore:
-OS/Distro Adoption
-chkconfig and Other Legacy Commands
-Summary and Key Commands

 
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
 
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 1000 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

Python: Series & Data Frames With Pandas

Learn the basics of Python’s pandas library of series & data frames and how we can use these tools for data manipulation.

Question has a verified solution.

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

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Suggested Courses

764 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