[CLOSED] Code example for GridPanel context menu?

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Code example for GridPanel context menu?

    Hi,

    Can you please provide a code sample for the problem discussed in http://forums.ext.net/showthread.php...ay-contextmenu? I need to select a GridPanel row on mouse right click and then present a context menu with a few menu items associated with JS handlers.

    Thanks,

    Vadym
    Last edited by Daniil; Feb 29, 2012 at 3:31 PM. Reason: [CLOSED]
  2. #2
    Quote Originally Posted by vadym.f View Post
    Hi,

    Can you please provide a code sample for the problem discussed in http://forums.ext.net/showthread.php...ay-contextmenu? I need to select a GridPanel row on mouse right click and then present a context menu with a few menu items associated with JS handlers.

    Thanks,

    Vadym
    There are code samples within the forum post you linked to, and there are links to other code samples within that thread.

    If you require a different code sample, please start off this thread with a simplified .aspx code sample demonstrating as much of the scenario as you can.

    http://forums.ext.net/showthread.php...ing-New-Topics
    http://forums.ext.net/showthread.php...ation-Required
    Geoffrey McGill
    Founder
  3. #3
    Hi Geoffrey,

    I followed the relevant links before creating the post. The TreePanel ColumnTree example at https://examples1.ext.net/#/TreePane...ed/ColumnTree/ doesn't seem to have any mention of the ContextMenu, unless I'm missing something there.

    The thread at http://forums.ext.net/showthread.php...ay-contextmenu deals with pre-Ext.net development I believe and the code there is fragmented.

    My problem here is rather trivial. I need to select a GridPanel row on the mouse right-click and present a Context menu. That's all. If you have a ready example at https://examples1.ext.net, please refer me there kindly.

    The code sample to start off is below, I need to select a grid row on right-click and make a call to a context menu similar to what I found in the old forum.

        <Listeners>
            <ContextMenu Handler="this.getSelectionModel().select(node);Coolite.AjaxMethods.FileView1.ShowMenu(node.id, e.getXY()[0], e.getXY()[1]);" />
        </Listeners>
    If the cursor is located outside the grid rows area, I need to recognize that fact by either not presenting a context menu or disabling it. Let me know if you need more info.

    Thanks,

    Vadym

    <%@ 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.DataBind();
            }
        }
     
        private void DataBind()
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[]
            {
                new object[] { "id1", DateTime.Now.ToString() },
                new object[] { "id2", DateTime.Now.ToString() },
                new object[] { "id3", DateTime.Now.ToString() }
            };
            store.DataBind();
        }
    </script>
     
    <!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 id="Head1" runat="server">
        <title>Ext.NET Example</title>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Reader>
                            <ext:ArrayReader IDProperty="ID">
                                <Fields>
                                    <ext:RecordField Name="ID" />
                                    <ext:RecordField Name="test" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column Header="ID" DataIndex="ID" />
                        <ext:Column Header="Test" DataIndex="test" Width="160" />
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModel1" SingleSelect="true" runat="server" />
                </SelectionModel>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  4. #4
  5. #5
    Quote Originally Posted by Daniil View Post
    That example was very helpful, thanks a lot Daniil!

    Would it also be possible not to present or "hide" a context menu in some circumstances, e.g. if the right click occurs in the rightmost empty area of the grid?
    I've attempted
    Ext.getCmp("Menu1").hidden = true;
    , which didn't work.
    I suspect this question is basic but the topic has been fairly new to me.

    Thanks,

    Vadym
  6. #6
    Then you should use the RowContextMenu event.

    Here is the example for Coolite 0.8.x. It should not be a problem for you to get it working in Ext.NET v1.
    http://forums.ext.net/showthread.php...ull=1#post5979
  7. #7
    Hi Daniil,

    Thanks for the suggestions! Here's the code sample that works almost as required for me:

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Import Namespace="System.Linq" %>
    <script runat="server">
        public class Test
        {
            public int Id { get; set; }
            public string Test1 { get; set; }
            public string Test2 { get; set; }
        }
    
        public static List<Test> MyData =
            new List<Test>()
            {
                new Test()
                {
                    Id=1,
                   Test1 = "test11",
                   Test2 = "test21 description",
                },
                new Test()
                {
                    Id=2,
                   Test1 = "test12",
                   Test2 = "test22 description",
                },
                new Test()
                {
                    Id=3,
                   Test1 = "test13",
                   Test2 = "test23 description",
                }
            };
    
        public void BindData()
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = MyData;
            store.DataBind();
        }
    
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.BindData();
            }
        }
    
    </script>
    <!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 id="Head1" runat="server">
        <title>Ext.Net Example</title>
        <script type="text/javascript">
            var onContextMenu = function (grid, e) {
                try {
                    if (typeof (grid.getSelectionModel().getSelected()) === "undefined") {
                        if (grid.view.findRowIndex(e.getTarget()) === false) {
                            RowContextMenu.items.each(
                                function (item) {
                                    item.disable();
                                });
                        }
                        else {
                            var rowIndex = grid.view.findRowIndex(e.getTarget());
                            grid.getSelectionModel().selectRow(rowIndex);
                            RowContextMenu.items.each(
                                function (item) {
                                    item.enable();
                                });
                        }
                    }
                    else {
                        if (grid.view.findRowIndex(e.getTarget()) === false) {
                            RowContextMenu.items.each(
                                function (item) {
                                    item.disable();
                                });
                        }
                        else {
                            RowContextMenu.items.each(
                                function (item) {
                                    item.enable();
                                });
                        }
                    }
    
                    e.preventDefault();
                }
                catch (ex) {
                    alert(ex.message);
                }
            };
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true" ContextMenuID="RowContextMenu"
            Width="420">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Reader>
                        <ext:JsonReader>
                            <Fields>
                                <ext:RecordField Name="Id" />
                                <ext:RecordField Name="Test1" />
                                <ext:RecordField Name="Test2" />
                            </Fields>
                        </ext:JsonReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column Header="Test1" DataIndex="Test1" Width="160" />
                    <ext:Column Header="Test2" DataIndex="Test2" Width="160" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" SingleSelect="true" ID="RowSelectionModel1">
                </ext:RowSelectionModel>
            </SelectionModel>
            <Listeners>
                <RowContextMenu Handler="e.preventDefault();
                                        #{RowContextMenu}.dataRecord=this.store.getAt(rowIndex);
                                        #{RowContextMenu}.showAt(e.getXY());
                                        this.getSelectionModel().selectRow(rowIndex);
                " />
                <ContextMenu Handler="onContextMenu(this, e);" />
            </Listeners>
        </ext:GridPanel>
        <ext:Menu ID="RowContextMenu" runat="server">
            <Items>
                <ext:MenuItem runat="server" ID="MenuItemEdit" Icon="PageEdit" Text="Edit">
                    <Listeners>
                        <Click Handler="alert(this.text + ' :: Id='+#{GridPanel1}.getSelectionModel().getSelected().get('Id'))" />
                    </Listeners>
                </ext:MenuItem>
                <ext:MenuItem runat="server" ID="MenuItemRefresh" Icon="ArrowRefresh" Text="Refresh">
                    <Listeners>
                        <Click Handler="alert(this.text + ' :: Id='+#{GridPanel1}.getSelectionModel().getSelected().get('Id'))" />
                    </Listeners>
                </ext:MenuItem>
            </Items>
        </ext:Menu>
        </form>
    </body>
    </html>
    The solution I came up with doesn't seem very elegant for several reason:
    1. Two GridPanel listeners are used to handle essentially the same events. Somehow, I didn't find a way to leverage only RowContextMenu listener
    2. I couldn't hide the context menu when it's invoked outside of the grid row
    3. When I tried to disable the whole Menu, its menu items remained clickable so I have to disable and then re-enable every individual menu item


    I would appreciate your feedback to improve on my approach.

    Thanks,

    Vadym
  8. #8
    According to your requirements you should not use ContextMenuID, RowContextMenu and ContextMenu at the same time.

    I've reduced your example to the below one.

    It should answer your questions #1 and #2.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        public class Test
        {
            public int Id { get; set; }
            public string Test1 { get; set; }
            public string Test2 { get; set; }
        }
    
        public static List<Test> MyData =
            new List<Test>()
            {
                new Test()
                {
                   Id=1,
                   Test1 = "test11",
                   Test2 = "test21 description",
                },
                new Test()
                {
                   Id=2,
                   Test1 = "test12",
                   Test2 = "test22 description",
                },
                new Test()
                {
                   Id=3,
                   Test1 = "test13",
                   Test2 = "test23 description",
                }
            };
    
        public void BindData()
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = MyData;
            store.DataBind();
        }
    
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.BindData();
            }
        }
    </script>
    
    <!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>Ext.Net Example</title>
        <script type="text/javascript">
            var onContextMenu = function (grid, rowIndex, e, menu) {
                e.preventDefault();
                menu.record = grid.getStore().getAt(rowIndex);
                menu.showAt(e.getXY());
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:GridPanel 
            ID="GridPanel1" 
            runat="server" 
            AutoHeight="true" 
            Width="420">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:JsonReader>
                            <Fields>
                                <ext:RecordField Name="Id" />
                                <ext:RecordField Name="Test1" />
                                <ext:RecordField Name="Test2" />
                            </Fields>
                        </ext:JsonReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test1" DataIndex="Test1" />
                    <ext:Column Header="Test2" DataIndex="Test2" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" SingleSelect="true" />
            </SelectionModel>
            <Listeners>
                <RowContextMenu Handler="onContextMenu(this, rowIndex, e, RowContextMenu);" />
            </Listeners>
        </ext:GridPanel>
        <ext:Menu ID="RowContextMenu" runat="server">
            <Items>
                <ext:MenuItem runat="server" Icon="PageEdit" Text="Edit" />
                <ext:MenuItem runat="server" Icon="ArrowRefresh" Text="Refresh" />
            </Items>
            <Listeners>
                <ItemClick Handler="alert(menuItem.text + ' : ' + this.record.data.Id);" />
            </Listeners>
        </ext:Menu>
    </body>
    </html>
    Please clarify the following:
    When I tried to disable the whole Menu, its menu items remained clickable so I have to disable and then re-enable every individual menu item
    with more details: when do you need to disable menu items? what about to just don't show a menu?
  9. #9
    Quote Originally Posted by Daniil View Post

    Please clarify the following:

    with more details: when do you need to disable menu items? what about to just don't show a menu?
    That would be ideal instead of disabling the context menu. I unfortunately couldn't find a way not to show a context menu on mouse right-click. I need that behavior when a right click is made outside of the grid row area. E.g., on the column header or in the empty auto-extended area if the grid occupies the whole panel.

    Thanks,

    Vadym
  10. #10
    Regarding to my last example:

    1. Please add:
    <ContextMenu Handler="e.preventDefault();" />
    2. Remove
    e.preventDefault();
    from the onContextMenu function.
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] GridPanel - Context Menu (deleting gridpanel row)
    By digitek in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 27, 2012, 8:22 AM
  2. GridPanel - Context Menu
    By Tbaseflug in forum 1.x Help
    Replies: 8
    Last Post: Sep 28, 2011, 4:01 PM
  3. [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
  4. Gridpanel Editor - Textfield Context Menu
    By Tbaseflug in forum 1.x Help
    Replies: 7
    Last Post: Sep 15, 2009, 8:43 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

Posting Permissions