How can I access to code behind using Syncfusion Grid ContextMenuItem?

[Hüseyin Cenk Özmutlu]

Hi, I have a syncfusion grid and I added context menu to this grid. My ContextMenuItems are Button1 and Button2. I want to access C# code behind when I click Button1 or Button2. Is it possible? For example; I clicked Button1, then this button calls a function from codebehind

                    <asp:Panel runat="server">

                        <ej:Grid ID="gridUrunListesi" runat="server" OnServerRecordDoubleClick="gridUrunListesi_ServerRecordDoubleClick" AllowResizing="True"  AllowResizeToFit="true" AllowScrolling="true" AllowGrouping="false" AllowFiltering="True" AllowMultiSorting="true" ColumnLayout="Auto" AllowReordering="true" AllowSearching="true" AllowSorting="True" AllowPaging="True" AllowCellMerging="True" DataSourceCachingMode="None" DataSourceID="SqlDataSource1" AllowTextWrap="false" Locale="tr-TR">

                            <ContextMenuSettings ContextMenuItems="Button1,Button2" DisableDefaultItems="False" EnableContextMenu="True">

                            </ContextMenuSettings>

                            <Columns>

                                <ej:Column Field="LOGICALREF" DataType="number" Visible="false" AllowEditing="False" IsIdentity="True" IsPrimaryKey="True" HeaderTooltip="LOGICALREF"></ej:Column>

                                <ej:Column Field="MALZEMETUR" DataType="string" HeaderText="MALZEME T&#220;R&#220;" HeaderTooltip="MALZEME T&#220;R&#220;"></ej:Column>

                                <ej:Column Field="MALZEMEKODU" DataType="string" HeaderText="MALZEME KODU" HeaderTooltip="MALZEME KODU"></ej:Column>

                                <ej:Column Field="MALZEMEADI" DataType="string" HeaderText="MALZEME ADI" HeaderTooltip="MALZEME ADI"></ej:Column>

                                <ej:Column Field="BIRIMI" DataType="string" HeaderText="BİRİMİ" HeaderTooltip="BİRİMİ"></ej:Column>

                                <ej:Column Field="OZELKODU" DataType="string" HeaderText="&#214;ZEL KODU" HeaderTooltip="&#214;ZEL KODU"></ej:Column>

                                <ej:Column Field="GRUPKODU" DataType="string" HeaderText="GRUP KODU" HeaderTooltip="GRUP KODU"></ej:Column>

                                <ej:Column Field="ELDEKIMIKTAR" DataType="number" HeaderText="ELDEKİ MİKTARI" HeaderTooltip="ELDEKİ MİKTARI"></ej:Column>

                                <ej:Column Field="GUID" DataType="string" Visible="false" HeaderTooltip="GUID"></ej:Column>

                                <ej:Column Field="VARYANT" DataType="string" HeaderText="DURUMU" HeaderTooltip="DURUMU"></ej:Column>

                            </Columns>

                            <EditSettings AllowEditing="False" AllowAdding="True" EditMode="Dialog" ShowConfirmDialog="true"></EditSettings>

                            <FilterSettings FilterType="Excel"></FilterSettings>

                            <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,update,cancel,search"></ToolbarSettings>

                            <PageSettings ShowDefaults="false" PageSize="12" />

                             <ClientSideEvents  ActionComplete="actionComplete"/>

                        </ej:Grid>

                        <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString='<%$ ConnectionStrings:LogoConnectionStringSUNUCU %>' SelectCommand="YON_URUNLISTELE" SelectCommandType="StoredProcedure"></asp:SqlDataSource>

                    </asp:Panel>

Attachment: contextmenu_f613d943.rar

[Thavasianand Sankaranarayanan]

Hi Hüseyin,  

 

Thanks for contacting Syncfusion support.  

Query: “How can I access to code behind using Syncfusion Grid ContextMenuItem?”

We have analyzed your query and achieved your requirement through “contextClick” event of Grid with ajax post is sent to server side(code behind).

Please refer the below code snippet.

<ClientSideEvents ContextClick="contextClick" />  

                <ContextMenuSettings EnableContextMenu="true"DisableDefaultItems="true">  

                    <CustomContextMenuItem>  

                        <ej:CustomContexMenuItems Id="clear"  Text="Button 1" />   

                    </CustomContextMenuItem>  

</ContextMenuSettings>

Ajax post is sent to server side along with the data required and at the serverside the data is progressed.

<script type="text/javascript">  

         function contextClick(args) {  

             if (args.text == "Button 1") {  

                 var obj = $(".e-grid").ejGrid("instance");  

                 var data = obj.getSelectedRecords();  

                $.ajax({  

                    type: "POST",  

                    url: "/Grid/GridFeatures.aspx/Data",  

                    datatype: "json",  

                    contentType: "application/json; charset=utf-8",  

                    data: JSON.stringify({ gid: JSON.stringify(data) }),  

                    success: function (result) {  

                    }  

                });  

  

  

                }                 

            }  

        </script>  

 

Server side operations:  

 

In below sample we have passed current selected  record details JSON object. At sever side the value is returned as below. Please refer below code snippet and screenshot.  

 

 

[WebMethod]  

        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]  

        public static string Data(string gid)  

        {  

           return gid;  

        }  

 

 

  

 

 

Above pictures indicate  that server side is hit through ajax post  which is called when custom context menu item is clicked.   

 

JSON stringified object is returned in server side. We have prepared sample based on above requirement . the same can be downloaded from below link.  

 

Link:https://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionASPNETApplication13_-_Copy1375687255-592248852.zip     

Regards, 

Thavasianand S. 

[Hüseyin Cenk Özmutlu]

Hi Thavasianand, 

Thanks for your reply. But, I didn't get my answer. My goal is clicking "Button 1" and make  Panel1.visible = true. I want to do actions with syncfusion grid's custom context menu items. This is an example of my request. 

Regards

<div id="ControlRegion">

        <div class="frame ">

            <div>

                <ej:Grid ID="Grid1" AllowSorting="true" AllowPaging="True"

                    Locale="en-US" runat="server">

                    <ClientSideEvents ContextClick="contextClick" />

                    <ContextMenuSettings EnableContextMenu="true" DisableDefaultItems="true">

                        <CustomContextMenuItem>

                            <ej:CustomContexMenuItems Id="clear" Text="Button 1" />

                        </CustomContextMenuItem>

                    </ContextMenuSettings>

                    <Columns>

                        <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" Width="90" />

                        <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="100" />

                        <ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" Width="110" />

                        <ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="90" Format="{0:C}" />

                        <ej:Column Field="OrderDate" HeaderText="Order Date" Width="100" TextAlign="Right" Format="{0:MM/dd/yyyy}" />

                        <ej:Column Field="ShipCity" HeaderText="Ship City" Width="100" />

                    </Columns>

                </ej:Grid>

            </div>

        </div>

        <asp:Panel ID="Panel1" Visible="false" runat="server">

            <asp:Button ID="Button1" runat="server" Text="Button" />

        </asp:Panel>

    </div>

------------------------------------------------------------

public void HelloWorld() 

{ 

  Panel1.visible = true;

} 

Attachment: SyncfusionASPNETApplication13__Copy1375687255_fa33c7ef.zip

[Thavasianand Sankaranarayanan]

Hi Hüseyin,  

 

To achieve your requirement, use __doPostBack function in your sample. The __doPostBack function will fires the Page_Load in server-side and in server-side we check the condition with parameter and display the panel1 in sample.   

 

Find the code example and sample:   

 

 

<script type="text/javascript">  

         function contextClick(args) {  

             if (args.text == "Button 1") {  

                 __doPostBack('btnNew', args.text)  

                }                 

            }  

</script>  

 

------------------------------------------  

 

protected void Page_Load(object sender, EventArgs e)  

        {  

            string parameter = Request["__EVENTARGUMENT"];  

            if (parameter == "Button 1")  

                this.Panel1.Visible = true;  

            BindDataSource();  

        }  

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionASPNETApplication13_(2)-1401238459-4405808.zip  

 

Regards,  

Thavasianand S.