EasyUI Forum
October 10, 2024, 10:27:20 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Datagrid: Filter Menu on click column header  (Read 17070 times)
rangaNadha
Jr. Member
**
Posts: 50


View Profile
« on: July 31, 2015, 04:04:57 AM »

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.
Logged
aswzen
Sr. Member
****
Posts: 287


Indonesian

aswzen
View Profile WWW Email
« Reply #1 on: July 31, 2015, 04:23:24 AM »


are you using extJs?
 
wrong forum  Grin
Logged

Regards,
Sigit

- Indonesian jEasyUI Facebook page : https://www.facebook.com/groups/jeasyuiid/
rangaNadha
Jr. Member
**
Posts: 50


View Profile
« Reply #2 on: July 31, 2015, 04:31:02 AM »

That is developed in extJs but we need to implement the same in our application using jquery easy ui.
Logged
aswzen
Sr. Member
****
Posts: 287


Indonesian

aswzen
View Profile WWW Email
« Reply #3 on: July 31, 2015, 04:41:41 AM »

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..
Logged

Regards,
Sigit

- Indonesian jEasyUI Facebook page : https://www.facebook.com/groups/jeasyuiid/
zolotoy
Jr. Member
**
Posts: 89


View Profile Email
« Reply #4 on: August 03, 2015, 06:16:49 AM »

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

Thanks
Logged
aswzen
Sr. Member
****
Posts: 287


Indonesian

aswzen
View Profile WWW Email
« Reply #5 on: August 04, 2015, 06:18:28 PM »

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..
Logged

Regards,
Sigit

- Indonesian jEasyUI Facebook page : https://www.facebook.com/groups/jeasyuiid/
zolotoy
Jr. Member
**
Posts: 89


View Profile Email
« Reply #6 on: August 04, 2015, 06:40:45 PM »

So, you are attaching custom sorter or something?
Logged
jmansur
Newbie
*
Posts: 31


View Profile
« Reply #7 on: August 05, 2015, 07:09:17 AM »

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'   });
      }
   }   
},
Logged
zolotoy
Jr. Member
**
Posts: 89


View Profile Email
« Reply #8 on: August 05, 2015, 07:37:44 AM »

And which line of your code will popup w window as it's shown in the message above mine?
Logged
jmansur
Newbie
*
Posts: 31


View Profile
« Reply #9 on: August 05, 2015, 07:56:20 AM »

createColumnMenu();
Logged
zolotoy
Jr. Member
**
Posts: 89


View Profile Email
« Reply #10 on: August 05, 2015, 07:58:41 AM »

Which one?
Code:
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'   });
            }
         }
      });
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!