[OPEN] [#1838] EXT.NET 7 Grid Panel Context Menu

  1. #1

    [OPEN] [#1838] EXT.NET 7 Grid Panel Context Menu

    Dear,

    Please can you provide me an example about how to add a context menu to <ext-gridpanel>.
    Noting that I tried the following Code but with no success:

    
        <ext-gridpanel title="Task Type Grid" width="1150" height="450" headerPosition="Left">
            <store>
                <ext-store data="@GridData2">
                    <fields>
                        <ext-numberDataField name="TaskTypeID" />
                        <ext-dataField name="TaskDepartment" />
                        <ext-dataField name="TaskGroup " />
                        <ext-dataField name="TaskProblem" />
                        <ext-dataField name="TaskElementType" />
                        <ext-dataField name="FieldTeamType" />
                        <ext-dataField name="TaskPriority" />
                        <ext-dataField name="TaskDetSrcNameMob" />
                        <ext-dataField name="AllowCloseRequest" />
                        <ext-dataField name="AllowAllocationReject" />
                        <ext-dataField name="AllowActivation" />
                        <ext-dataField name="FTActivationBuffer" />
                        <ext-dataField name="TTypeNameShortA" />
                        <ext-dataField name="TTypeNameShortL" />
                        <ext-dataField name="TTypeNameA" />
                        <ext-dataField name="TTypeNameL" />
                        <ext-dataField name="TaskDetails_ReportId" />
                        <ext-dataField name="ClientRefID" />
    
                    </fields>
                </ext-store>
            </store>
            <columns>
                <ext-column text="ID" dataIndex="TaskTypeID" width="75" />
                <ext-column text="Short Name A" dataIndex="TTypeNameShortA" width="155" />
                <ext-column text="Short Name L" dataIndex="TTypeNameShortL" width="155" />
                <ext-column text="Name A" dataIndex="TTypeNameA" width="175" />
                <ext-column text="Name L" dataIndex="TTypeNameL" width="175" />
                <ext-column text="Department" dataIndex="TaskDepartment" width="155" />
                <ext-column text="Group" dataIndex="TaskGroup" width="155" />
                <ext-column text="Problem" dataIndex="TaskProblem" width="155" />
    
                <ext-column text="Element" dataIndex="TaskElementType" width="155" />
                <ext-column text="Field Team" dataIndex="FieldTeamType" width="155" />
                <ext-column text="Priority" dataIndex="TaskPriority" width="155" />
    
                <ext-column text="Allow Close Request" dataIndex="AllowCloseRequest" width="200" />
                <ext-column text="Allow Allocation Reject" dataIndex="AllowAllocationReject" width="200" />
                <ext-column text="Allow Activation" dataIndex="AllowActivation" width="150" />
    
                <ext-column text="FT Activation Buffer" dataIndex="FTActivationBuffer" width="200" />
                <ext-column text="Task details Report ID" dataIndex="TaskDetails_ReportId" width="200" />
                <ext-column text="Source Table" dataIndex="TaskDetSrcNameMob" width="150" />
                <ext-column text="Client" dataIndex="ClientRefID" width="75" />
    
            </columns>
            <listeners>
                <rowContextMenu handler=" e.preventDefault(); #{gridMenu}.dataRecord = this.store.getAt(rowIndex);#{gridMenu}.showAt(e.getXY());" />
            </listeners>
        </ext-gridpanel>
        <ext-menu id="gridMenu">
            <items>
                <ext-menuItem text="Edit" icon="Edit">
                    <listeners>
                        <click handler="App.Window1.show()"/>
                    </listeners>
                </ext-menuItem>
                <ext-menuItem text="Delete" icon="Delete">
                    <listeners>
                        <click handler="App.Window1.show()" />
                    </listeners>
                
                </ext-menuItem>
            </items>
        </ext-menu>

    Thank you
  2. #2
    Hello @Geovision!

    There's both an issue and usage error in your code.

    The issue is that, indeed, the menu is not getting properly laid on the page, making it unable to be displayed freely. For that, we have logged issue #1838 in our issues tracker and will post an update here as soon as we get it fixed.

    As for how you tried to reference the menu, token expansion is not supported in Ext.NET 7. This means you should replace any #{gridMenu} occurrence by App.gridMenu in order to properly reference the component.

    Back to the issue at hand, to work around the problem, just force the menu to be drawn to the whole page body, by giving the body tag an ID then specifying the menu to render there. In other words:

    <body id="PageBody">
        <ext-gridPanel ... />
        <ext-menu id="gridMenu" renderTo="PageBody">
            <items>
                <ext-menuItem text="Edit" iconCls="x-fa fa-edit">
                    <listeners>
                        <click handler="App.Window1.show()" />
                    </listeners>
                </ext-menuItem>
                <ext-menuItem text="Delete" iconCls="x-fa fa-delete">
                    <listeners>
                        <click handler="App.Window1.show()" />
                    </listeners>
                </ext-menuItem>
            </items>
        </ext-menu>
    </body>
    This, and fixing your token references in the listener to the below:

    <listeners>
        <rowContextMenu handler=" e.preventDefault(); App.gridMenu.dataRecord = this.store.getAt(rowIndex); App.gridMenu.showAt(e.getXY());" />
    </listeners>
    Should do, and the menu will display accordingly as you right-click around the grid rows.

    Hope this helps, we'll post an update here as soon as we have this issue fixed.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello,

    Thank you it is working now.

    Regards,

Similar Threads

  1. [CLOSED] grid panel context menu.
    By Prasoon in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Sep 19, 2015, 12:55 PM
  2. [CLOSED] Ext.Net, ExtJS 5.1.0 and context menu not disappearing bug
    By adrianot in forum 3.x Legacy Premium Help
    Replies: 3
    Last Post: Jun 23, 2015, 2:47 PM
  3. [CLOSED] grid panel context menu items.
    By Prasoon in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 02, 2015, 6:02 AM
  4. [CLOSED] Column index or the header value of a grid panel in context menu.
    By arjunrvasisht in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Jan 07, 2015, 10:34 AM
  5. Replies: 2
    Last Post: Apr 04, 2014, 5:11 AM

Posting Permissions