In ext.net you can call server side direct method from your
client side code. This is an excellent way to doing jobs on server side from
client side java script function and grid panel, button or other controls. Here
we will see how we can do this job done in a grid panel.
In the following code snippet will call a direct method against
an action in a grid panel action column. Also we will pass some arguments from
our grid to direct method that we require for data manipulation on server side.
Let see code for grid panel:
<ext:GridPanel ID="gpList" runat="server" StripeRows="true" Title="BO List" AutoExpandColumn="name"
Collapsible="true"
AnchorHorizontal="100%"
Height="350">
<Store>
<ext:Store ID="gpListStore"
runat="server"
OnRefreshData="gpListStore_RefreshData"
OnSubmitData="gpListStore_SubmitData">
<Reader>
<ext:JsonReader IDProperty="cno">
<Fields>
<ext:RecordField Name="dividendyear"
/>
<ext:RecordField Name="declareid"
/>
<ext:RecordField Name="wno" />
<ext:RecordField Name="name" />
<ext:RecordField Name="boid" />
<ext:RecordField Name="shares"
/>
<ext:RecordField Name="dividendM"
/>
<ext:RecordField Name="taxrate"
/>
<ext:RecordField Name="taxamt"
/>
<ext:RecordField Name="netamt"
/>
<ext:RecordField Name="actionid"
/>
<ext:RecordField Name="status"
/>
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1"
runat="server">
<Columns>
<ext:RowNumbererColumn />
<ext:Column ColumnID="cdeclareid"
Header="Declare
Id" DataIndex="declareid" Width="70" />
<ext:Column ColumnID="cdividendyear"
Header="Year"
DataIndex="dividendyear"
Width="50">
</ext:Column>
<ext:Column ColumnID="cBoid"
Header="Boid"
DataIndex="boid"
Width="130"
/>
<ext:Column ColumnID="cname"
Header="Name"
DataIndex="name"
/>
<ext:Column ColumnID="cshares"
Header="Shares"
DataIndex="shares"
Width="50"
/>
<ext:Column ColumnID="cdividendM"
Header="Dividend"
DataIndex="dividendM"
Width="50"
/>
<ext:Column ColumnID="ctaxrate"
Header="Tax
Rate" DataIndex="taxrate" Width="50" />
<ext:Column ColumnID="ctaxamt"
Header="Tax
Amt" DataIndex="taxamt" Width="50" />
<ext:Column ColumnID="cnetamt"
Header="Net
Amt" DataIndex="netamt" Width="50" />
<ext:Column ColumnID="cStatus"
Header="Status"
DataIndex="status"
/>
<ext:CommandColumn Header="Action"
Width="90">
<Commands>
<ext:GridCommand Icon="ApplicationViewDetail"
CommandName="ViewDetail">
<ToolTip
Text="View
Detail" />
</ext:GridCommand>
<ext:CommandSeparator />
<ext:GridCommand Icon="AsteriskRed"
CommandName="Action">
<ToolTip
Text="Action"
/>
</ext:GridCommand>
<ext:CommandSeparator />
<ext:GridCommand Icon="Connect"
CommandName="Communication">
<ToolTip
Text="Communication
with people." />
</ext:GridCommand>
</Commands>
</ext:CommandColumn>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CheckboxSelectionModel
ID="CheckboxSelectionModel1"
runat="server"
/>
</SelectionModel>
<BottomBar>
<ext:PagingToolbar ID="PagingToolBar1"
runat="server"
PageSize="10"
/>
</BottomBar>
<Listeners>
<Command Handler="Ext.net.DirectMethods.ExecuteActionCommand(command,
record.data.wno, record.data.declareid, record.data.boid);" />
</Listeners>
<DirectEvents>
<AfterEdit OnEvent="gpList_AfterEdit">
<EventMask ShowMask="true"
Target="This"
/>
<ExtraParams>
<ext:Parameter Name="field" Value="e.field" Mode="Raw" />
<ext:Parameter Name="id" Value="e.record.id"
Mode="Raw"
/>
<ext:Parameter Name="record"
Value="e.record.data"
Mode="Raw"
Encode="true"
/>
</ExtraParams>
</AfterEdit>
</DirectEvents>
</ext:GridPanel>
Direct method is called using listener in ext.net which always woks
at client side.
<Listeners>
<Command Handler="Ext.net.DirectMethods.ExecuteActionCommand(command,
record.data.wno, record.data.declareid, record.data.boid);" />
</Listeners>
Here in Action column we have three action commands:
1.
ViewDetail
2.
Action
3.
Communication
These commands will pass to parameter command and on server side we
will decide which action actually performed. Server side code is here:
[DirectMethod]
public void
ExecuteActionCommand(string command, string wno, string declareid, string
boid)
{
if (command == "ViewDetail")
{
//Display bo holder detail info
var win = new Window
{
ID = "BOWindow",
Title = "Bo Detail",
Width = Unit.Pixel(800),
Height = Unit.Pixel(380),
Modal = true,
Collapsible = true,
Maximizable = false,
Hidden = false,
};
win.AutoLoad.Url = "~/BoMasterDetails.aspx?boid="
+ boid + "&declareid=" +
declareid;
win.AutoLoad.Mode = LoadMode.IFrame;
win.Render(this.Form); win.Dispose();
}
else if (command == "Action")
{
var win = new Window
{
ID = "ActionWindow",
Title = "Corporate Action",
Width = Unit.Pixel(800),
Height = Unit.Pixel(550),
Modal = true,
Collapsible = true,
Maximizable = false,
Hidden = false,
};
win.AutoLoad.Url = "~/ActionLogEntryPopup.aspx?wno="
+ wno + "&boid=" + boid + "&declareid=" + declareid;
win.AutoLoad.Mode = LoadMode.IFrame;
win.Render(this.Form); win.Dispose();
}
else if (command == "Communication")
{
dividend div = new
dividendBLL().dividend_GetAll_By_wno(wno).FirstOrDefault();
var win = new Window
{
ID = "CommWindow",
Title = "Communication",
Width = Unit.Pixel(800),
Height = Unit.Pixel(550),
Modal = true,
Collapsible = true,
Maximizable = false,
Hidden = false,
};
win.AutoLoad.Url = "~/CommunicationLogEntryPopup.aspx?wno="
+ wno + "&boid=" + boid + "&declareid=" + declareid;
win.AutoLoad.Mode = LoadMode.IFrame;
win.Render(this.Form); win.Dispose();
}
}
