EasyUI Forum

Hi,

We are unable to identify, how to add a menu on click the column header in datagrid.
In that menu there will be some sub menus also.

Please find the attachment image for the sample model.


Thanks and Regards
Pandu Ranga.

are you using extJs?
 
wrong forum  ;D

That is developed in extJs but we need to implement the same in our application using jquery easy ui.

there are no feature to do that, you can only achieve it by custom.

i once made custom like that by separately create a window to custom the table preview like the screenshot below..

Can you please show your code that triggers a popup window when you click on the header?

Thanks

there are no custom code attached to the column header because it already atached to sort/unsort column by easyui..

i pop up the window by a button..

So, you are attaching custom sorter or something?

Hi.

You neet to use the onHeaderContextMenu of datagrid.
I use this option for show and hide columns.

and change de code of menu basic.
http://www.jeasyui.com/demo/main/?plugin=Menu&theme=default&dir=ltr&pitem=

Regardssss


onHeaderContextMenu:
               // Muestro u Oculta columnas
               function(e, field){
                  e.preventDefault();
                  if (!cmenu){ createColumnMenu(); }
                  cmenu.menu('show', { left:e.pageX,top:e.pageY } );
JAVASCRIPT FUNCTION
        var cmenu;
   function createColumnMenu(){
      cmenu = $('<div/>').appendTo('body');
      cmenu.menu({
         onClick: function(item){
            if (item.iconCls == 'icon-check_16'){
               $('#tt').datagrid('hideColumn', item.name);
               cmenu.menu('setIcon', { target: item.target, iconCls: 'icon-ver_ocultar_16'   });
            } else {
               $('#tt').datagrid('showColumn', item.name);
               cmenu.menu('setIcon', {   target: item.target, iconCls: 'icon-check_16'   });
            }
         }
      });
      var fields = $('#tt').datagrid('getColumnFields');

      // Arranco de 1 para evitar que me proponga para ocultar la columna que muestra los nodos
      for(var i=0; i<fields.length; i++){
         var field = fields;
         var col = $('#tt').datagrid('getColumnOption', field);
         cmenu.menu('appendItem', { text: col.title,   name: field, iconCls: 'icon-check_16'   });
      }
   }   
},

And which line of your code will popup w window as it's shown in the message above mine?

createColumnMenu();

Which one?