How To: Add Context Menu to GridPanel

Page 2 of 2 FirstFirst 12
  1. #11
    Hi fabricio.murta,

    Yes, you were right, versions of Ext.Net on both projects were different. But even after keeping both the versions same. Things are not working for VB.NET project.

    Same output is seen for project. I am not able to attach any listeners here.

  2. #12
    Hello! Can you share how you translated the controller and model to I don't see the line on the view where you refer to the model on your VB.NET view.

    EDIT: By the way, the example you posted previously for WebForms version has also its MVC C# version at Editable GridPanel With Save To [DirectMethod]
  3. #13

    Imports Ext.Net
    Imports Ext.Net.MVC
    Public Class HomeController
        Inherits System.Web.Mvc.Controller
        Function Index() As ActionResult
            Return View(DirectMethodModel.Company.GetAll())
        End Function
        Public Function Edit(id As Integer, field As String, oldValue As String, newValue As String, customer As Object) As DirectResult
            Dim message As String = "<b>Property:</b> {0}<br /><b>Field:</b> {1}<br /><b>Old Value:</b> {2}<br /><b>New Value:</b> {3}"
            ' Send Message...
            X.Msg.Notify(New NotificationConfig() With {
                            .Title = "Edit Record #" + id.ToString(),
                            .Html = String.Format(message, id, field, oldValue, newValue),
                            .Width = 250,
                            .Height = 150
            X.GetCmp(Of Store)("Store1").GetById(id).Commit()
            Return Me.Direct()
        End Function
        Function About() As ActionResult
            ViewData("Message") = "Your application description page."
            Return View()
        End Function
        Function Contact() As ActionResult
            ViewData("Message") = "Your contact page."
            Return View()
        End Function
    End Class

    Imports System.Collections
    Imports System.Collections.Generic
    Namespace DirectMethodModel
        Public Class Company
            Public Property ID() As Integer
                    Return m_ID
                End Get
                    m_ID = Value
                End Set
            End Property
            Private m_ID As Integer
            Public Property Name() As String
                    Return m_Name
                End Get
                    m_Name = Value
                End Set
            End Property
            Private m_Name As String
            Public Property Price() As Double
                    Return m_Price
                End Get
                    m_Price = Value
                End Set
            End Property
            Private m_Price As Double
            Public Property Change() As Double
                    Return m_Change
                End Get
                    m_Change = Value
                End Set
            End Property
            Private m_Change As Double
            Public Property PctChange() As Double
                    Return m_PctChange
                End Get
                    m_PctChange = Value
                End Set
            End Property
            Private m_PctChange As Double
            Public Property LastChange() As DateTime
                    Return m_LastChange
                End Get
                    m_LastChange = Value
                End Set
            End Property
            Private m_LastChange As DateTime
            Public Shared Function GetAll() As IEnumerable
                Dim today As DateTime = DateTime.Today
                Return New List(Of Company)() From {
                    New Company() With {
                        .ID = 1,
                        .Name = "3m Co",
                        .Price = 71.72,
                        .Change = 0.02,
                        .PctChange = 0.03,
                        .LastChange = today
                    New Company() With {
                        .ID = 2,
                        .Name = "Alcoa Inc",
                        .Price = 29.01,
                        .Change = 0.42,
                        .PctChange = 1.47,
                        .LastChange = today
                    New Company() With {
                        .ID = 3,
                        .Name = "Altria Group Inc",
                        .Price = 83.81,
                        .Change = 0.28,
                        .PctChange = 0.34,
                        .LastChange = today
                    New Company() With {
                       .ID = 4,
                       .Name = "American Express Company",
                       .Price = 52.55,
                       .Change = 0.01,
                       .PctChange = 0.02,
                       .LastChange = today
                    New Company() With {
                        .ID = 5,
                        .Name = "American International Group, Inc.",
                        .Price = 64.13,
                        .Change = 0.31,
                        .PctChange = 0.49,
                        .LastChange = today
                    New Company() With {
                        .ID = 6,
                        .Name = "AT&T Inc.",
                        .Price = 31.61,
                        .Change = -0.48,
                        .PctChange = -1.54,
                        .LastChange = today
            End Function
        End Class
    End Namespace

        ViewData("Title") = "Home Page"
    End Code
            var template = 'color:{0};';
            var change = function (value, meta) {
       = Ext.String.format(template, (value > 0) ? "green" : "red");
                return value;
            var pctChange = function (value, meta) {
       = 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)))) {
                        url: '@(Url.Action("Edit"))',
                        params: {
                            field: e.field,
                            oldValue: e.originalValue,
                            newValue: e.value,
    <div class="jumbotron">
    <div class="row">
    <div class="col-md-4">
                                Html.X().MenuItem().Text("Item 1"),
                                Html.X().MenuItem().Text("Item 2"),
                                Html.X().MenuItem().Text("Item 3")
    @(Html.X().GridPanel() _
                                                                                .Title("Edit") _
                                                                                .Width(600) _
                                                                                .Height(350) _
                                                                                .Store(Html.X().Store() _
                                                                                .ID("Store1") _
                                                                                .Model(Html.X().Model() _
                                                                                .IDProperty("ID") _
                                                                                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)
                                                                                ) _
                                                                                ) _
                                                        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) _
                                                        Html.X().Column() _
                                                        .Text("Change") _
                                                        .DataIndex("Change") _
                                                        .Renderer("change") _
                                                        Html.X().Column() _
                                                        .Text("PctChange") _
                                                        .DataIndex("PctChange") _
                                                        .Renderer("pctChange") _
                                                        Html.X().DateColumn() _
                                                        .Text("Last Updated") _
                                                        .DataIndex("LastChange") _
                                                        .Format("MM-dd-yyyy") _
                                                        ) _
                                                        .SelectionModel(Html.X().CellSelectionModel()) _
                                                        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;"))
    You can see I am even trying to run the alert on combobox which is also not working for me in vb project.

    Please let me know if you see any issue in above code.

  4. #14
    Interesting @puns11! It seems Ext.NET is having hard times interpreting VB.NET lambda expressions, thus the listeners are not being output to the page at all!

    At least when the lambda expressions are used as Function(), that is.

    Just change your Function(ls) into Sub(ls) that the events will get output just fine.

    The nature of the Function lambda expression does not really work with Ext.NET because of the page rendering mechanism. Declaring it as Sub (subroutine) leaves the handles Ext.NET needs to output the code correctly.

    I didn't really check the rest of the page but I believe that, solved this listeners emitting issue, you'll get extra room for learning the Ext.NET ways, right?..

    Not sure you already are using that, but this may be a good hand for you while developing. You can either set on ResourceManager's .ScriptMode(ScriptMode.Debug).SourceFormatting(true) or globally set it in Web.config with the line:

    <extnet theme="Gray" licenseKey="** Ext.NET LICENSE KEY HERE **" initScriptMode="Linked" sourceFormatting="True" scriptMode="Debug" />
    Then once you open your pages (I usually run without Visual Studio's debugger when I want to check JavaScript sided issues), F12 developer tools will show you useful information like the script generated. When I tested with function lambda no listener block were output at all. With subroutine lambda, looks just nice!

    Click image for larger version. 

Name:	61110_f12dbg.png 
Views:	20 
Size:	29.9 KB 
ID:	24608

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  5. #15

    This really helped. using Sub instead of Function worked for me. But it is quite strange that Function is common approach.
Page 2 of 2 FirstFirst 12

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