Is there a setting to choose double-click instead of single-click to edit a grid cell?

No problem.

How about a shortcut key such as F2 to put cell in edit mode (like it's used in Excel)?

The idea is to be able to go down a whole row, or across a whole column to edit each cell without touching the mouse. I know you can do this with the CommandName=Edit, but since the EO grid can come so close to replicating rich Windows.Forms "Datasheet" (or Excel) behavior, want to find out if I can find a way to do it Excel-style.

Thanks.

Yes, I have that on already, but that doesn't enter edit mode.

So, if I want fullrowselect=false, as far as you know, the ONLY way to edit a cell is to single-click on it. No keyboard key will work, correct?

On a related note, I found that if I close the edit by clicking in another cell or using any of the arrow keys, it works as expected. But, if I use the enter key, it postsback instead of callsback. Enter key causes the whole grid to disappear during the operation.

This is no huge deal for me right now, but I would like Enter key to work the same as the arrow keys if there's a way to do it. (If not, I'll add it to your product wish list.)

(Based on the response times I'm getting, your grid has made it possible to do production-level business apps without a smart client. This is huge, but one requirement is to be able to do fast data entry without having to touch the mouse with every cell.) Of course, I can use the old-style edit-a-row mode, or a header/detail view, etc., etc., but there's nothing like a single datasheet that you can fly through without the mouse.

I will work on something I can show you w/ your demo data.

I see now that you can enter edit mode on a cell by pressing enter. That's good.

But, when I edit the cell and end the edit with an arrow key (or Enter), my callback executes, my server event updates the DB, but cell hover is in the correct cell, but there's no focus to the grid, so I have to mouse again.

After the callback, how do I return focus to the grid and the cell I just arrowed-to?

If the answer to this "return focus" is not immediately obvious, then just wait until I can post a sample, no problem.

OK, here's demo code that demonstrate two completely different issues :

1. Enter Key / grid update causing the grid/cell to lose focus and

2. Unrelated but mentioned in another post where after every edit, you will see the page control move down a row then back up on the callback.

On Issue #1, to see the behavior, click on the static cell in the first column, arrow over to the Topic cell, press ENTER (puts you in edit mode), make an edit, press ENTER again. Something in my raised server event, I guess, causes the grid to lose focus -- and sometimes the whole grid refreshes (disappears and repaints) -- but I cannot figure out when that happens or how to make it repeat (maybe something to do with the SqlDataSource cache auto-refreshing). Anyway, it always loses focus so you have to click again in the grid, whereas, I want to be able to just move down or across a row and press Enter to edit the cell, and be left there so I can use arrows to move elsewhere and do another edits, etc.

Of course, the edit doesn't commit since your sample data is bound to a reader and there's no actual update statement. In my case, the change is reflected.

On Issue #2, I am seeing it on iExplorer 7.0, but something in FireFox (3.5.2) seems to either make it too fast to see or it renders differentl (or there's a setting different). In any event, I have figured out that if I turn the scroll bars to "None" the problem goes away (but sometimes I might want the scroll bars). Also, I have the PageSize="10" and I notice that if I adjust the Height, I can get to where I see the first part of an 11th row. What I can see if I adjust it just right is that it paints an 11th row, then changes its mind and goes back to 10 -- and that is what is actually causing the paging control to jump down then up. Seems to be evaluating whether or not to use the scroll bar. Hopefully you see it, because when I run it, the behavior repeats 100% of the time in iE 7.0.

Thanks!

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="EOTest3.aspx.vb" Inherits="EOTest3" %>

<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
<title></title>
</head>
<body>

<form id="form1" runat="server">
<script>
function on_endedit(cell, newValue) {
var oldval = cell.getValue()
if (oldval != newValue) {
setTimeout(function() {
eo_TriggerServerEvent("<%=ScriptEvent1.ClientID%>", "whatever", "anything");
}, 10);
}
return newValue
}
</script>
<div>


<eo:CallbackPanel ID="CallbackPanel1" runat="server" Height="50px"
Width="50px">
</eo:CallbackPanel>
<eo:ScriptEvent ID="ScriptEvent1" runat="server">
</eo:ScriptEvent>
<eo:Grid ID="Grid1" runat="server" BorderColor="#828790" BorderWidth="1px"
ColumnHeaderAscImage="00050204" ColumnHeaderDescImage="00050205"
ColumnHeaderDividerImage="00050203" ColumnHeaderHeight="24"
FixedColumnCount="1" 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="450px" ItemHeight="25" Width="551px" FullRowMode="False"
AllowPaging="True" BorderStyle="None" PageSize="10"
EnableKeyboardNavigation="True">
<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:DateTimeColumn DataField="PostedAt" HeaderText="Posted At"
Name="dtPostedAt">
<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="font-family:Courier New; padding-left:5px; padding-right: 5px;" />
<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:TextBoxColumn DataField="Topic" HeaderText="Topic" Name="txtTopic"
Width="400" ClientSideEndEdit="on_endedit">
</eo:TextBoxColumn>
</Columns>
<ColumnHeaderStyle CssText="background-image:url('00050201');padding-left:8px;padding-top:4px;" />
</eo:Grid>

</div>
</form>
</body>
</html>
Imports System
Imports System.Data
Imports System.Drawing
Imports System.Web
Imports System.Web.UI.WebControls
Imports System.Web.UI.HtmlControls
Imports EO.Web
Imports EO.Web.Demo


Partial Class EOTest3
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim db As New DemoDB()
Try
Dim sql As String = "SELECT * FROM Topics"
Grid1.DataSource = db.ExecuteReader(sql)
Grid1.DataBind()
Finally
CType(db, IDisposable).Dispose()
End Try
'Dim data(10) As Object
'Grid1.DataSource = data
'Grid1.DataBind()


End Sub

Protected Sub ScriptEvent1_Command(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.CommandEventArgs) Handles ScriptEvent1.Command
Dim a As String
a = "got here"
'Here is where the SqlDatasource update statements go
End Sub

End Class

Right! Sheer perfection now. It's like being in Excel with every cell change committed back to Internet-facing DB -- you can't even tell you're not in a spreadsheet.

Some people dis the SqlDatasource, but it handles everything from the connection, to the cache to a 100 other things for you -- and I haven't tried other controls because my data is in SqlServer, but it is instant even on a mediocre Internet connection.

I remember you explained the trigger to me yesterday, but I misunderstood that it was an either/OR, but both Javascript handler and trigger are required to make the callback work. So, for future reference steps to a read/write data-aware Excel-style grid are:

1. Callback panel (don't put the grid in there, just have on the page).
2. Script Event.
3. JS ClientSideEndEdit handler referred to it in each editible column ClientSideEndEdit property (no quotes, just type in the name of the Jscript, case sensitive).
4. Insert Javscript AFTER the <form id="form1" runat=server> -- see earlier post in this thread for the syntax including how to raise the server event -- all functions such as cell.getValue are case sensitive also)
5. Add the trigger to the callback panel control as described above.
6. On each cell edit completed, the codebehind ScriptEvent1_Command will be raised so you can put code in there for updating the cell back to the db or whatever you want to do with it server-side.

Bravo!

Thanks again.