How to add Right Click menu to row Gridview
Question
All replies
-
User283571144 posted
Hi alihusain_77,
According to your description, I suggest you could consider using jquery context to achieve your requirement.
You could create custom menu according to your requirement.
And you could fired the function according to the select value.
More details, you could refer to below codes sample:
Notice:
I modify the girdview without using datasource control:
Download the jquery context from Onedirve:
https://1drv.ms/u/s!At8k4dll_NA7g0Ydsis1E_xOGxoh
Aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RightMenuWithGridview.aspx.cs" Inherits="AspNetNormalIssue.Webform.RightMenuWithGridview" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> .customerRow { background-color: White; } .contextMenu{ width: 300px !important; } </style> <link href="ContextMenuScript/css/StyleSheet.css" rel="stylesheet" type="text/css" /> <link href="ContextMenuScript/css/confirm.css" rel="stylesheet" type="text/css" /> <link href="ContextMenuScript/css/jquery.contextMenu.css" rel="stylesheet" type="text/css" /> <script src="ContextMenuScript/js/jquery-1.2.6.min.js" type="text/javascript"></script> <script src="ContextMenuScript/js/jquery.siamplemodal-1.1.1.js" type="text/javascript"></script> <script src="ContextMenuScript/js/jquery.contextMenu.js" type="text/javascript"></script> <script type="text/javascript"> var GridRow; var LastAction; var lastRowindex; var LastGridId; $(document).ready(function () { AppenedCustomerRowClass('GridView1'); ContextMenu({ className: 'contextmenu-customwidth' }); }); function AppenedCustomerRowClass(GridId) { $('[id*=' + GridId + '] tr').each(function () { $(this).addClass('customerRow'); }); } function contextMenuWork(action, el, pos) { var rowindex = (el[0].rowIndex * 1); alert(rowindex); switch (action) { case "paste": { //you can call code behind function from following method, For this you need to set Script manager property as "EnablePageMethods = "true" var success = PageMethods.CallServerFunction(rowindex) alert("call from code-behind"); break; } case "cut": { break; } } return false; } function ContextMenu() { $(".customerRow").contextMenu({ menu: 'myMenu' }, function (action, el, pos) { contextMenuWork(action, el, pos); }); $(".openmenu").contextMenu({ menu: 'myMenu', leftButton: true }, function (action, el, pos) { contextMenuWork(action, el.parent("tr"), pos); }); } </script> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager> <!-- Right Click Menu --> <ul id="myMenu" class="contextMenu"> <li ><a href="#cut">Consider As Answer and -</a></li> <li ><a href="#paste">Consider As Request LetterID</a></li> </ul> <div> <asp:GridView ID="GridView1" runat="server" CssClass="Grid" CellPadding="4" ForeColor="#333333" GridLines="Vertical" BackColor="#99CCFF" BorderStyle="Solid" AutoGenerateColumns="False" EmptyDataText="لا توجد أي سجلات" AllowSorting="True"> <Columns> <asp:TemplateField HeaderText="الرابط"> <ItemTemplate> <%--<asp:HyperLink ID="AttachmentLink" runat="server" NavigateUrl='<%# "~/" & "PdfDirectory/" & ("Attachments") %>' Target="_blank" ImageUrl="~/Images/Attachment1.png" CssClass="HyperLinkStyle">--%> <asp:HyperLink ID="AttachmentLink" runat="server" Target="_blank" ImageUrl="~/Images/Attachment1.png" CssClass="HyperLinkStyle"> </asp:HyperLink> </ItemTemplate> <ItemStyle BorderWidth="1px" Width="3%" HorizontalAlign="Center" /> </asp:TemplateField> <asp:TemplateField HeaderText="مغلق" > <ItemTemplate> <asp:CheckBox ID="Closing" runat="server" /> </ItemTemplate> <ItemStyle BorderWidth="1px" Width="2%" HorizontalAlign="Center" Font-Size="20px" /> </asp:TemplateField> <asp:TemplateField HeaderText="الأهمية" Visible="false" > <ItemTemplate> <asp:Image ID="ImportanceLevel" runat="server" ImageUrl='<%# Eval("Importance") %>' CssClass="ImageFieldStyle" /> </ItemTemplate> <ItemStyle BorderWidth="1px" HorizontalAlign="Center" /> </asp:TemplateField> <asp:TemplateField HeaderText="الحالة" > <ItemTemplate> <asp:Label ID="Status" runat="server" CssClass="StatusFieldStyle" /> </ItemTemplate> <ItemStyle BorderWidth="1px" Width="25%" HorizontalAlign="Right" Font-Size="20px" /> </asp:TemplateField> <asp:TemplateField HeaderText="المهلة" > <ItemTemplate> <asp:Label ID="ReqAnsPed" runat="server" text='<%# Eval("RequiredAnsPeriod") %>' CssClass="RAPFieldStyle" /> </ItemTemplate> <ItemStyle BorderWidth="1px" Width="5%" HorizontalAlign="center" Font-Size="20px" /> </asp:TemplateField> <asp:TemplateField HeaderText="التاريخ" SortExpression="PostTime" > <ItemTemplate> <asp:Label ID="ShownDate" runat="server" text='<%# (Eval("PostTime"))%>' CssClass="DateFieldStyle" /> </ItemTemplate> <ItemStyle BorderWidth="1px" Width="10%" HorizontalAlign="center" /> </asp:TemplateField> <asp:TemplateField HeaderText="الموضوع" SortExpression="Subject"> <ItemTemplate> <asp:Label ID="SubjectField" runat="server" text='<%# Eval("Subject") %>' CssClass="SubjectFieldStyle" /> </ItemTemplate> <ItemStyle BorderWidth="1px" Width="20%" HorizontalAlign="right" /> </asp:TemplateField> <asp:TemplateField HeaderText="إلى" SortExpression="TargetName"> <ItemTemplate> <asp:Label ID="TargetField" runat="server" text='<%# Eval("TargetName") %>' CssClass="TargetFieldStyle" /> </ItemTemplate> <ItemStyle BorderWidth="1px" Width="15%" HorizontalAlign="right" /> </asp:TemplateField> <asp:TemplateField HeaderText="من" SortExpression="SourceName"> <ItemTemplate> <asp:Label ID="SourceField" runat="server" text='<%# Eval("SourceName") %>' CssClass="SourceFieldStyle" /> </ItemTemplate> <ItemStyle BorderWidth="1px" Width="15%" HorizontalAlign="right" /> </asp:TemplateField> <asp:TemplateField HeaderText="الرقم"> <ItemTemplate> <asp:HyperLink ID="HyperLink1" runat="server" Target="_blank" CssClass="RefFieldStyle" Text='<%# Eval("LetterID") %>'></asp:HyperLink> </ItemTemplate> <ItemStyle BorderWidth="1px" Width="5%" HorizontalAlign="Center" /> </asp:TemplateField> <asp:TemplateField> <HeaderStyle Height="20px" /> <ItemTemplate> <asp:RadioButton ID="GridView1_RadioButton" runat="server" AutoPostBack="True" GroupName="RadioGroup" OnCheckedChanged="GridView1_RadioButton_CheckedChanged" /> </ItemTemplate> <ItemStyle BorderWidth="1px" Width="2%" /> </asp:TemplateField> <asp:BoundField DataField="Attachments" Visible="false" SortExpression="Attachments" > </asp:BoundField> <asp:BoundField DataField="Importance" Visible="false" SortExpression="Importance" > </asp:BoundField> <asp:TemplateField Visible="false" > <ItemTemplate> <asp:Label ID="SourceIndx" runat="server" text='<%# Eval("Source") %>' Visible="false" /> </ItemTemplate> </asp:TemplateField> <asp:TemplateField Visible="false" > <ItemTemplate> <asp:Label ID="TargetIndx" runat="server" text='<%# Eval("Target") %>' Visible="false" /> </ItemTemplate> </asp:TemplateField> <asp:TemplateField Visible="false" > <ItemTemplate> <asp:Label ID="LatestPostField" runat="server" text='<%# Eval("LastPostTime")%>' Visible="false" /> </ItemTemplate> </asp:TemplateField> <asp:TemplateField Visible="false" > <ItemTemplate> <asp:Label ID="PTField" runat="server" text='<%# Eval("PostType") %>' Visible="false" /> </ItemTemplate> </asp:TemplateField> <asp:TemplateField Visible="false" > <ItemTemplate> <asp:Label ID="Late" runat="server" text='<%# Eval("Late") %>' Visible="false" /> </ItemTemplate> </asp:TemplateField> <asp:TemplateField Visible="false" > <ItemTemplate> <asp:Label ID="AnsweringLetterField" runat="server" text='<%# Eval("AnsweringLetterID")%>' Visible="false" /> </ItemTemplate> </asp:TemplateField> <asp:TemplateField Visible="false" > <ItemTemplate> <asp:Label ID="NoOfAttachedFiles" runat="server" Visible="false" /> </ItemTemplate> </asp:TemplateField> </Columns> <EditRowStyle BackColor="#999999" /> <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" /> <RowStyle BackColor="#F7F6F3" ForeColor="#333333" /> <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" /> <SortedAscendingCellStyle BackColor="#E9E7E2" /> <SortedAscendingHeaderStyle BackColor="#506C8C" /> <SortedDescendingCellStyle BackColor="#FFFDF8" /> <SortedDescendingHeaderStyle BackColor="#6F8DAE" /> <EmptyDataTemplate> <div class="EmptyDataRowStyle"> لا توجد أي سجلات </div> </EmptyDataTemplate> </asp:GridView> </div> <hr /> </form> </body> </html>Code-behind:
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { DataTable d1 = new DataTable(); d1.Columns.Add("Importance"); d1.Columns.Add("RequiredAnsPeriod"); d1.Columns.Add("PostTime"); d1.Columns.Add("Subject"); d1.Columns.Add("TargetName"); d1.Columns.Add("SourceName"); d1.Columns.Add("LetterID"); d1.Columns.Add("Source"); d1.Columns.Add("Target"); d1.Columns.Add("LastPostTime"); d1.Columns.Add("PostType"); d1.Columns.Add("Late"); d1.Columns.Add("AnsweringLetterID"); d1.Rows.Add("1", "2","3","4","5","6","7","8","9" ,"0" ,"11","12","13"); d1.Rows.Add("1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "11", "12", "13"); GridView1.DataSource = d1; GridView1.DataBind(); } } protected void GridView1_RadioButton_CheckedChanged(object sender, EventArgs e) { } [WebMethod] public static bool CallServerFunction(int a) { //you could do something in code-behind return true; }Result:
Best Regards,
Brando
