How to call server side a direct method from ext.net gridpanel?

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();

        }

    }