|
|
Rank: Member
Groups: Member
Joined: 2/9/2010
Posts: 21
|
Hi,
There is a delete button in grid object, and set ClientSideOnItemCommand="OnItemDelete" in grid tag. By the way,I have ClientSideOnItemSelected="OnItemSelected",too.
javascript :
function OnItemDelete(grid, itemIndex, colIndex, commandName) {
if (window.confirm("Sure to delete data?")) {
grid.deleteItem(itemIndex);
}
}
function OnItemSelected(grid) {
//Get the selected item
var item = grid.getSelectedItem();
grid.raiseItemCommandEvent(item.getIndex(), "select");
}
when i click the delte button, got an error message:this.acy is null or not a object.
i find that ClientSideOnItemSelected is quicker to run than ClientSideOnItemCommand.
Is it the reason that i got an error?
How can i do?
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,088
|
Hi,
Can you provide a full test page that demonstrates the problem? (Make sure the test page contains only code that is needed to demonstrate the problem).
Thanks!
|
|
Rank: Member
Groups: Member
Joined: 2/9/2010
Posts: 21
|
Hi, I am sure that when ClientSideOnItemCommand and ClientSideOnItemSelected be set in grid at same time,ClientSideOnItemCommand will not be trigged. Test step: 1.Don't change any code and run this program directly, then click the delete button in grod. You will see javascript function OnItemSelected(grid) will be excuted only and Label1 has text from vb.net Sub Grid1_ItemCommand. But javascript function OnItemDelete don't be fire any more. 2.You can uncomment javascript OnItemSelected(grid) first line, and click the delete button in grod. You can really delete the seleted item this time. Here is the sample you can test. This sample is modified from http://demo.essentialobjects.com/Default.aspx?path=Grid\_i1\_i15
Code: HTML/ASPX
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="EO_TEST01.aspx.vb" Inherits="FORM_F1_EO_TEST01" %>
<%@ Register TagPrefix="eo" NameSpace="EO.Web" Assembly="EO.Web" %>
<!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>Untitled Page</title>
<script type="text/javascript">
function OnItemDelete(grid, itemIndex, colIndex, commandName) {
//Ask user to confirm the delete
alert("OnItemDelete is running");
if (window.confirm("Sure to delete data?")) {
grid.deleteItem(itemIndex);
}
}
function OnItemSelected(grid) {
//return; //When return from here function OnItemDelete can be fire.
alert("OnItemSelected is running");
var item = grid.getSelectedItem();
grid.raiseItemCommandEvent(item.getIndex(), "select");
}
</script>
<style type="text/css">
.negative_balance { BACKGROUND-COLOR: red }
</style>
</head>
<body>
<form id="form1" runat="server">
<p><eo:Grid id="Grid1" runat="server" FixedColumnCount="1" BorderColor="#7F9DB9" BorderWidth="1px"
ColumnHeaderDescImage="00050105" ColumnHeaderAscImage="00050104" GoToBoxVisible="True"
GridLineColor="220, 223, 228" GridLines="Both" ColumnHeaderDividerImage="00050103" Font-Size="8.75pt"
Font-Names="Tahoma" Width="380px" Height="200px" IsCallbackByMe="False" StyleIDField="StyleSet"
ClientSideOnItemCommand="OnItemDelete" ClientSideOnItemSelected="OnItemSelected" >
<ColumnHeaderStyle CssText="background-image:url('00050101');padding-left:8px;padding-top:3px;"></ColumnHeaderStyle>
<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"></TextBoxStyle>
</eo:TextBoxColumn>
</ColumnTemplates>
<FooterStyle CssText="padding-bottom:4px;padding-left:4px;padding-right:4px;padding-top:4px;"></FooterStyle>
<ContentPaneStyle 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;"></ContentPaneStyle>
<GoToBoxStyle CssText="BORDER-RIGHT: #7f9db9 1px solid; BORDER-TOP: #7f9db9 1px solid; BORDER-LEFT: #7f9db9 1px solid; WIDTH: 40px; BORDER-BOTTOM: #7f9db9 1px solid"></GoToBoxStyle>
<ItemStyles>
<eo:GridItemStyleSet>
<ItemHoverStyle CssText="background-color: whitesmoke"></ItemHoverStyle>
<SelectedStyle CssText="background-color:#316ac5;color:white;"></SelectedStyle>
<CellStyle CssText="padding-left:8px;padding-top:2px;"></CellStyle>
<ItemStyle CssText="background-color: white"></ItemStyle>
<FixedColumnCellStyle CssText="border-right: #d6d2c2 1px solid; padding-right: 10px; border-top: #faf9f4 1px solid; border-left: #faf9f4 1px solid; border-bottom: #d6d2c2 1px solid; background-color: #ebeadb; text-align: right; color: black;"></FixedColumnCellStyle>
</eo:GridItemStyleSet>
</ItemStyles>
<Columns>
<eo:RowNumberColumn Width="40"></eo:RowNumberColumn>
<eo:DeleteCommandColumn>
</eo:DeleteCommandColumn>
<eo:StaticColumn Width="120" SortOrder="Ascending" HeaderText="Account #" AllowSort="True" DataField="AccountNo"></eo:StaticColumn>
<eo:StaticColumn Width="150" StyleField="BalanceStyle" DataFormat="{0:N2}" HeaderText="Account Balance"
AllowSort="True" DataField="Balance"></eo:StaticColumn>
</Columns>
</eo:Grid></P>
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</form>
</body>
</html>
Code: Visual Basic.NET
Imports System.Data
Partial Class FORM_F1_EO_TEST01
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If IsPostBack Then
Return
End If
Grid1.DataSource = CreateTestTable()
Grid1.DataBind()
End Sub
Private Function CreateTestTable() As DataTable
' Create a test DataTable with an account number
' and an account balance row
Dim table As DataTable
Dim column As DataColumn
table = New DataTable("Accounts")
column = New DataColumn("AccountNo", GetType(String))
table.Columns.Add(column)
column = New DataColumn("Balance", GetType(Decimal))
table.Columns.Add(column)
column = New DataColumn("BalanceStyle", GetType(String))
table.Columns.Add(column)
' Add 100 rows
Dim row As DataRow
Dim random As New Random()
Dim i As Integer
For i = 0 To 99
row = table.NewRow()
'Create a fake account number
row("AccountNo") = String.Format("10000{0:00}", i)
'Create a random balance between -50 and 50
Dim balance As Decimal = random.Next(100) - 50
row("Balance") = balance
'Set "BalanceStyle" to "negative_balance" if
'the balance is blow zero. Since the "Balance"
'column's StyleField is set to "BalanceStyle",
'value set here will be populated into the
'cell's Style property and to be applied at
'runtime
If balance < 0 Then
row("BalanceStyle") = "negative_balance"
End If
table.Rows.Add(row)
Next i
Return table
End Function 'CreateTestTable
Protected Sub Grid1_ItemCommand(ByVal sender As Object, ByVal e As EO.Web.GridCommandEventArgs) Handles Grid1.ItemCommand
Label1.Text = "Grid1_ItemCommand is running"
End Sub
End Class
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,088
|
Hi,
I believe this is the normal. Once you call raiseItemCommandEvent, the page is posted back to the server. At that point the whole page is unloaded and reloaded again. So anything after raiseItemCommandEvent will no longer occur. If you want to have both, you must stop raising server event, which means you need to do both completely with JavaScript without going back to the server.
If you must call back to the server when item is selected, you can channel that through AJAX, which is very easy to do:
1. Put a CallbackPanel around your Label control (Note the Grid is still outside of the CallbackPanel);
2. Edit the CallbackPanel's Triggers property to include the Grid as a trigger;
This should automatically convert your raisesItemEvent to an AJAX call. Note you also need to remove the alert in your OnItemSelected because that interrupt the click event which triggers delete.
Thanks!
|
|
Rank: Member
Groups: Member
Joined: 2/9/2010
Posts: 21
|
Hi,
I think that you will know what cell type when user click down in grid.
When user click the delete or edit button in grid, don't trig ClientSideOnItemSelected event.
is it possible?
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,088
|
Arthur wrote:When user click the delete or edit button in grid, don't trig ClientSideOnItemSelected event.
is it possible? I believe it is technical possible but you will need to use raw HTML to do that. In another word, the Grid does not have any built-in support for it. You put whatever raw HTML (an image, a button, or whatever else you want to put in the cell) inside a Grid cell and then you handle all the events in your HTML directly. The Grid will still try to catch the mouse down event on the item so once you handle your event, you want to stop bubbling the event to the cell thus the Grid won't get it and won't trigger ClientSideOnItemSelected. We won't support any questions on such solutions though because it is primarily HTML/JavaScript coding and it really doesn't have much to do with the Grid except that your HTML is being placed inside a Grid cell. Thanks
|
|