jQuery Grid Plugin - jqGrid - Topic: Context menu in treegrid http://www.trirand.com/blog/?page_id=393/treegrid/context-menu-in-treegrid Simple:Press Version 5.7.5.3 mikechris on Context menu in treegrid http://www.trirand.com/blog/?page_id=393/treegrid/context-menu-in-treegrid#p27599 TreeGrid http://www.trirand.com/blog/?page_id=393/treegrid/context-menu-in-treegrid#p27599 Hello

I'm trying to get a context menu in a treegrid. The code works fine if I use a normal grid instead:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" />
        <link rel="stylesheet" type="text/css" media="screen" href="/blog/jqgrid/themes/ui.jqgrid.css" />
        <script src="js/jquery-1.7.2.min.js" type="text/javascript">
        </script>
        <script src="js/i18n/grid.locale-en.js" type="text/javascript">
        </script>
        <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
        <script src="js/jquery.contextmenu.js" type="text/javascript"></script>
        <script src="js/jquery-ui-1.9.0.custom.min.js" type="text/javascript"></script>

        <style type="text/css">
            #jqContextMenu li
            {
              white-space:nowrap;

            }
            #jqContextMenu, #jqContextMenu ul
            {
              width: 300px !important;

            }
        </style>
       
        <script type="text/javascript">
            $(function () {
                'use strict';
                var data=[
                                { id: "1", Aktion: "Aktion 1", Datum: "10.1.2012", level: "0", parent: "null", isLeaf: false, expanded: false },
                                { id: "2", Aktion: "Aktion 2", Datum: "9.1.2012", level: "1", parent: "1", isLeaf: false, expanded: false },
                                { id: "5", Aktion: "Aktion 5", Datum: "7.1.2012", level: "2", parent: "2", isLeaf: true, expanded: false },
                                { id: "4", Aktion: "Aktion 4", Datum: "6.1.2012", level: "1", parent: "1", isLeaf: true, expanded: false },
                                { id: "3", Aktion: "Aktion 3", Datum: "8.1.2012", level: "0", parent: "null", isLeaf: true, expanded: false },

                ];

                var eventsMenu = {
                    bindings: {
                        'Löschen': function (t) {
                            callContextMenu(t.id, 'Löschen');
                        },
                        'NeuEMail': function (t) {
                            callContextMenu(t.id, 'Neu E-Mail');
                        },
                        'NeuAufgabe': function (t) {
                            callContextMenu(t.id,'Neu Aufgabe');
                        }
                    }
                };

                var grid = $("#treegrid");

                grid.jqGrid({
                    datatype: 'local',
          
                    treeGrid: true,
                    treeGridModel: 'adjacency',
                    treedatatype: 'local',
                    ExpandColumn: 'Aktion',
                    toolbar: [true, "bottom"],

                    colNames: ["id", "Aktion", "Datum"],
                    colModel: [{
                        name: 'id',
                        index: 'id',
                        width: 1,
                        hidden: true,
                        key: true
                    }, {
                        name: 'Aktion',
                        index: 'Aktion',
                        width: 120,
                        hidden: false,
                        sorttype: 'text',
                      
                    },
                    {
                        name: 'Datum',
                        index: 'Datum',
                        width: 120,
                        hidden: false,
                        sortable: true,
                        sorttype: 'date'
                    }, ],
                   
                    width: 500,
                    sortname: 'id',
                    pager: false,
                    imgpath: '/ui-lightness/images',
                    caption: '',
                    loadonce: true,

                    afterInsertRow: function (rowid, rowdata, rowelem) {
                        $('#' + rowdata["id"]).contextMenu('MenuJqGrid', eventsMenu);
                    }

                    }

 
                })

                grid[0].addJSONData({ total: 5, page: 1, records: data.length, rows: data });

        </script>
    </head>
    <body><br />
        <div id="message"></div><br />

        <table id="treegrid" class="scroll" ><tr><td></td></tr>
        </table>
        <br />
                <table id="grid" class="scroll" ><tr><td></td></tr>
        </table>

    
         <div class="contextMenu" id="MenuJqGrid" >
        <ul>
            <li id="Löschen">
                <img src="themes/contextMenu/edit.png" />
               L&ouml;schen</li>
            <li id="NeuEMail" >
                <img src="themes/contextMenu/cut.png" />
                Neu: E-Mail</li>
            <li id="NeuAufgabe">
                <img src="themes/contextMenu/copy.png" />
                Neu: Aufgabe</li>
         
        </ul>
    </div>
    

    </body>
</html>

Any idea? Kind regards

Mike

]]> Mon, 22 Oct 2012 19:02:33 +0300