Welcome Guest Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » grid ClientSideBeforeEditItem problem

grid ClientSideBeforeEditItem problem Options
Previous Topic · Next Topic
Leitor79
Posted: Tuesday, December 14, 2010 1:43:56 AM
Rank: Member
Groups: Member

Joined: 10/29/2010
Posts: 11
Hi,

I have a grid, and I want to call a server side function when the user clicks the edit command column. I'm trying to use the ClientSideBeforeEditItem but I'm getting an error. Here is my code:

grid definition (yes, is on a callback panel):
Quote:

<eo:CallbackPanel ID="CallbackPanel1" runat="server" Triggers="{ControlID:grdZones;Parameter:}">
<eo:Grid ID="grdZones" runat="server" AllowNewItem="True" BorderColor="#C7D1DF" ColumnHeaderAscImage="00050303"
ColumnHeaderDescImage="00050304" ColumnHeaderDividerImage="00050302" Font-Bold="False"
Font-Italic="False" Font-Names="Verdana" Font-Overline="False" Font-Size="9pt"
Font-Strikeout="False" Font-Underline="False" GridLineColor="199, 209, 223" GridLines="Both"
Height="250px" ItemHeight="19" Width="726px" ClientSideAfterEditItem="GridUpdate"
ClientSideBeforeEditItem="StartEditing">



javascript function:
Quote:

function StartEditing(gridItem, save) {
var grid = gridItem.getGrid();
var item = grid.getSelectedItem();
var column = grid.getColumn(2);
column.setWidth(60);
grid.raiseItemCommandEvent(item.getIndex(), 'edit');
return true;
//tried with and without the return
}



The error raises at the grid.raiseItemCommandEvent line, in some javascript code between that call and my server function, saying something like the aauy.length is null or not an object.

I'ts curious (is it?) that the function StartEditing it's a copy-paste of the ClientSideAfterEditItem javascript code, that it's working OK:

Quote:

function GridUpdate(gridItem, save) {
var grid = gridItem.getGrid();
var item = grid.getSelectedItem();

var column = grid.getColumn(2);
column.setWidth(30);
grid.raiseItemCommandEvent(item.getIndex(), 'update');
}


I'd appreciate any help.


Regards!
Back to top
 
eo_support
Posted: Tuesday, December 14, 2010 8:42:11 AM
Rank: Administration
Groups: Administration

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

Try to put your code inside a timer:

Code: JavaScript 
function StartEditing(gridItem, save) 
{
    setTimeout(function()
    {
         //put your code here
         .....
    }, 100);
}


This delays the call so that the Grid will be able to finish updating its internal data first.

Thanks!
Back to top
 
Leitor79
Posted: Wednesday, December 15, 2010 1:20:22 AM
Rank: Member
Groups: Member

Joined: 10/29/2010
Posts: 11
Hi!

Thanks for your fast answer!

I've got no luck, your suggestion didn't work. I even tried with a 1000 interval. I paste my function below, just in case:

Quote:
function StartEditing(gridItem, save) {
setTimeout(function()
{
var grid = gridItem.getGrid();
var item = grid.getSelectedItem();
var column = grid.getColumn(2);
column.setWidth(30);
grid.raiseItemCommandEvent(item.getIndex(), 'edit');
}, 1000);
}



Regards!
Back to top
 
eo_support
Posted: Wednesday, December 15, 2010 8:06:19 AM
Rank: Administration
Groups: Administration

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

In that case please try to isolate the problem into a test page and we will be happy to take a look. Please make sure your test page runs independently and only contains code needed to reproduce the problem.

Thanks!
Back to top
 
Leitor79
Posted: Friday, December 17, 2010 2:44:23 PM
Rank: Member
Groups: Member

Joined: 10/29/2010
Posts: 11
Hi!


I've copied the page into a test page and tried to remove stuff and see what happened.

I've found that the problem is due to the grid being inside a callbackpanel. If I remove the callbackpanel definition, it's working OK.

I paste here the code, maybe you could find something is wrong with my code or with the component:

Quote:

<eo:CallbackPanel ID="CallbackPanel1" runat="server" Triggers="{ControlID:grdZones;Parameter:}">
<eo:Grid ID="grdZones" runat="server" AllowNewItem="True" BorderColor="#C7D1DF" ColumnHeaderAscImage="00050303"
ColumnHeaderDescImage="00050304" ColumnHeaderDividerImage="00050302" Font-Bold="False"
Font-Italic="False" Font-Names="Verdana" Font-Overline="False" Font-Size="9pt"
Font-Strikeout="False" Font-Underline="False" GridLineColor="199, 209, 223" GridLines="Both"
Height="250px" ItemHeight="19" Width="726px" ClientSideAfterEditItem="GridUpdate"
ClientSideBeforeEditItem="StartEditing">



Thank you!
Back to top
 
eo_support
Posted: Friday, December 17, 2010 2:47:07 PM
Rank: Administration
Groups: Administration

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

We still need you to produce a full working page that can demonstrate the problem. That will make sure we are both looking at the same problem.

Thanks!
Back to top
 
Leitor79
Posted: Friday, December 17, 2010 2:52:59 PM
Rank: Member
Groups: Member

Joined: 10/29/2010
Posts: 11
Of course.

This is the aspx code:
Quote:


<%@ Page Language="VB" AutoEventWireup="false" CodeFile="testgrid.aspx.vb" Inherits="testgrid" %>
<%@ 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>


<script type="text/javascript">

function GridUpdate(gridItem, save) {
var grid = gridItem.getGrid();
var item = grid.getSelectedItem();

var column = grid.getColumn(2);
column.setWidth(30);
grid.raiseItemCommandEvent(item.getIndex(), 'update');
}

function StartEdit(gridItem, save) {
setTimeout(function () {
var grid = gridItem.getGrid();
var item = grid.getSelectedItem();
var column = grid.getColumn(2);
column.setWidth(30);
grid.raiseItemCommandEvent(item.getIndex(), 'edit');
}, 1000);
}
</script>
</head>
<body>
<form id="form1" runat="server">

<asp:ScriptManager runat="server" ID="scr"></asp:ScriptManager>
<div style="width: 100%; height: 100%; margin: 0;">

<eo:Splitter runat="server" Width="300px" ID="Splitter1" BorderStyle="Solid" DividerSize="11"
BorderWidth="1px" BorderColor="#BED6E0" ControlSkinID="None" DividerImage="00080401"
DividerCenterImage="00080402" AutoFillWindow="True" Font-Bold="True"
Style="height: 100%; margin: 0;" ClientSideOnResized="OnSplitterResized">
<eo:SplitterPane ID="SplitterPane1" Width="20%" Height="100%" runat="server">
<div id="Contenedor1" style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; padding-top: 0px;">
<eo:SlideMenu ID="SlideMenu1" runat="server" ControlSkinID="None" SingleExpand="False">
<TopGroup Style-CssText="cursor:hand;font-family:arial;font-size:12px;">
<Items>
<eo:MenuItem Expanded="True" Text-Html="Veh">
<SubMenu>
<Items>
<eo:MenuItem >
</eo:MenuItem>
</Items>
</SubMenu>
</eo:MenuItem>
<eo:MenuItem Expanded="True" Text-Html="Zones">
<SubMenu>
<Items>
<eo:MenuItem CustomItemID="ItemZones">
</eo:MenuItem>
</Items>
</SubMenu>
</eo:MenuItem>
<eo:MenuItem Expanded="True" Text-Html="POI">
<SubMenu>
<Items>
<eo:MenuItem Text-Html="&lt;b&gt;Breaking News&lt;/b&gt;: any &lt;font color=&quot;red&quot;&gt;HTML&lt;/font&gt; code here.">
</eo:MenuItem>
</Items>
</SubMenu>
</eo:MenuItem>
</Items>
</TopGroup>
<LookItems>
<eo:MenuItem Height="22" ItemID="_TopLevelItem" LeftIcon-ExpandedUrl="00020006" LeftIcon-Url="00020007"
NormalStyle-CssText="background-color:White;border-bottom-color:#dddddd;border-bottom-style:solid;border-bottom-width:1px;color:#000099;"
SelectedStyle-CssText="background-color:#CDE6F7;color:#000099;">
</eo:MenuItem>
<eo:MenuItem ItemID="_Default" Text-NoWrap="False" Text-Padding-Left="20">
</eo:MenuItem>
</LookItems>
</eo:SlideMenu>
</div>
</eo:SplitterPane>
<eo:SplitterPane ID="SplitterPane2" runat="server" Height="100%">
<div style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; padding-top: 0px;
height: 100%">

</div>
</eo:SplitterPane>
</eo:Splitter>



<eo:CustomItem runat="server" ID="ItemZones">
<div>
<eo:CallbackPanel ID="CallbackPanel1" runat="server" Triggers="{ControlID:grdZones;Parameter:}">
<eo:Grid ID="grdZones" runat="server" AllowNewItem="True" BorderColor="#C7D1DF" ColumnHeaderAscImage="00050303"
ColumnHeaderDescImage="00050304" ColumnHeaderDividerImage="00050302" Font-Bold="False"
Font-Italic="False" Font-Names="Verdana" Font-Overline="False" Font-Size="9pt"
Font-Strikeout="False" Font-Underline="False" GridLineColor="199, 209, 223" GridLines="Both"
Height="250px" ItemHeight="19" Width="726px" ClientSideAfterEditItem="GridUpdate"
ClientSideBeforeEditItem="StartEdit">
<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; color:#336699;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"
runat="server">
<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" runat="server"
TextBoxStyle-CssText="BORDER-RIGHT: #7f9db9 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #7f9db9 1px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #7f9db9 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #7f9db9 1px solid;">
</MaskedEdit>
</eo:MaskedEditColumn>
</ColumnTemplates>
<Columns>
<eo:ButtonColumn Width="30" ButtonType="LinkButton" ButtonText="<img src='Images/go.ico'/>">
<ButtonStyle CssText="" />
</eo:ButtonColumn>
<eo:TextBoxColumn Width="125" HeaderText="Zona">
</eo:TextBoxColumn>
<eo:EditCommandColumn CancelText="<img src='Images/cancelar.ico'/>" EditText="<img src='Images/edit.ico'/>"
UpdateText="<img src='Images/aceptar.ico'/>" Width="30">
</eo:EditCommandColumn>
<eo:DeleteCommandColumn DeleteText="<img src='Images/recycle.ico'/>" Width="30">
</eo:DeleteCommandColumn>
</Columns>
<ColumnHeaderStyle CssText="background-image:url('00050301');padding-left:8px;padding-top:2px;font-weight: bold;color:white;" />
</eo:Grid>
</eo:CallbackPanel>
</div>
</eo:CustomItem>

</div>
</form>

</body>
</html>




and the code behind code:
Quote:


Partial Class testgrid
Inherits System.Web.UI.Page


Protected Sub grdVehiculos_ItemCommand(ByVal sender As Object, ByVal e As EO.Web.GridCommandEventArgs) Handles grdZones.ItemCommand


System.Diagnostics.Debug.Print("Command :" & e.CommandName & ", " & e.Item.Key.ToString)


End Sub

End Class



Just click the edit button on the grid, and the problem will show.

And yes; the grid is inside a splitter; but the code works this way (inside the splitter) just removing the callbackpanel1.


Regards!
Back to top
 
eo_support
Posted: Friday, December 17, 2010 3:33:44 PM
Rank: Administration
Groups: Administration

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

The issue occurs because raiseItemCommandEvent was re-entered. When StartEdit calls raiseItemCommandEvent, the function tries to leave edit mode first, that triggers GridUpdate, which in turn calls raiseItemCommandEvent again. In order to avoid the problem, you must prevent raiseItemCommandEvent being called again inside another raiseItemCommandEvent call.

Thanks!
Back to top
 
Leitor79
Posted: Friday, December 17, 2010 3:49:28 PM
Rank: Member
Groups: Member

Joined: 10/29/2010
Posts: 11
Ok.

Do you have a suggestion to prevent that? Or maybe calling another server function, instead of using riseitemcommandevent, from the StartEdit function will do the trick?

Regards!

eo_support wrote:
Hi,

The issue occurs because raiseItemCommandEvent was re-entered. When StartEdit calls raiseItemCommandEvent, the function tries to leave edit mode first, that triggers GridUpdate, which in turn calls raiseItemCommandEvent again. In order to avoid the problem, you must prevent raiseItemCommandEvent being called again inside another raiseItemCommandEvent call.

Thanks!
Back to top
 
eo_support
Posted: Friday, December 17, 2010 3:56:53 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
The point is you should not be trying to call back to the server while you are already in the middle of calling back to the server --- doing so is a logical mistake and you should fix that logic error instead of trying to find another method to call. It doesn't matter which method you call. As long as the underlying logic error is not fixed you are going to run into strange problems like this one.

Thanks
Back to top
 
Leitor79
Posted: Friday, December 17, 2010 4:07:51 PM
Rank: Member
Groups: Member

Joined: 10/29/2010
Posts: 11
Ok, if you put it that way, I see it's wrong. I didn't thought it that way; to me, the "ClientSideAfterEditItem" was before the server callback (maybe for the "after" word), besides, the server callback could be not-triggered while in edit (using the cancel button in the EditCommandColumn)

I'll try to work this around in some other way.

Thank you very much for your help!


eo_support wrote:
The point is you should not be trying to call back to the server while you are already in the middle of calling back to the server --- doing so is a logical mistake and you should fix that logic error instead of trying to find another method to call. It doesn't matter which method you call. As long as the underlying logic error is not fixed you are going to run into strange problems like this one.

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.