Originally Posted by
Daniil
Hi,
Welcome to Ext.NET!
Example
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test1" },
new object[] { "test2" },
new object[] { "test3" }
};
store.DataBind();
}
}
</script>
<!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>Ext.NET Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
<Store>
<ext:Store runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="test" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column Header="Test" DataIndex="test" />
<ext:CommandColumn>
<Commands>
<ext:GridCommand CommandName="Delete" Text="Delete" Icon="Delete" />
</Commands>
</ext:CommandColumn>
</Columns>
</ColumnModel>
<Listeners>
<Command Handler="if (command === 'Delete') {
alert('I am inside the Command listener');
this.deleteRecord(record);
}" />
</Listeners>
</ext:GridPanel>
<ext:Button runat="server" Text="Delete the first record emulating clicking on 'Delete' commamnd">
<Listeners>
<Click Handler="GridPanel1.fireEvent('command', 'Delete', GridPanel1.getStore().getAt(0));" />
</Listeners>
</ext:Button>
</form>
</body>
</html>
Thanks!!
This is allmost what I was looking except for one thing..
I am writing an automation testing project , I use selenium java webdriver to run javascript on the application being tested.
So I am not supposed to change the aspx or .cs files being tested (unless I realy have to). My javascript is totaly indipendent of the web application and is inserted after the webpage loaded to imulate different user tasks.
That being said,
The application being tested has no <Listeners><>declared as in your example , instead it is using
<DirectEvents>Command OnEvent="GridPanel_GroupSelection_Command_Clicked" > <ExtraParams>
<ext:Parameter Name="GroupID" Value="#{gridPanel_ContentGroups}.store.getAt(rowIndex).id" Mode="Raw" /> <ext:Parameter Name="GroupName" Value="#{gridPanel_ContentGroups}.store.getAt(rowIndex).data.Name" Mode="Raw" />
<ext:Parameter Name="GroupAuthorization" Value="#{gridPanel_ContentGroups}.store.getAt(rowIndex).data.Authorization" Mode="Raw" /
<ext:Parameter Name="Command" Mode="Raw" Value="command" />
</ExtraParams>
<Confirmation ConfirmRequest="true" Message="Are you sure you want to delete this group?" BeforeConfirm="return config.extraParams.Command == 'Delete';" />
</Command>
</DirectEvents>
Here is the full grid declaration that holds the above directevent (directevent are in bold)
<ext:GridPanel ID="gridPanel_ContentGroups" runat="server" Title="Content Groups" Region="West" Layout="Fit" Width="500" Frame="true" Border="false" AutoExpandColumn="Name" Cls="videoGroupsGrid excludeDirtyFieldCheck">
<View>
<ext:GridView ForceFit="true" />
</View>
<TopBar>
<ext:Toolbar ID="Toolbar2" runat="server" Cls="SKToolbar" >
<Items>
<ext:Button ID="Button_GridPanel_GroupSelection_AddGroup" runat="server" Text="New Group" Icon="Add" Cls="SKToolbarText" >
<DirectEvents>
<Click OnEvent="Button_GridPanel_GroupSelection_AddGroup_Click"/>
</DirectEvents>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" SingleSelect="true" runat="server">
<Listeners>
<BeforeRowSelect Fn="BeforeRowSelectHandler" />
</Listeners>
<SelectedRows>
<ext:SelectedRow RowIndex="0" />
</SelectedRows>
</ext:RowSelectionModel>
</SelectionModel>
<ColumnModel>
<Columns>
<ext:Column ColumnID="Name" Header="Name" DataIndex="Name" MenuDisabled="true"/>
<ext:CommandColumn Width="22" Fixed="true" MenuDisabled="true">
<Commands>
<ext:GridCommand Icon="Pencil" CommandName="Edit" ToolTip-Text="Modify" />
</Commands>
<PrepareToolbar Handler="return record.data.Name.toLowerCase() != 'unattached' && record.data.Name.toLowerCase() != 'dynamic channels'" />
</ext:CommandColumn>
<ext:CommandColumn Width="22" Fixed="true" MenuDisabled="true">
<Commands>
<ext:GridCommand Icon="Delete" CommandName="Delete" ToolTip-Text="Delete" />
</Commands>
<PrepareToolbar Handler="return record.data.Name.toLowerCase() != 'unattached' && record.data.Name.toLowerCase() != 'dynamic channels'" />
</ext:CommandColumn>
</Columns>
</ColumnModel>
<Store>
<ext:Store ID="store_Groups" runat="server">
<Reader>
<ext:JsonReader IDProperty="ID">
<Fields>
<ext:RecordField Name="ID" />
<ext:RecordField Name="Name" SortType="AsUCString" />
<ext:RecordField Name="Authorization" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
<DirectEvents>
<Command OnEvent="GridPanel_GroupSelection_Command_Clicked" >
<ExtraParams>
<ext:Parameter Name="GroupID" Value="#{gridPanel_ContentGroups}.store.getAt(rowIndex).id" Mode="Raw" />
<ext:Parameter Name="GroupName" Value="#{gridPanel_ContentGroups}.store.getAt(rowIndex).data.Name" Mode="Raw" />
<ext:Parameter Name="GroupAuthorization" Value="#{gridPanel_ContentGroups}.store.getAt(rowIndex).data.Authorization" Mode="Raw" /> <ext:Parameter Name="Command" Mode="Raw" Value="command" />
</ExtraParams>
<Confirmation ConfirmRequest="true" Message="Are you sure you want to delete this group?" BeforeConfirm="return config.extraParams.Command == 'Delete';" />
</Command>
</DirectEvents>
<Listeners>
<Resize Handler="applyPageSize(this)" Buffer="250" />
</Listeners>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="20" HideRefresh="true" Cls="SKToolbar">
</ext:PagingToolbar>
</BottomBar>
</ext:GridPanel>
</ext:LayoutColumn>
Having the above, what would be the way to access and click\activate the 'Delete' operation on a given row\record using javascript?
I hope the extra info I gave is helpfull and not cousing the opposite..
Again,Thanks for the great help.
