Welcome Guest Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » TextboxColumn can not get focused after press enter to start edit

TextboxColumn can not get focused after press enter to start edit Options
Previous Topic · Next Topic
Texwinca Developer
Posted: Thursday, April 16, 2009 4:33:43 AM
Rank: Advanced Member
Groups: Member

Joined: 3/31/2009
Posts: 52
I have a grid with Custom Column. As I know, when I pressed "Enter" button, a textbox column is focused and ready for user to edit value. But after I place a custom column, which contains a dropdownbox, it didn't focus on textboxcolumn. Actually, I want it focus on my dropdownbox. Any idea?
Back to top
 
eo_support
Posted: Thursday, April 16, 2009 7:51:34 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

When you use a CustomColumn, the Grid does not do anything special except for calling your ClientSideBeginEdit handler when it enters edit mode. So whatever you wish to do, such as setting focus to a specific control, should be done in your ClientSideBeginEdit handler. You can find more information about how to use CustomColumn here:

http://doc.essentialobjects.com/library/1/grid/custom_column.aspx

Thanks
Back to top
 
Texwinca Developer
Posted: Monday, April 20, 2009 9:27:21 PM
Rank: Advanced Member
Groups: Member

Joined: 3/31/2009
Posts: 52
For this example, it has an object called "dropDownBox". I tried to focus on it when event "ClientSideBeginEdit " is fired.

http://doc.essentialobjects.com/library/1/grid/custom_column.aspx

However, it return an error when I called "dropDownBox.focus();". It said I can't focus on it when it is invisible.
Back to top
 
Texwinca Developer
Posted: Monday, April 20, 2009 9:45:44 PM
Rank: Advanced Member
Groups: Member

Joined: 3/31/2009
Posts: 52
I found the solution about how to focus on the drop down box. Please see the following.

dropDownBox.selectedIndex = i;
window.setTimeout(
function()
{
dropDownBox.focus();
}, 50);

However, I don't know how to focus on TextboxColumn. Any idea?
Back to top
 
eo_support
Posted: Monday, April 20, 2009 10:00:14 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

Great work! setTimeout is indeed the right solution.

As to TextBoxColumn focusing, I thought it is automatic and you do not need to do anything. Take a look of this sample:

http://demo.essentialobjects.com/Default.aspx?path=Grid\_i1\_i20

If you press select a cell (you can move cursor to select cell) and then press enter, the textbox should be automatically focused.

Thanks!
Back to top
 
Texwinca Developer
Posted: Wednesday, April 22, 2009 8:59:38 PM
Rank: Advanced Member
Groups: Member

Joined: 3/31/2009
Posts: 52
Yes. If the grid didn't include any custom column, then the textbox is automatically focused. However, if it has custom column,which is placed at the first column, then the textbox column cannot be focused automatically.
Back to top
 
eo_support
Posted: Thursday, April 23, 2009 8:54:59 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Texwinca Developer wrote:
Yes. If the grid didn't include any custom column, then the textbox is automatically focused. However, if it has custom column,which is placed at the first column, then the textbox column cannot be focused automatically.


That is false. Please check your custom column code. We have verified the feature by making the following modification to this sample:

http://demo.essentialobjects.com/Default.aspx?path=Grid\_i1\grid_custom_column

1. Add a TextBoxColumn;
2. Set FullRowMode to False;
3. Set EnableKeyboardNavigation to True;

Run the sample and you will see the TextBoxColumn receives focus fine.

Thanks!
Back to top
 
Texwinca Developer
Posted: Thursday, April 23, 2009 11:18:51 PM
Rank: Advanced Member
Groups: Member

Joined: 3/31/2009
Posts: 52
Sorry, I forgot to tell you my grid properties settings at the begining of our conversation.
Here it is.
1. Set FullRowMode = True
2. Set EnableKeyboardNavigation = True;

The following is the markup of my Grid

<eo:Grid ID="Grid1" runat="server" BorderColor="#828790" BorderWidth="1px" ColumnHeaderAscImage="00050204"
ColumnHeaderDescImage="00050205" ColumnHeaderDividerImage="00050203" ColumnHeaderHeight="24" Font-Bold="False" Font-Italic="False" Font-Names="Tahoma"
Font-Overline="False" Font-Size="8.75pt" Font-Strikeout="False" Font-Underline="False"
GridLineColor="240, 240, 240" GridLines="Both" Height="328px" ItemHeight="19" Width="750px">
<FooterStyle CssText="padding-bottom:4px;padding-left:4px;padding-right:4px;padding-top:4px;" />
<ItemStyles>
<eo:GridItemStyleSet>
<ItemStyle CssText="background-color: white" />
<ItemHoverStyle CssText="background-image: url(00050206); background-repeat: repeat-x" />
<SelectedStyle CssText="background-image: url(00050207); background-repeat: repeat-x" />
<CellStyle CssText="padding-left:8px;padding-top:2px;white-space:nowrap;" />
</eo:GridItemStyleSet>
</ItemStyles>
<ColumnTemplates>
<eo:TextBoxColumn>
<TextBoxStyle CssText="BORDER-RIGHT: #7f9db9 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7f9db9 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 8.75pt; PADDING-BOTTOM: 1px; MARGIN: 0px; BORDER-LEFT: #7f9db9 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #7f9db9 1px solid; FONT-FAMILY: Tahoma" />
</eo:TextBoxColumn>
<eo:DateTimeColumn>
<DatePicker ControlSkinID="None" DayCellHeight="16" DayCellWidth="19" DayHeaderFormat="FirstLetter"
DisabledDates="" OtherMonthDayVisible="True" SelectedDates="" TitleLeftArrowImageUrl="DefaultSubMenuIconRTL"
TitleRightArrowImageUrl="DefaultSubMenuIcon">
<TodayStyle CssText="font-family: tahoma; font-size: 12px; border-right: #bb5503 1px solid; border-top: #bb5503 1px solid; border-left: #bb5503 1px solid; border-bottom: #bb5503 1px solid" />
<SelectedDayStyle CssText="font-family: tahoma; font-size: 12px; background-color: #fbe694; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<DisabledDayStyle CssText="font-family: tahoma; font-size: 12px; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<PickerStyle CssText="border-bottom-color:#7f9db9;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#7f9db9;border-left-style:solid;border-left-width:1px;border-right-color:#7f9db9;border-right-style:solid;border-right-width:1px;border-top-color:#7f9db9;border-top-style:solid;border-top-width:1px;font-family:Courier New;font-size:8pt;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:1px;padding-left:2px;padding-right:2px;padding-top:2px;" />
<CalendarStyle CssText="background-color: white; border-right: #7f9db9 1px solid; padding-right: 4px; border-top: #7f9db9 1px solid; padding-left: 4px; font-size: 9px; padding-bottom: 4px; border-left: #7f9db9 1px solid; padding-top: 4px; border-bottom: #7f9db9 1px solid; font-family: tahoma" />
<TitleArrowStyle CssText="cursor:hand" />
<DayHoverStyle CssText="font-family: tahoma; font-size: 12px; border-right: #fbe694 1px solid; border-top: #fbe694 1px solid; border-left: #fbe694 1px solid; border-bottom: #fbe694 1px solid" />
<MonthStyle CssText="font-family: tahoma; font-size: 12px; margin-left: 14px; cursor: hand; margin-right: 14px" />
<TitleStyle CssText="background-color:#9ebef5;font-family:Tahoma;font-size:12px;padding-bottom:2px;padding-left:6px;padding-right:6px;padding-top:2px;" />
<OtherMonthDayStyle CssText="font-family: tahoma; font-size: 12px; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<DayHeaderStyle CssText="font-family: tahoma; font-size: 12px; border-bottom: #aca899 1px solid" />
<DayStyle CssText="font-family: tahoma; font-size: 12px; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
</DatePicker>
</eo:DateTimeColumn>
<eo:MaskedEditColumn>
<MaskedEdit ControlSkinID="None" TextBoxStyle-CssText="BORDER-RIGHT: #7f9db9 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7f9db9 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 1px; MARGIN: 0px; BORDER-LEFT: #7f9db9 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #7f9db9 1px solid; font-family:Courier New;font-size:8pt;">
</MaskedEdit>
</eo:MaskedEditColumn>
</ColumnTemplates>
<ColumnHeaderHoverStyle CssText="background-image:url('00050202');padding-left:8px;padding-top:4px;" />
<Columns>
<eo:CustomColumn
ClientSideBeginEdit="on_begin_edit"
ClientSideEndEdit ="on_end_edit"
DataField="LOC_CODE" HeaderText="LOC_CODE">
<EditorTemplate>
<asp:DropDownList ID="ddlLOC_CODE" Width="100px" runat="server">
</asp:DropDownList>
</EditorTemplate>
</eo:CustomColumn>
<eo:TextBoxColumn DataField="SUPP_NAME" HeaderText="SUPP_NAME" TextBoxMaxLength="40"
Width="250">
</eo:TextBoxColumn>
<eo:TextBoxColumn DataField="TERMS" HeaderText="TERMS" TextBoxMaxLength="10">
</eo:TextBoxColumn>
<eo:StaticColumn DataField="SUPP_NO" HeaderText="SUPP_NO" Visible="False">
</eo:StaticColumn>
<eo:StaticColumn DataField="STATE" HeaderText="STATE" Visible="False">
</eo:StaticColumn>
</Columns> <ColumnHeaderStyle CssText="background-image:url('00050201');padding-left:8px;padding-top:4px;" />
</eo:Grid>
Back to top
 
eo_support
Posted: Friday, April 24, 2009 8:36:26 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

Please provide a complete test page with detailed step by step instruction on how to reproduce the problem. Once we have that we will run it here so that we can see the same result as you are seeing.

Thanks!
Back to top
 


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.