How To: Add Context Menu to GridPanel

Page 1 of 2 12 LastLast
  1. #1

    How To: Add Context Menu to GridPanel

    Hello Guys,

    In Example explorer, I did not find any MVC example that demonstrate Context Menu in GridPanel.

    Since I am using vb.net language, so far I have added this GridPanel.


    @(Html.X().GridPanel() _
                                                .Title("Editable GridPanel") _
                                                .Width(600) _
                                                .Height(350) _
                                                .Store(Html.X().Store() _
                                                .ID("Store1") _
                                                .Model(Html.X().Model() _
                                                .IDProperty("ID") _
                                                .Fields(
                                                New ModelField("ID", ModelFieldType.Int),
                                                New ModelField("Name"),
                                                New ModelField("Price", ModelFieldType.Float),
                                                New ModelField("Change", ModelFieldType.Float),
                                                New ModelField("PctChange", ModelFieldType.Float),
                                                New ModelField("LastChange", ModelFieldType.Date)
                                                )
                                                ) _
                                                .DataSource(Model)
                                                ) _
                                                .ColumnModel(
                                                Html.X().Column().Text("ID").DataIndex("ID").Width(35),
                                                Html.X().Column() _
                                                .Text("Name") _
                                                .DataIndex("Name") _
                                                .Flex(1) _
                                                .Editor(Html.X().TextField()),
                                                Html.X().Column() _
                                                .Text("Price") _
                                                .DataIndex("Price") _
                                                .Renderer(RendererFormat.UsMoney) _
                                                .Editor(Html.X().NumberField()),
                                                Html.X().Column() _
                                                .Text("Change") _
                                                .DataIndex("Change") _
                                                .Renderer("change") _
                                                .Editor(Html.X().NumberField()),
                                                Html.X().Column() _
                                                .Text("PctChange") _
                                                .DataIndex("PctChange") _
                                                .Renderer("pctChange") _
                                                .Editor(Html.X().NumberField()),
                                                Html.X().DateColumn() _
                                                .Text("Last Updated") _
                                                .DataIndex("LastChange") _
                                                .Format("MM-dd-yyyy") _
                                                .Editor(Html.X().DateField().Format("MM-dd-yyyy"))
                                                ) _
                                                .SelectionModel(Html.X().CellSelectionModel()) _
                                                .Plugins(
                                                Html.X().CellEditing().Listeners(Function(ls) ls.Edit.Fn = "edit")
                                                ) _
                                            .Listeners(Function(ls) ls.RowContextMenu.Handler = "")
    )
    and here you can see I am trying to add RowContextMenu in listerners, but I am not able to move further. How to add items, and attach function to that item.
    Like I want to add three labels in context menu, and each will have its onclick event which will open three different popups.

    Can anyone help me proceed further?
  2. #2
    Hello!

    Here are some WebForms references that should just get you started with menus!

    - context menus on a grid panel
    - Context menus here are not actions like above, but simpler menu items where you can bind different events and better customize it
    - Color context menu
    - Menus loaded from server-side

    As you pointed, there's no MVC examples for at least most of the above. But it shouldn't be difficult to get the idea, as the structural page would be pretty much the same!

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    A little starts-up would be like this:
    @(
        Html.X().Menu().ID("ContextMenu").Items( _
           Html.X().MenuItem().Text("Item 1"),
           Html.X().MenuItem().Text("Item 2"),
           Html.X().MenuItem().Text("Item 3") _
        )
    )
    That would be the context menu you want to show on right-click. You can bind actions to each one.

    And the listener to trigger it would be:
    .Listeners(Function(ls) ls.RowContextMenu.Handler = "e.stopEvent(); #{ContextMenu}.showAt(e.getXY()); return false;")
    That's been based from the first example I provided you. Unfortunately, you didn't provide important information to run your example like the model and controller, so I can't really get to the bottom of it and test the suggestion above (in which it is possible it would fail for you until some adjustments are made).

    We usually request full use cases so we can run the example in our side and then provide better and running suggestions. You may want to review our guidelines on posting questions. It is a reasonably long read but will provide you lots of information on how to help us help you!

    They are here:
    - Forum Guidelines For Posting New Topics
    - More information required

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  4. #4
    Thanks. Sorry I was not clear earlier. I have used same controller and model as mentioned in this example.

    Also what you suggested to add a ContextMenu and then bind to listeners. But it is not working.
    @(Html.X().Menu().ID("ContextMenus").Items(
                                                                    Html.X().MenuItem().Text("Item 1"),
                                                                    Html.X().MenuItem().Text("Item 2"),
                                                                    Html.X().MenuItem().Text("Item 3")
                                                                )
    )
    
    
    
                                @(Html.X().GridPanel() _
    .Title("Commision Checks") _
    .Width(600) _
    .Height(350) _
    .Store(Html.X().Store() _
    .ID("Store1") _
    .Buffered(True) _
    .Model(Html.X().Model() _
    .IDProperty("ID") _
    .Fields(
    New ModelField("comm_check_number", ModelFieldType.String),
    New ModelField("comm_check_date_written", ModelFieldType.Date),
    New ModelField("comm_check_date_sent", ModelFieldType.Date),
    New ModelField("comm_check_amount", ModelFieldType.Float),
    New ModelField("comm_check_type_desc", ModelFieldType.String)
    )
    ) _
    .DataSource(Model.CommissionChecksList)
    ) _
    .ColumnModel(
    Html.X().Column().Text("Check Number").DataIndex("comm_check_number").Width(35) _
    .Flex(1) _
    .Editor(Html.X().ComboBox()),
    Html.X().DateColumn() _
    .Text("Date Written") _
    .DataIndex("comm_check_date_written") _
    .Flex(1) _
    .Format("MM-dd-yyyy") _
    .Editor(Html.X().DateField().Format("MM-dd-yyyy")),
    Html.X().DateColumn() _
    .Text("Date Sent") _
    .DataIndex("comm_check_date_sent") _
    .Format("MM-dd-yyyy") _
    .Editor(Html.X().DateField().Format("MM-dd-yyyy")),
    Html.X().Column() _
    .Text("Change") _
    .DataIndex("comm_check_amount") _
    .Renderer(RendererFormat.UsMoney) _
    .Editor(Html.X().NumberField()),
    Html.X().Column() _
    .Text("Check Type") _
    .DataIndex("comm_check_type_desc") _
    .Editor(Html.X().TextField())
    ) _
    .SelectionModel(Html.X().CellSelectionModel()) _
    .Plugins(
    Html.X().CellEditing().Listeners(Function(ls) ls.Edit.Fn = "edit")
    ) _
    .Listeners(Function(ls) ls.RowContextMenu.Handler = "e.stopEvent(); #{ContextMenus}.showAt(e.getXY()); return false;")
                        )
  5. #5
    Hi,

    I tried another thing to show the context menu but this is not what we are looking for.

    I removed the listener and instead added

    .ContextMenuID("ContextMenu")
    Now what it does is, whenever I right click anywhere on the grid, either on row, or empty area of grid or title of the grid, the Context Menu Appears.
    But I need to show only on Row Right Click.

    What I am thinking is that the line of code which you provided will not work with vb syntax. I think in below line reference to ContextMenu using #{ContextMenu} might be a problem.

    .Listeners(Function(ls) ls.RowContextMenu.Handler = "e.stopEvent(); #{ContextMenu}.showAt(e.getXY()); return false;")
    Can you please help me create this example for vb?

    Thanks.
  6. #6
    alright. I figured it out.

    RowContextMenu is not directly binded to GridPanel. I suppose, first ViewConfig of GridView type is required and then binding listener to GridView instead of GridPanel will work for RowContextMenu event to fire.

    .View(Function(view) view.Add(Html.X().GridView().Listeners(Function(ls) ls.RowContextMenu.Handler= "e.stopEvent(); #{ContextMenu}.showAt(e.getXY()); return false;")))
    I was studying the web form example, and listeners were added in <ViewConfig> tag. From there I got some hint, and then I searched if anyone has ever tried adding ViewConfig in MVC, and then I found this example is forum where View() was adding GridView to GridPanel.

    Though there was strange thing happening after that. I was getting js error, that
    Cannot read property 'showAt' of null
    To fix this error, I had to move the @(Html.X().ResourceManager()) from layout view to actual index view where I was calling showAt. This seems to be strange and Ext.Net team want to look into that.

    Thanks.
  7. #7
    Hello @puns11! Glad to see you are having progress on Ext.NET!

    When you load your page with ResourceManager on Layout, what do you get in "e.stopEvent(); #{ContextMenu}.showAt(e.getXY()); for #{ContextMenu}?

    Usually on WebForms it may be enough to just replace #{ContextMenu} with App.ContextMenu but this might not work in MVC in some situations (for example, with partial view).

    For some reason, as the resources were defined somewhere else, #{ContextMenu} might have not been replaced properly and I believe your page were getting "e.stopEvent(); .showAt(e.getXY()); instead of something like "e.stopEvent(); App.ContextMenu.showAt(e.getXY()); .
    Fabrício Murta
    Developer & Support Expert
  8. #8
    Hi,

    That maybe the case in MVC.
    But as yesterday I told you how I was able to attach RowContextMenu to GridPanel by adding View(). In actually I tried in C# first, but when I moved the same code in VB.NET project. The same piece of code was not working. In Fact I was not able to attach any listeners to GridPanel. Furthermore, Listeners was not working with any of the control in vb.net. It was very strange issue.

    Below are two projects that I am currently playing with using Ext.Net to create a demo for client to approve this framework.

    Note: Model and Controller are same in both projects and are referred from this example
    View in C# project
    @model System.Collections.IEnumerable
    
    @{
        ViewBag.Title = "Editor with DirectMethod - Ext.NET MVC Examples";
    }
    
        <script>
            var template = 'color:{0};';
    
            var change = function (value, meta) {
                meta.style = Ext.String.format(template, (value > 0) ? "green" : "red");
                return value;
            };
    
            var pctChange = function (value, meta) {
                meta.style = Ext.String.format(template, (value > 0) ? "green" : "red");
                return value + "%";
            };
    
            var edit = function (editor, e) {
                /*
                    "e" is an edit event with the following properties:
    
                        grid - The grid
                        record - The record that was edited
                        field - The field name that was edited
                        value - The value being set
                        originalValue - The original value for the field, before the edit.
                        row - The grid table row
                        column - The grid Column defining the column that was edited.
                        rowIdx - The row index that was edited
                        colIdx - The column index that was edited
                */
    
                // Call DirectMethod
                if (!(e.value === e.originalValue || (Ext.isDate(e.value) && Ext.Date.isEqual(e.value, e.originalValue)))) {
                    Ext.net.DirectMethod.request({
                        url: '@(Url.Action("Edit"))',
                        params: {
                            id: e.record.data.ID,
                            field: e.field,
                            oldValue: e.originalValue,
                            newValue: e.value,
                            customer: e.record.data,
                        }
                        
                    });
                }
            };
        </script>
    @(Html.X().ResourceManager())
        <h1>Editable GridPanel With Save To [DirectMethod]</h1>
    
    @(
                    Html.X().Menu().ID("ContextMenu").Items(
                    Html.X().MenuItem().Text("Item 1"),
                    Html.X().MenuItem().Text("Item 2"),
                    Html.X().MenuItem().Text("Item 3")
                    ).Floating(true)
    )
        @(Html.X().GridPanel()
                    .Width(600)
                    .Height(350)
                    .Store(Html.X().Store()
                        .ID("Store1")
                        .Model(Html.X().Model()
                            .IDProperty("ID")
                            .Fields(
                                new ModelField("ID", ModelFieldType.Int),
                                new ModelField("Name"),
                                new ModelField("Price", ModelFieldType.Float),
                                new ModelField("Change", ModelFieldType.Float),
                                new ModelField("PctChange", ModelFieldType.Float),
                                new ModelField("LastChange", ModelFieldType.Date)
                            )
                        )
                        .DataSource(Model)
                    )
                    .ColumnModel(
                        Html.X().Column().Text("ID").DataIndex("ID").Width(35),
                        Html.X().Column()
                            .Text("Name")
                            .DataIndex("Name")
                            .Flex(1)
                            .Editor(Html.X().TextField()),
                        Html.X().Column()
                            .Text("Price")
                            .DataIndex("Price")
                            .Renderer(RendererFormat.UsMoney)
                            .Editor(Html.X().NumberField()),
                        Html.X().Column()
                            .Text("Change")
                            .DataIndex("Change")
                            .Renderer("change")
                            .Editor(Html.X().NumberField()),
                         Html.X().Column()
                            .Text("PctChange")
                            .DataIndex("PctChange")
                            .Renderer("pctChange")
                            .Editor(Html.X().NumberField()),
                        Html.X().DateColumn()
                            .Text("Last Updated")
                            .DataIndex("LastChange")
                            .Format("yyyy-MM-dd")
                            .Editor(Html.X().DateField().Format("yyyy-MM-dd"))
                    )
                    .SelectionModel(Html.X().CellSelectionModel())
                    .Plugins(
                    Html.X().CellEditing().Listeners(ls => ls.Edit.Fn = "edit")
                    ).View(Html.X().GridView().Listeners(ls=> ls.RowContextMenu.Handler= "e.stopEvent(); #{ContextMenu}.showAt(e.getXY()); return false;"))
        )
    View in VB.NET project

    
    @Code
        ViewData("Title") = "Home Page"
    
    End Code
    <script>
            var template = 'color:{0};';
    
            var change = function (value, meta) {
                meta.style = Ext.String.format(template, (value > 0) ? "green" : "red");
                return value;
            };
    
            var pctChange = function (value, meta) {
                meta.style = Ext.String.format(template, (value > 0) ? "green" : "red");
                return value + "%";
            };
    
            var edit = function (editor, e) {
                
                /*
                    "e" is an edit event with the following properties:
    
                        grid - The grid
                        record - The record that was edited
                        field - The field name that was edited
                        value - The value being set
                        originalValue - The original value for the field, before the edit.
                        row - The grid table row
                        column - The grid Column defining the column that was edited.
                        rowIdx - The row index that was edited
                        colIdx - The column index that was edited
                */
    
                // Call DirectMethod
                if (!(e.value === e.originalValue || (Ext.isDate(e.value) && Ext.Date.isEqual(e.value, e.originalValue)))) {
                    Ext.net.DirectMethod.request({
                        url: '@(Url.Action("Edit"))',
                        params: {
                            id: e.record.data.ID,
                            field: e.field,
                            oldValue: e.originalValue,
                            newValue: e.value,
                            customer: e.record.data
                        }
                    });
                }
            };
    </script>
    @(Html.X().ResourceManager())
    <div class="jumbotron">
      
    </div>
    
    <div class="row">
    <div class="col-md-4">
    
    @(
                                Html.X().Menu().ID("ContextMenu").Items(
                                Html.X().MenuItem().Text("Item 1"),
                                Html.X().MenuItem().Text("Item 2"),
                                Html.X().MenuItem().Text("Item 3")
                                ).Floating(True)
    )
    
    @(Html.X().GridPanel() _
                                                                    .Title("Edit") _
                                                                    .Width(600) _
                                                                    .Height(350) _
                                                                    .Store(Html.X().Store() _
                                                                    .ID("Store1") _
                                                                    .Model(Html.X().Model() _
                                                                    .IDProperty("ID") _
                                                                    .Fields(
                                                                    New ModelField("ID", ModelFieldType.Int),
                                                                    New ModelField("Name"),
                                                                    New ModelField("Price", ModelFieldType.Float),
                                                                    New ModelField("Change", ModelFieldType.Float),
                                                                    New ModelField("PctChange", ModelFieldType.Float),
                                                                    New ModelField("LastChange", ModelFieldType.Date)
                                                                    )
                                                                    ) _
                                                                    .DataSource(Model)
                                                                    ) _
                                            .ColumnModel(
                                            Html.X().Column().Text("ID").DataIndex("ID").Width(35),
                                            Html.X().Column() _
                                            .Text("Name") _
                                            .DataIndex("Name") _
                                            .Flex(1) _
                                            .Editor(Html.X().ComboBox().Listeners(Function(m) m.Change.Handler = "alert('hi')")),
                                            Html.X().Column() _
                                            .Text("Price") _
                                            .DataIndex("Price") _
                                            .Renderer(RendererFormat.UsMoney) _
                                            .Editor(Html.X().NumberField()),
                                            Html.X().Column() _
                                            .Text("Change") _
                                            .DataIndex("Change") _
                                            .Renderer("change") _
                                            .Editor(Html.X().NumberField()),
                                            Html.X().Column() _
                                            .Text("PctChange") _
                                            .DataIndex("PctChange") _
                                            .Renderer("pctChange") _
                                            .Editor(Html.X().NumberField()),
                                            Html.X().DateColumn() _
                                            .Text("Last Updated") _
                                            .DataIndex("LastChange") _
                                            .Format("MM-dd-yyyy") _
                                            .Editor(Html.X().DateField().Format("MM-dd-yyyy"))
                                            ) _
                                            .SelectionModel(Html.X().CellSelectionModel()) _
                                            .Plugins(
                                            Html.X().CellEditing().Listeners(Function(ls) ls.Edit.Fn = "edit")
                                            ).View(Html.X().GridView().Listeners(Function(ls) ls.RowContextMenu.Handler = "e.stopEvent(); #{ContextMenu}.showAt(e.getXY()); return false;"))
                )
    </div>
    </div>

    Can you please run this above vb.net example at your end and let me know what wrong I am doing here in vb.net?

    Thanks,
    Puneet
  9. #9
    And in further investigation, I found that the Ext.axd file generated by compiler for each project is bit different. Below is the code of ext.axd generated from both projects(comparison).

    Click image for larger version. 

Name:	comparison.PNG 
Views:	53 
Size:	73.6 KB 
ID:	24600

    You can see that listeners part is missing in the vb.net project. Looks like compiler did not generate that part for vb.net. Can you please check with your team?
  10. #10
    Hello @puns11!

    That difference you show in the screenshot can be naught but different Ext.NET DLL files you use in the projects. Please, if you double checked them, triple-check! The difference you show is too clear to me that is provenient from a version upgrade.

    The screenshots suggests you compared between the ext-all-debug.js. Notice just saying ext.axd is very vague, as this is just the entrypoint for the diversity of embedded resources in Ext.NET. The path to ext.axd is more informative.
    Fabrício Murta
    Developer & Support Expert
Page 1 of 2 12 LastLast

Similar Threads

  1. GridPanel with context menu
    By Zirc75 in forum 2.x Help
    Replies: 0
    Last Post: Jan 10, 2014, 7:41 AM
  2. [CLOSED] Cell Context Menu for a GridPanel
    By Dzagana in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 06, 2013, 9:16 PM
  3. Replies: 1
    Last Post: Jan 12, 2013, 4:30 AM
  4. GridPanel - Context Menu
    By Tbaseflug in forum 1.x Help
    Replies: 8
    Last Post: Sep 28, 2011, 4:01 PM
  5. [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

Tags for this Thread

Posting Permissions