ContextMenu over a specified column

7 posts, 0 answers
  1. rck
    rck avatar
    13 posts
    Member since:
    Sep 2006

    Posted 20 Mar 2009 Link to this post

    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.
  2. Daniel
    Admin
    Daniel avatar
    4946 posts

    Posted 23 Mar 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. rck
    rck avatar
    13 posts
    Member since:
    Sep 2006

    Posted 24 Mar 2009 Link to this post

    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">

     

     

    <script type="text/javascript">

     

     

    //<![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..

     

  5. Sai Krishna
    Sai Krishna avatar
    8 posts
    Member since:
    Nov 2009

    Posted 24 Nov 2009 Link to this post

    Hi rck,

    I am also facing the same problem. i want show diffrent context menu based on different column in a same RadGrid. Can you please provide the entire sample of this.

    thanks in advance

    sai
  6. rck
    rck avatar
    13 posts
    Member since:
    Sep 2006

    Posted 24 Nov 2009 Link to this post

    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.

  7. Sai Krishna
    Sai Krishna avatar
    8 posts
    Member since:
    Nov 2009

    Posted 24 Nov 2009 Link to this post

    thanks for the very instant response. it work great!!!
    is it possible to change particular columns color?

    -sai
  8. rck
    rck avatar
    13 posts
    Member since:
    Sep 2006

    Posted 24 Nov 2009 Link to this post

    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> 

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017