We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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

3 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team July 26, 2017 01:46 PM UTC

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.  
 

Regards, 
Thavasianand S. 



HC Hüseyin Cenk Özmutlu August 1, 2017 06:49 AM UTC

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


TS Thavasianand Sankaranarayanan Syncfusion Team August 2, 2017 11:25 AM UTC

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();  
        }  
 
 
Regards,  
Thavasianand S. 


Loader.
Live Chat Icon For mobile
Up arrow icon