This is a migrated thread and some comments may be shown as answers.

ContextMenu over a specified column

6 Answers 179 Views

Grid

This is a migrated thread and some comments may be shown as answers.

rck asked on 20 Mar 2009, 01:15 PM

Hello,

i have a radgrid and when i right click a row i am able to show radcontextmenu . What i am trying to do is i want to show the context menu only if i click the 3. column index of each row. if i click other columns i want to show the standard context menu of current explorer.

i tried the example

http://www.telerik.com/community/code-library/aspnet-ajax/general/contextmenu-over-a-specified-column-in-radgrid.aspx

but it didnt work for me cause "source" and "cell" values are never same.

i have this :

RadControls version	RadControls for ASP.Net Ajax
.NET version	3,5
Visual Studio version	2008
programming language	C#

Can you help me about this.
Thanks in advance.

6 Answers, 1 is accepted

answered on 23 Mar 2009, 05:54 PM

contextmenu.zip

Hello Recep,

Please test the attached sample project and let me know if you have more questions.

Best regards,
Daniel
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

answered on 24 Mar 2009, 07:28 AM

hello,

thank you for the reply. i solved the problem and it is similar to your solution. i extended the case and i show different radcontextmenu for different columns in the radgrid. for this, i used the below js code

telerik:RadCodeBlock ID="Block" runat="server">

//<![CDATA[

var index;

function RowContextMenu(sender, eventArgs) {

var CallMenu = $find("<%= CallMenu.ClientID %>");

var InfoMenu = $find("<%= InfoMenu.ClientID %>");

CallMenu.hide();

InfoMenu.hide();

var domEvent = eventArgs.get_domEvent();

var gsmColumn = domEvent.target.id.indexOf("LblOwnerGsm");

var ownerIdColumn = domEvent.target.id.indexOf("LblOwnerId");

var ownerColumn = domEvent.target.id.indexOf("LblVendor");

index = eventArgs.get_itemIndexHierarchical();

var masterTable = sender.get_masterTableView();

masterTable.clearSelectedItems();

//select the current row

masterTable.selectItem(masterTable.get_dataItems()[index].get_element());

if (gsmColumn != "-1")//if clicked column is GSM Column

CallMenu.show(domEvent);

//show calling menu

else if (ownerIdColumn != "-1" || ownerColumn != "-1")//if clicked column is OwnerId Column or Owner Column

InfoMenu.show(domEvent);

//show info menu

else {//cancel the rowcontext event and let the common explorer context menu appear

eventArgs.set_cancel(

true);

return false;

}

$telerik.cancelRawEvent(domEvent);

}

//]]>

</script>

telerik:RadCodeBlock>

thanks..

answered on 24 Nov 2009, 07:52 AM

Hello,

I provided a sample project for you but i am not able to attach a .rar file

here is the code :

.aspx file

    
            <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head runat="server">  
        
                <title></title>  
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                    <asp:ScriptManager ID="ScMng" runat="server"></asp:ScriptManager> 
        
                    <table border="0" cellpadding="0" cellspacing="0" width="100%">  
        
                        <tr> 
        
                            <td> 
        
                                <telerik:RadGrid AllowPaging="false" AutoGenerateColumns="false" ID="TestGrd" runat="server">  
        
                                    <MasterTableView> 
        
                                        <Columns> 
        
                                            <telerik:GridBoundColumn DataField="RowID" HeaderText="Row ID"></telerik:GridBoundColumn> 
        
                                            <telerik:GridTemplateColumn HeaderText="Sample Column 1">  
        
                                                <ItemTemplate> 
        
                                                    <asp:Label ID="LblSample" runat="server" Text='<%#Eval("Sample1") %>'></asp:Label> 
        
                                                </ItemTemplate> 
        
                                            </telerik:GridTemplateColumn> 
        
                                            <telerik:GridTemplateColumn HeaderText="Sample Column 2">  
        
                                                <ItemTemplate> 
        
                                                    <asp:Label ID="LblTest" runat="server" Text='<%#Eval("Sample2") %>'></asp:Label> 
        
                                                </ItemTemplate> 
        
                                            </telerik:GridTemplateColumn> 
        
                                        </Columns> 
        
                                    </MasterTableView> 
        
                                    <ClientSettings> 
        
                                        <ClientEvents OnRowContextMenu="RowContextMenu"/>  
        
                                        <Selecting AllowRowSelect="true" /> 
        
                                    </ClientSettings>   
        
                                </telerik:RadGrid> 
        
                            </td> 
        
                        </tr> 
        
                    </table> 
        
                    <telerik:RadContextMenu ID="SampleMenu" runat="server" Flow="Horizontal">                          
        
                        <ExpandAnimation Type="None" /> 
        
                        <DefaultGroupSettings ExpandDirection="Auto" Flow="Vertical" /> 
        
                        <CollapseAnimation Type="None" /> 
        
                        <Items> 
        
                            <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Sample 1">  
        
                                <GroupSettings ExpandDirection="Auto" Flow="Vertical" /> 
        
                            </telerik:RadMenuItem>   
        
                            <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Sample 2">  
        
                                <GroupSettings ExpandDirection="Auto" Flow="Vertical" /> 
        
                            </telerik:RadMenuItem>   
        
                            <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Sample 3">  
        
                                <GroupSettings ExpandDirection="Auto" Flow="Vertical" /> 
        
                            </telerik:RadMenuItem>                    
        
                        </Items> 
        
                    </telerik:RadContextMenu> 
        
                    <telerik:RadContextMenu ID="TestMenu" runat="server" Flow="Horizontal">                          
        
                        <ExpandAnimation Type="None" /> 
        
                        <DefaultGroupSettings ExpandDirection="Auto" Flow="Vertical" /> 
        
                        <CollapseAnimation Type="None" /> 
        
                        <Items> 
        
                            <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Test 1">  
        
                                <GroupSettings ExpandDirection="Auto" Flow="Vertical" /> 
        
                            </telerik:RadMenuItem>   
        
                            <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Test2 2">  
        
                                <GroupSettings ExpandDirection="Auto" Flow="Vertical" /> 
        
                            </telerik:RadMenuItem>                    
        
                        </Items> 
        
                    </telerik:RadContextMenu> 
        
                    <telerik:RadCodeBlock ID="Block" runat="server">  
        
                        <script type="text/javascript">  
        
                            //<![CDATA[ 
        
                            var index; 
        
                            function RowContextMenu(sender, eventArgs) { 
        
                                var sampleMenu = $find("<%= SampleMenu.ClientID %>"); 
        
                                var testMenu = $find("<%= TestMenu.ClientID %>"); 
        
                                sampleMenu.hide(); 
        
                                testMenu.hide(); 
        
                                var domEvent = eventArgs.get_domEvent(); 
        
                                var sampleColumn = domEvent.target.id.indexOf("LblSample"); 
        
                                var testColumn = domEvent.target.id.indexOf("LblTest");        
        
                                index = eventArgs.get_itemIndexHierarchical(); 
        
                                var masterTable = sender.get_masterTableView(); 
        
                                masterTable.clearSelectedItems(); 
        
                                var dataItem = masterTable.get_dataItems()[index]; 
        
                                masterTable.selectItem(masterTable.get_dataItems()[index].get_element()); 
        
                                var cell = masterTable.get_dataItems()[index].get_element().cells[0]; 
        
                                if (sampleColumn != "-1")//if clicked column is sample Column 
        
                                    sampleMenu.show(domEvent); //show sample menu 
        
                                else if (testColumn != "-1")//if clicked column is test column 
        
                                    testMenu.show(domEvent); //show test menu                    
        
                                else {//cancel the rowcontext event and let the common explorer context menu appear 
        
                                    eventArgs.set_cancel(true); 
        
                                    return false; 
        
                                } 
        
                                $telerik.cancelRawEvent(domEvent); 
        
                            } 
        
                            //]]> 
        
                        </script> 
        
                    </telerik:RadCodeBlock> 
        
                </form> 
        
            </body> 
        
            </html>

.aspx.cs file

    
            using System;  
        
            using System.Web.UI;  
        
            public partial class _Default : System.Web.UI.Page   
        
            {  
        
                class Test_Data  
        
                {  
        
                    private int _RowID;  
        
                    private string _Sample1;  
        
                    private string _Sample2;  
        
                    public string Sample2  
        
                    {  
        
                        get { return _Sample2; }  
        
                        set { _Sample2 = value; }  
        
                    }  
        
                    public string Sample1  
        
                    {  
        
                        get { return _Sample1; }  
        
                        set { _Sample1 = value; }  
        
                    }  
        
                    public int RowID  
        
                    {  
        
                        get { return _RowID; }  
        
                        set { _RowID = value; }  
        
                    }  
        
                }  
        
                protected void Page_Load(object sender, EventArgs e)  
        
                {  
        
                    if (!Page.IsPostBack)  
        
                        Bind_Data();  
        
                }  
        
                private void Bind_Data()  
        
                {  
        
                    Test_Data[] myTestData = new Test_Data[10];  
        
                    for (int i = 0; i < 10; i++)  
        
                    {  
        
                        myTestData[i] = new Test_Data();  
        
                        myTestData[i].RowID = i;  
        
                        myTestData[i].Sample1 = string.Format("Sample {0}",i);  
        
                        myTestData[i].Sample2 = string.Format("Test {0}", i);  
        
                    }  
        
                    TestGrd.DataSource = myTestData;  
        
                    TestGrd.DataBind();  
        
                }  
        
            }

Tested environment

RadControls for ASPNET AJAX Q3 2008
File version : 2008.03.1314.35
ASP.NET Framework version : 3.5
Visual Studio 2008
I.E version : 7 & 8 (in i.e version 8, common internet explorer context menu is not appearing for RowID column in the sample and it is a known bug for me :) )

i wish it can be helpful for you.

answered on 24 Nov 2009, 10:11 AM

hi,

i didnt understand your question well but you can use custom skin for radgrid by using these properties.

Skin

="MyCustomSkin" EnableEmbeddedSkins="false"

in order to use that you should create your own skin file , you can find documents and forum help by searching.

if you want to change only one or two column backcolor or something else, you can use ItemStyle properties like these

    
            <telerik:GridTemplateColumn ItemStyle-BackColor="Red" ItemStyle-ForeColor="Aqua" HeaderText="Sample Column 2">  
        
                                                <ItemTemplate> 
        
                                                    <asp:Label ID="LblTest" runat="server" Text='<%#Eval("Sample2") %>'></asp:Label> 
        
                                                </ItemTemplate> 
        
                                            </telerik:GridTemplateColumn>