eo_Callback and eo_TriggerScriptEvent with ClientSideEndEdit handler

Welcome Guest

Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » eo_Callback and eo_TriggerScriptEvent with ClientSideEndEdit handler

2 pages: [1] 2

Options

Previous Topic · Next Topic

pghcpa

Posted: Thursday, August 27, 2009 3:48:44 AM

Rank: Advanced Member
Groups: Member

Joined: 8/26/2009
Posts: 64

The following function does not fire when invoked in ClientSideEndEdit property of a grid textboxcolumn control if the grid is contained within a CallbackPanel. Therefore, I cannot use an eo_callback('CallbackPanel1','Test'); statement in place of where you see the alert.

function on_endedit(cell, newValue) {

setTimeout(function() {
alert('Hello');
}, 10);
}
<eo:TextBoxColumn AllowSort="True" DataField="Name" HeaderText="Name"
Width="200" ClientSideEndEdit="on_endedit">
</eo:TextBoxColumn>

I also tried eo_TriggerScriptEvent at your suggestion. I drag over the control to the form. Then, removed the CallBackPanel (since that was causing the function not to fire), then where you see the alert I put

eo_TriggerScriptEvent("<%=ScriptEvent1.ClientID%>","whatever","anything");

I don't need a command name in this case because my FullRowMode=False -- I just need to get the
ScriptEvent1_Command event to fire in my vb code-behind so I can use it to update the edited value. Error is "Microsoft JScript runtime error: Object expected" and the vb handler doesn't fire.

eo_support

Posted: Thursday, August 27, 2009 8:28:12 AM

Rank: Administration
Groups: Administration

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

Hi,

For the first problem, make sure you have your JavaScript function outside and before the CallbackPanel.

The second issue is our mistake. The function name should be eo_TriggerServerEvent, no eo_TriggerScriptEvent.

Thanks!

pghcpa

Posted: Thursday, August 27, 2009 11:19:14 AM

Rank: Advanced Member
Groups: Member

Joined: 8/26/2009
Posts: 64

I always put my script before the rest of the markup, but it doesn't fire if there is a Callback Panel -- and clearly the CallBack panel is the way to go, so I want to make that happen. As soon as I comment out the panel it fires -- as soon as I put it back in, it doesn't. Please help.

My markup has the page directives then:
<html>
<script>
<head>
<body>
<form>
<div>
<eo:CallbackPanel>
<eo:Grid>
<eo:Grid>
</eo:CallbackPanel>
</div>

eo_support

Posted: Thursday, August 27, 2009 11:26:44 AM

Rank: Administration
Groups: Administration

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

Hi,

We actually have tried the code and it works fine here. There are two possible differences: the version you are running and the version we are running; The page you are running and the page we are running. So please let us know the version number and also post a complete test page so that we can verify. For the test page please make sure the Grid runs independently. You can use the following code to create some empty rows in the Grid so that the test page would not rely on your data:

Code: C#

Copy

Grid1.DataSource = new Object[2];
Grid1.DataBind();

Once we have the test page we will run it here and see if we can see the problem.

Thanks!

pghcpa

Posted: Thursday, August 27, 2009 11:35:12 AM

Rank: Advanced Member
Groups: Member

Joined: 8/26/2009
Posts: 64

Fair enough.

7.0.24.2

Above is what I see under properties of the EO.Web.Dll, is that what you wanted?

How do you want test pages posted? Zip of project? Copy/paste the markup? Here as a post?

eo_support

Posted: Thursday, August 27, 2009 11:40:17 AM

Rank: Administration
Groups: Administration

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

Hi,

Your version is very new. So it's unlikey that is the problem. I would assume the problem can be reproduced with a single test page. If that's the case, you can post directly here. If you do need multiple pages to reproduce the problem, you can email the test project to us in zip format (we will PM you with the email address). Please do not send your working project to us as is. We will need to run the code in order to see the problem. Also please make sure the project includes only code that is necessary to reproduce the problem.

Thanks!

pghcpa

Posted: Thursday, August 27, 2009 11:45:05 AM

Rank: Advanced Member
Groups: Member

Joined: 8/26/2009
Posts: 64

Understood about what you need.

When you say post directly here, do you mean as an attachment or copy/paste?

When I press the PM Me (Private Message?) button, what does that do?

eo_support

Posted: Thursday, August 27, 2009 11:53:49 AM

Rank: Administration
Groups: Administration

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

Hi,

"Post here" meaning you just copy and paste here. It has nothing to do with attachment. If you wish to send attachment, send us by email.

PM Me sends a private message to whoever you want to. If your test page contains sensitive information, you can send a private message to us. Unlike public post in the forum, nobody else except for us will be able to see the private message. The downside for private message is that it is not organized in thread so it’s not good for tracking all related communications regarding one issue.

Thanks!

pghcpa

Posted: Thursday, August 27, 2009 12:12:49 PM

Rank: Advanced Member
Groups: Member

Joined: 8/26/2009
Posts: 64

Code: JavaScriptGrid1.DataSource = new Object[2];
Grid1.DataBind();

What is equivalent syntax for VB.

Grid1.DataSource = New Object()

Don't know how to specify two rows in the above statement.

Grid1.DataBind()

Says it can't bind type object.

I can come up with something, but trying to save time and eliminate variables.

eo_support

Posted: Thursday, August 27, 2009 12:43:18 PM

Rank: Administration
Groups: Administration

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

Hi,

The original code is C#. Sorry about the typo.

I believe the VB version would use a variable:

Code: Visual Basic.NET

Copy

Dim data(1) as Object
Grid1.DataSource = data
Grid1.DataBind()

Thanks

pghcpa

Posted: Thursday, August 27, 2009 1:19:27 PM

Rank: Advanced Member
Groups: Member

Joined: 8/26/2009
Posts: 64

OK, here's I can replicate the behavior that is throwing me. I'm copying/pasting, let me know if you prefer that I e-mail the files -- either is fine.

Notes:

1. My goal. I don't want the user to press a button to perform the callback. When they leave either the row or field (depending on a particular situation) I want it to fire an event I can also raise in VB so I can update the edit back to the DB.

2. I far prefer callback to postback. Much prefer to detect a panel update rather than handle ClientSideEndEdit.

3. I need FullRowMode=False because I want them to edit cells "Excel Style". Trying to avoid the "traditional edit/update/cancel" hyperlink on every row.

4. In the test below, I only have an alert in the function to see if it fires, but I plan to put in there: eo_Callback("CallbackPanel1") so that it will fire CallbackPanel1_Execute in my vb code where I'll put the SqlDataSource Sql Update. Or, I'll use eo_TriggerServerEvent here so that it will fire the ScriptEvent1_Command event. Not sure which is best, but first I just need to get it to fire at all.

5. When I edit a cell -- nothing happens. Alert doesn't fire.

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

<%@ 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">
<script>
function callback_after_update_handler(callback, extraData) {
alert('Grid has been updated');
}
</script>
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<eo:CallbackPanel ID="CallbackPanel1" runat="server" Height="150px" Width="200px" ClientSideAfterUpdate="callback_after_update_handler">

<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="200px" ItemHeight="19" Width="380px" FullRowMode="False">
<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">
</eo:TextBoxColumn>
</Columns>
<ColumnHeaderStyle CssText="background-image:url('00050201');padding-left:8px;padding-top:4px;" />
</eo:Grid>
</eo:CallbackPanel>
</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 EOTest2
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
End Class

eo_support

Posted: Thursday, August 27, 2009 2:02:51 PM

Rank: Administration
Groups: Administration

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

Hi,

The new code you posted is different than what you posted before. Your previous code should work. The new code should not.

In your previous code, you had:

<eo:TextBoxColumn AllowSort="True" DataField="Name" HeaderText="Name"
Width="200" ClientSideEndEdit="on_endedit">
</eo:TextBoxColumn>

That instructs the Grid to call on_endedit when a cell leaves edit mode and it does.

In your new code you do not have that. But you have:

<eo:CallbackPanel ID="CallbackPanel1"
runat="server" Height="150px" Width="200px" ClientSideAfterUpdate="callback_after_update_handler">

Since you never even trigger a callback. It is for sure that callback_after_update_handler will never be called at all.

As a test, you can add ClientSideEndEdit="callback_after_update_handler" to your TextBoxColumn and you will see the alert box (obviously you will want to change the function name to avoid confusion).

A few other point of interest:

1. You should not place the Grid inside the CallbackPanel. Placing the Grid inside the CallbackPanel means you want to update the Grid after every callback. I don't think this is what you wanted;

2. It's better to handle ScriptEvent_Command event than CallbackPanel_Execute event;

Hope this helps.

Thanks

pghcpa

Posted: Thursday, August 27, 2009 3:32:24 PM

Rank: Advanced Member
Groups: Member

Joined: 8/26/2009
Posts: 64

Trying to handle one thing at a time. But, in your reply earlier you referred to the ClientSideAfterUpdate handler, so I decided to try that first. Sounds like that requires a button press (or equivalent) -- you wrote "if you updated the grid" but I guess you meant updated the grid AND pressed a button/link/checkbox, etc., something that can be used with the callbackpanel trigger, is that right?

I have tried to take your advice. See code below which I will also e-mail. Do you prefer e-mail, paste or both? If the ScriptEvent is on the page, the on_endedit function won't fire at all. If I remove it, it does.

2nd question - so I can get my arms around this and become a long-term customer. I am staring at the demo code for the Grid excel style editing on my screen. There there grid is inside the callbackpanel and that's why I did it that way. If I don't want to "collect" several edits and apply them in a batch, then don't I have to callback after every edit? I want to make it appear like a two-way databound grid WITHOUT a callback or postback button/link/checkbox, etc. I tried it at first without putting the grid in there and got nowhere, looked at your example, then changed it to match, so please help me understand what will occur in each case.

Tip on ScriptEvent_Command is a good one, thanks!

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

<%@ 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">
<script>
function callback_after_update_handler(callback, extraData) {
//when put in CallbackPanel ClientSideAfterUpdate property
//apparently only fires if a callback has been triggered with a button or similar
//just editing a cell doesn't cause it to fire this so we can't call an eo_callback from here
alert('Grid has been updated');
}
function on_endedit(cell, newValue) {
alert('Grid has been updated');
setTimeout(function() {
eo_TriggerServerEvent("<%=ScriptEvent1.ClientID%>", "whatever", "anything");
}, 10);
return newValue
}
</script>
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>

<eo:CallbackPanel ID="CallbackPanel1" runat="server" Height="150px" Width="200px">
</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="200px" ItemHeight="19" Width="380px" FullRowMode="False">
<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" 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 EOTest2
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
Response.Write("Hello From ScriptEvent1_Command")

End Sub
End Class

eo_support

Posted: Thursday, August 27, 2009 4:28:36 PM

Rank: Administration
Groups: Administration

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

Hi,

I believe we have finally gotten to the bottom of the issue. In your code you have:

Code: HTML/ASPX

Copy

<html>
   <script>your script code</script>
   <head>....</head>
   <body>....</body>
</html>

Note your script element is a direct child of the HTML element. This is invalid. Most browser would tolerate this but our CallbackPanel won't (because it participant the rendering process). So as soon as you have CallbackPanel in the page your script block will be thrown out, which causes your on_end_edit handler not to fire (because it no longer exists in the page).

The solution is quite easy; just move your script block into head or body element.

As to your other questions:

1. You can either email or post code, but there is no need to do both. Usually for small piece of code we would prefer you to post in the forum because that way other people who may have the same problem would be able to see what we are talking about. However in case there is a lot more code involved, nobody else probably would be interested in reading it anyway. :)

2. As for the CallbackPanel, No. That is not what I meant. To understand the CallbackPanel, you want to understand a few key points first:

2.a. CallbackPanel needs to be triggered. It can be triggered by code or a trigger control (for example, a Button control or a ScriptEvent control);

2.b. Once you setup the trigger, the CallbackPanel is meant to be transparent to your code logic. So for example, if your Button1_Click event handler is fired when user clicks the button without CallbackPanel, your Button1_Click event handler will still be fired when user clicks the button when the button is a CallbackPanel trigger. Similarly, if your ScriptEvent1_Command is fired when you call eo_RaiseServerEvent without CallbackPanel, the same event will also be fired when it goes through a CallbackPanel. So the best way to understand how a CallbackPanel works is to take it out first. It does not change your code logic;

2.c. Since a CallbackPanel does not change your code logic, you might be wondering what difference a CallbackPanel really brings. The real difference a CallbackPanel brings to you is instead of updating the whole page, it only update a portion of the page. And the boundary of the CallbackPanel defines that portion. So for example, if you have a complicated page with a lot of controls, but you have a single button and you want to change the button's Text to the current time every time you click it, you would place a CallbackPanel around that button, also set that button as a trigger. When you click the button, the page will go back to the server and the button will be refreshed, but nothing else in your page is refreshed;

Come back to your scenario, this means:

1. You do not need to press a button for the CallbackPanel. ScriptEvent can raise server event. So it can be set as a trigger. Once you set it as a trigger, whatever code you were using to trigger ScriptEvent will now be automatically rerouted through CallbackPanel. It will trigger the same event, but will go through the CallbackPanel so that the whole page will not be reloaded;

2. You do not want to put the Grid inside the CallbackPanel. If you do that, then everytime your ScriptEvent goes through CallbackPanel (and all server side update logic sucessfully done), your client side Grid will be reloaded. This does not do any good for you because you do not need anything to be refreshed on the client side. All you wanted is to update some data on the server side based on changes user has made;

3. To sum it up, CallbackPanel calls server side code and updates a portion of your page (as oppose to calling server side code and update the whole page always occurs together in a traditional post back). In your case, you need to call server side code but do not need to update any portion of your page. So the solution for you is a CallbackPanel in your page but with nothing inside the CallbackPanel;

A typical example you would put the Grid inside the CallbackPanel is when you want to apply certain filters. For example, you have an "Order History" Grid and then have a drop down with options like "Open Orders|Orders within last 3 month|Orders with last year...". When user select an item from the drop down you would need to go back to the server to rebind the Grid. In this case you can set the drop down as a trigger and place the Grid inside the CallbackPanel because the very purpose is to reload (refresh) the Grid.

Hope this helps.

Thanks!

pghcpa

Posted: Thursday, August 27, 2009 6:29:54 PM

Rank: Advanced Member
Groups: Member

Joined: 8/26/2009
Posts: 64

First, I want to thank you for how promptly you reply to such complex e-mails -- and on that last one for the excellently-written explanation. I get how the panels work in Ajax and yet it is not yet obvious to me yet with your controls how to manage it without buttons. All of your grid examples either involve "select" or they involve button/link/checkbox events.

I moved the script to the body, but that isn't enough. Has to go in Form. Now it works and I was able to get my SqlDataSource Update statement to work. It is lightening fast and updates cell-by-cell for each edit without the slightest lag, even though it is an Internet facing SQL/Server 2008 db. Exactly what I want.

Now I am following your sample code to loop through the entire grid to look for changedItems, even though I know that only one cell has changed. It looks to me like the

eo_TriggerServerEvent("<%=ScriptEvent1.ClientID%>", "whatever", "anything");

statement only passes strings. How can I pass over the cell I just edited so I don't have to go through everything. Or, maybe this is a dumb question because the loop is "For each item in Grid1.ChangedItems" -- and that is a collection of changed cells -- if there is only one, it will be instant and no wasted cycles. If that is the best way, it's fine as is.

Eventually, I want to update db only if they've left the row -- so could accumulate multiple changes in that row .. not sure yet how to know that the user has gone up or down a row if I am firing event on every ClientSideEndEdit. Any ideas for me on that?

Also, how exactly do your trigger the script with the callback panel. Just specify ScriptEvent1 in the controlID of the trigger? What does that do? I'm not sure how that compares to using ClientSideEndEdit property. If I were to put the ScriptEvent1 as the controlid in the callbackpanel trigger, just editing a cell wouldn't fire it, right? What would cause the ScriptEvent1_Command code-behind to fire in this case?

(We're almost done with this thread, I'll write a summary reply at the end for what ended up working. I can't be the only one looking for an Excel-style 2-way databound grid with a SQLDatasource that updates with a callback as you leave each cell. Without this, the user thinks the change has been made and if they close the browser or leave the page without pressing an update button, their change is lost -- this solves that problem. It is very, very cool.)

eo_support

Posted: Thursday, August 27, 2009 6:44:22 PM

Rank: Administration
Groups: Administration

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

pghcpa wrote:

First, I want to thank you for how promptly you reply to such complex e-mails -- and on that last one for the excellently-written explanation.

You are welcome. we are glad that we were able to help you understand how our product works.

pghcpa wrote:

I moved the script to the body, but that isn't enough. Has to go in Form.

Good to know that, thanks for sharing!

pghcpa wrote:

the loop is "For each item in Grid1.ChangedItems" -- and that is a collection of changed cells -- if there is only one, it will be instant and no wasted cycles. If that is the best way, it's fine as is.

That is correct. That is exactly what ChangedItems is for.

pghcpa wrote:

Eventually, I want to update db only if they've left the row -- so could accumulate multiple changes in that row .. not sure yet how to know that the user has gone up or down a row if I am firing event on every ClientSideEndEdit. Any ideas for me on that?

You would handle the Grid's ClientSideOnCellSelected event. Inside that event you can use getSelectedCell to get the newly selected cell, from the cell object you would then call getItemIndex to get the item index. You would probably keep the item index in a global variable, and when you see the new value is a different value, you call eo_TriggerServerEvent to trigger ScriptEvent's Command event, which goes through the Grid's ChangedItems to update your db.

pghcpa wrote:

Also, how exactly do your trigger the script with the callback panel. Just specify ScriptEvent1 in the controlID of the trigger?

That is correct. In this case not the user mouse click, but your code fires the ScriptEvent's Command event (eo_TriggerServerEvent).

pghcpa wrote:

(We're almost done with this thread, I'll write a summary reply at the end for what ended up working. I can't be the only one looking for an Excel-style 2-way databound grid with a SQLDatasource that updates with a callback as you leave each cell. Without this, the user thinks the change has been made and if they close the browser or leave the page without pressing an update button, their change is lost -- this solves that problem. It is very, very cool.)

Great idea!

Please feel free to let us know if you have any other questions. Happy coding! :)

Thanks!

eo_support

Posted: Thursday, August 27, 2009 7:38:52 PM

Rank: Administration
Groups: Administration

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

CORRECTION:

We just realized that in your particular case you can not rely on ChangedItems. Because the Grid has not been refreshed after each call, ChangedItems would not correctly reflect the newly changed items only. One option for you is to pass the changed item index through the commandArgument parameter when you call eo_RaiseServerEvent. This way you server side code will not waste time to update rows that has already been previously updated.

Thanks!

pghcpa

Posted: Thursday, August 27, 2009 8:11:46 PM

Rank: Advanced Member
Groups: Member

Joined: 8/26/2009
Posts: 64

Seems to be working so far, but I need this to work all the time -- and I think what you meant is that if the user made one or two changes that's OK, but after 3 changes it would do 3 updates, 10 changes, 10 updates. Could slow down if not refreshed (or something like that).

How do you refresh in VB code without pressing a button?

So, please help me out with the lingo you're using because to interpret it is going to take me a lot of time. Helps me if you refer to the exact calls I'm using instead of your generic names for them with which I'm not familiar. So, per your suggestion I am using eo_TriggerServerEvent, not "eo_RaiseServerEvent", which doesn't show up in your object reference. I guess that is what you meant, though.

setTimeout(function() {
eo_TriggerServerEvent("<%=ScriptEvent1.ClientID%>", "whatever", "anything");
}, 10);
return newValue

Now, you want me to "pass the changed item index through the commandArgument parameter when you call eo_RaiseServerEvent."

I have to stare at that sentence for awhile as I don't know your lingo the way you do and break it down.

The commandArument parameter is the "whatever" argument above, correct?

That seems to be type string according to your object reference below.

Parameters
scriptEventId :The ClientID of the ScriptEvent control.
commandName :A string value for the command name.
commandArgs :A string value for the command arguments.

According to the object reference, the handler format for the ClientSideEndEdit property is:

function on_endedit(cell, newValue)

So, I don't see how I can pass the cell back to the ScriptEvent1_Command codebehind because it's an object, not a string. guess you basically meant the row number as a string?

Then to do my update statement I need:

item.Key
cell.Column.DataField
cell.Value

If I passed back the row number, but not the cell object, I wouldn't know the column nor how to get the item.key.

So, rather than my experimenting and asking more Noobie questions, I would be most grateful if you would tell me precisely how to do this in 'business appplications developer' speak as much as possible. Your support is, by any standard, first class -- but I am not at your level of understanding as far as Javascript or your object model, so -- please -- can I just have the code you mean to get this working correctly?

Or, I can send you the current test (using your sample data) and you can tell me what it needs? Whatever is easiest for you.

eo_support

Posted: Thursday, August 27, 2009 8:35:11 PM

Rank: Administration
Groups: Administration

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

Hi,

Below is some code. Please read it and see if it makes sense to you.

Code: HTML/ASPX

Copy

<eo:Grid ClientSideOnCellSelected="on_selected_cell_changed" ....>
....
</eo:Grid>

Code: JavaScript

Copy

//Global variable used to save the previously changed item. For example
//if user selected cell(x=0, y=0), g_changedItemIndex would be set to 0. If
//user then select cell(x=0, y=1), the code would compare g_changedItemIndex
//(which currently have value 0), with the new row value (1) and concluded 
//that user have moved to a new row so it should go ahead and raises server 
//event to update db for row 0
var g_changedItemIndex = null;

function on_selected_cell_changed(grid)
{
    //Get current selected row index
    var selectedCell = grid.getSelectedCell();
    var selectedRow = selectedCell.getItem();
    var newSelectedRowIndex = selectedRow.getIndex();

    //Compare current selected row index with previous selected row index
    if (newSelectedRowIndex != g_changedItemIndex)
    {
        //Selected row changed, go ahead to update previous row
        if (g_changedItemIndex != null)
        {
            setTimeout(function()
                {
                    eo_RaiseServerEvent("ScriptEvent1", 
                        "any_value, this argument is not used", 
                        g_changedItemIndex.toString();
                }, 10);
        }

        //Remember the current selected row
        g_changedItemIndex = newSelectedRowIndex;
    }
}

Code: Visual Basic.NET

Copy

Protected Sub ScriptEvent1_Command( _
    ByVal sender As Object, ByVal e as CommandEventArgs)

    'Get the changed item index
    Dim ItemIndex As Integer = Int32.Parse(e.CommandArgument)

    'Get the changed item key
    Dim Key as Object = Grid1.Items(ItemIndex).Key

    'Get cell value for the first column. Change Cells(0) to
    'Cells(1) to get the second column, etc
    Dim FirstCellValue = Grid1.Items(ItemIndex).Cells(0).Value

    'Now you should have everything to update the db
End Sub

Hope this is easier for you.

Thanks!

pghcpa

Posted: Thursday, August 27, 2009 8:46:03 PM

Rank: Advanced Member
Groups: Member

Joined: 8/26/2009
Posts: 64

Yes, I can follow that very easily. Thanks! I will try to implement it and let you know.

Question: eo_RaiseServerEvent

I looked it up again in your object doc and can't find it there via search or under the client-side global functions. Why is that? Is it new?

What is difference between that and the eo_TriggerServerEvent you mentioned previously?

2 pages: [1] 2

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.