I have a simple grid with that has checkboxes and a details link.
I have a listener that listens for a click event (intenting to capture when a checkbox is checked or unchecked) and a command event that captures when someone clicks on the details link.
The problem is, when a user clicks on the details link, it causes two postbacks to the page, one for the command event (which is what I want) and then another one for the row click event (which is what I want to avoid).
How can I have the user click the Details link and only have one postback to the page without having to remove the click event which I need for when a user selects or deselects a checkbox?
<%@ Page Language="vb" AutoEventWireup="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not ExtNet.IsAjaxRequest Then
Dim data As New List(Of Object)
With data
.Add(New With {
.AccountID_in = 1,
.DisplayName = "Indiana Jones",
.AccountNumber_vc = "1232133",
.AccountType_vc = "IRA",
.MarketValue = 3122312.32})
.Add(New With {
.AccountID_in = 2,
.DisplayName = "Harrison Ford",
.AccountNumber_vc = "2223334",
.AccountType_vc = "CD",
.MarketValue = 4534534.33})
End With
GoodAccountsStore.DataSource = data
GoodAccountsStore.DataBind()
End If
End Sub
<DirectMethod()>
Public Sub DetailsClick()
Dim x As Integer = 1
End Sub
<DirectMethod()>
Public Sub RowSelect()
Dim x As Integer = 1
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
var onGridCommand = function (command, record) {
Ext.net.DirectMethods.DetailsClick();
};
var onGridRowSelect = function (el) {
Ext.net.DirectMethods.RowSelect();
};
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<div>
<ext:GridPanel ID="GoodAccountsGrid" Title="Accounts Eligible for Householding" runat="server"
Height="150" Collapsible="true" AutoExpandColumn="DisplayName">
<Store>
<ext:Store ID="GoodAccountsStore" runat="server">
<Reader>
<ext:JsonReader IDProperty="AccountID_in">
<Fields>
<ext:RecordField Name="AccountID_in">
</ext:RecordField>
<ext:RecordField Name="DisplayName" />
<ext:RecordField Name="AccountNumber_vc" />
<ext:RecordField Name="AccountType_vc" />
<ext:RecordField Name="MarketValue" Type="Float" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:ImageCommandColumn DataIndex="dummy" Align="Center" Hideable="false" Fixed="true" Width="60">
<Commands>
<ext:ImageCommand CommandName="Details" Text="Details" Style="color:Blue;padding-bottom:3px;" />
</Commands>
</ext:ImageCommandColumn>
<ext:Column Header="Description" Width="160" DataIndex="DisplayName" />
<ext:Column Header="Account Number" Width="150" DataIndex="AccountNumber_vc" />
<ext:Column Header="Account Type" Width="150" DataIndex="AccountType_vc" />
<ext:Column Header="Market Value" Width="150" DataIndex="MarketValue">
<Renderer Format="UsMoney" />
</ext:Column>
</Columns>
</ColumnModel>
<Listeners>
<Click Fn="onGridRowSelect" />
<Command Fn="onGridCommand" />
</Listeners>
<SelectionModel>
<ext:CheckboxSelectionModel ID="GoodSelectionModel" runat="server" />
</SelectionModel>
</ext:GridPanel>
</div>
</form>
</body>
</html>