What's New?

[CLOSED] Cell Context Menu for a GridPanel

  1. #1
    Feb 01, 2013, 5:53 PM

    [CLOSED] Cell Context Menu for a GridPanel

    Hi,
    I'm trying to do a copy function for a cell value in a GridPanel.

    I could display a context menu, but could not read right clicked cell value after.

    So the end result is to be able to copy a value of a cell, which was right clicked.

    ----------
    or alternatively make gridpanel cells selectable (not editable, as it confuses users).

    Thank you
    Last edited by Daniil; Feb 05, 2013 at 4:21 AM. Reason: [CLOSED]
  2. #2
    Feb 01, 2013, 8:56 PM
    Hello!

    Take a look at the following example:

    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.Store1.DataSource = this.Data;
            this.Store1.DataBind();
        }
    }

    private object[] Data
    {
        get
        {
            return new object[]
            {
                new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" }
            };
        }
    }
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET Examples</title>

    <style>
        .x-grid-row-over .x-grid-cell-inner {
            font-weight : bold;
        }
    </style>

    <script>
        var template = '<span style="color:{0};">{1}</span>';

        var change = function (value) {
            return Ext.String.format(template, (value > 0) ? "green" : "red", value);
        };

        var pctChange = function (value) {
            return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
        };
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" />
    
    <ext:GridPanel 
        ID="GridPanel1"
        runat="server" 
        Title="Array Grid" 
        Width="600" 
        Height="350">
        <Store>
            <ext:Store ID="Store1" runat="server">
                <Model>
                    <ext:Model runat="server">
                        <Fields>
                            <ext:ModelField Name="company" />
                            <ext:ModelField Name="price" Type="Float" />
                            <ext:ModelField Name="change" Type="Float" />
                            <ext:ModelField Name="pctChange" Type="Float" />
                            <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
        </Store>
        <ColumnModel>
            <Columns>
                <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
                <ext:Column runat="server" Text="Price" DataIndex="price">                  
                    <Renderer Format="UsMoney" />
                </ext:Column>
                <ext:Column runat="server" Text="Change" DataIndex="change">
                    <Renderer Fn="change" />
                </ext:Column>
                <ext:Column runat="server" Text="Change" DataIndex="pctChange">
                    <Renderer Fn="pctChange" />
                </ext:Column>
                <ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" />
            </Columns>            
        </ColumnModel>       
        <SelectionModel>
            <ext:RowSelectionModel runat="server" />
        </SelectionModel>
        <Listeners>
            <ItemContextMenu Handler="e.preventDefault(); #{GridContextMenu}.dataRecord = this.store.getAt(index);#{GridContextMenu}.showAt(e.getXY());" ></ItemContextMenu>
        </Listeners>
    </ext:GridPanel>
    
    <ext:Menu ID="GridContextMenu" runat="server">
        <Items>
            <ext:MenuItem runat="server" Text="Copy">
                <Listeners>
                    <Click Handler="Ext.Msg.alert(this.parentMenu.dataRecord.data.company, 'Copy');" />
                </Listeners>
            </ext:MenuItem>
            <ext:MenuItem runat="server" Text="Paste">
                <Listeners>
                    <Click Handler="Ext.Msg.alert(this.parentMenu.dataRecord.data.company, 'Paste');" />
                </Listeners>
            </ext:MenuItem>
        </Items>
    </ext:Menu>
</body>
</html>
  3. #3
    Feb 01, 2013, 9:18 PM
    Thanks, but what i am actually looking is top copy cell value which was right clicked, not the first row value.

    So if i right click on "price" field, i need to copy price rather than a company name.
  4. #4
    Feb 01, 2013, 10:19 PM
    Please, try the following sample:

    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.Store1.DataSource = this.Data;
            this.Store1.DataBind();
        }
    }

    private object[] Data
    {
        get
        {
            return new object[]
            {
                new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" }
            };
        }
    }
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET Examples</title>

    <style>
        .x-grid-row-over .x-grid-cell-inner {
            font-weight : bold;
        }
    </style>

    <script>
        var template = '<span style="color:{0};">{1}</span>';

        var change = function (value) {
            return Ext.String.format(template, (value > 0) ? "green" : "red", value);
        };

        var pctChange = function (value) {
            return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
        };
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" SourceFormatting="True" />
    
    <ext:GridPanel 
        ID="GridPanel1"
        runat="server" 
        Title="Array Grid" 
        Width="600" 
        Height="350">
        <Store>
            <ext:Store ID="Store1" runat="server">
                <Model>
                    <ext:Model runat="server">
                        <Fields>
                            <ext:ModelField Name="company" />
                            <ext:ModelField Name="price" Type="Float" />
                            <ext:ModelField Name="change" Type="Float" />
                            <ext:ModelField Name="pctChange" Type="Float" />
                            <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
        </Store>
        <ColumnModel>
            <Columns>
                <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
                <ext:Column runat="server" Text="Price" DataIndex="price">                  
                    <Renderer Format="UsMoney" />
                </ext:Column>
                <ext:Column runat="server" Text="Change" DataIndex="change">
                    <Renderer Fn="change" />
                </ext:Column>
                <ext:Column runat="server" Text="Change" DataIndex="pctChange">
                    <Renderer Fn="pctChange" />
                </ext:Column>
                <ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" />
            </Columns>
        </ColumnModel>
        <View>
            <ext:GridView runat="server">
                <Listeners>
                    <CellContextMenu Handler="
            e.preventDefault(); 
            #{GridContextMenu}.cellTextContent = cell.textContent;#{GridContextMenu}.showAt(e.getXY());"></CellContextMenu>
                </Listeners>
            </ext:GridView>
        </View>       
        <SelectionModel>
            <ext:RowSelectionModel runat="server" />
        </SelectionModel>
    </ext:GridPanel>
    
    <ext:Menu ID="GridContextMenu" runat="server">
        <Items>
            <ext:MenuItem runat="server" Text="Copy">
                <Listeners>
                    <Click Handler="Ext.Msg.alert(this.parentMenu.cellTextContent, 'Copy');" />
                </Listeners>
            </ext:MenuItem>
            <ext:MenuItem runat="server" Text="Paste">
                <Listeners>
                    <Click Handler="Ext.Msg.alert(this.parentMenu.cellTextContent, 'Paste');" />
                </Listeners>
            </ext:MenuItem>
        </Items>
    </ext:Menu>
</body>
</html>
  5. #5
    Mar 06, 2013, 9:16 PM
    Awesome!
    thank you

Similar Threads

  1. Treeview with dynamic (context sensitive) context menu items
    By lake in forum 2.x Help
    Replies: 1
    Last Post: Jan 12, 2013, 4:30 AM
  2. [CLOSED] Code example for GridPanel context menu?
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 12
    Last Post: Feb 29, 2012, 3:17 PM
  3. GridPanel - Context Menu
    By Tbaseflug in forum 1.x Help
    Replies: 8
    Last Post: Sep 28, 2011, 4:01 PM
  4. [CLOSED] Context menu in gridpanel
    By Raynald_Fontaine in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 26, 2010, 2:57 PM
  5. [CLOSED] Context Menu for GridPanel rows
    By juanpablo.belli@huddle.com.ar in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 16, 2009, 2:18 PM

Tags for this Thread

Posting Permissions