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.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

131728 Jul 25,2017 08:53 AM Aug 2,2017 07:25 AM ASP.NET Web Forms 3
loading
Tags: Grid
Hüseyin Cenk Özmutlu
Asked On July 25, 2017 08:53 AM

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 [Syncfusion]
Replied On July 26, 2017 09:46 AM

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. 


Hüseyin Cenk Özmutlu
Replied On August 1, 2017 02:49 AM

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 [Syncfusion]
Replied On August 2, 2017 07:25 AM

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;