{"action":"opened","issue":{"url":"https://api.github.com/repos/hikalkan/jtable/issues/2154","repository_url":"https://api.github.com/repos/hikalkan/jtable","labels_url":"https://api.github.com/repos/hikalkan/jtable/issues/2154/labels{/name}","comments_url":"https://api.github.com/repos/hikalkan/jtable/issues/2154/comments","events_url":"https://api.github.com/repos/hikalkan/jtable/issues/2154/events","html_url":"https://github.com/hikalkan/jtable/issues/2154","id":302082931,"number":2154,"title":"how to show child table in a new popup center align like a modal onClick?","user":{"login":"abhijit-mishra2003","id":35542863,"avatar_url":"https://avatars1.githubusercontent.com/u/35542863?v=4","gravatar_id":"","url":"https://api.github.com/users/abhijit-mishra2003","html_url":"https://github.com/abhijit-mishra2003","followers_url":"https://api.github.com/users/abhijit-mishra2003/followers","following_url":"https://api.github.com/users/abhijit-mishra2003/following{/other_user}","gists_url":"https://api.github.com/users/abhijit-mishra2003/gists{/gist_id}","starred_url":"https://api.github.com/users/abhijit-mishra2003/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/abhijit-mishra2003/subscriptions","organizations_url":"https://api.github.com/users/abhijit-mishra2003/orgs","repos_url":"https://api.github.com/users/abhijit-mishra2003/repos","events_url":"https://api.github.com/users/abhijit-mishra2003/events{/privacy}","received_events_url":"https://api.github.com/users/abhijit-mishra2003/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-03-04T12:45:55Z","updated_at":"2018-03-04T12:45:55Z","closed_at":null,"author_association":"NONE","body":"Hi All,\r\n\r\nIn stead of showing the child table below the master table, how do I show it as a pop-up? \r\nSorry I might sound lame, I'm still trying my hands on JTable. Is there already a feature in JTable or it needs additional coding? \r\n\r\nHere is my sample code. Please help.\r\n\r\n\r\n```\r\n//Prepare jtable plugin\r\n$('#MQReposTable').jtable({\r\n\ttitle: 'MQ Repos v1.0',\r\n\tpaging: true,\r\n\tpageSize: 10,\r\n\tsorting: true,\r\n\tdefaultSorting: 'APP ASC',\r\n\tselecting: true, //Enable selecting\r\n\tmultiselect: false, //Allow multiple selecting\r\n\tselectingCheckboxes: false, //Show checkboxes on first column\r\n\tselectOnRowClick: true, //Enable this to only select using checkboxes\r\n\tactions: \r\n\t{\r\n\t\tlistAction: 'CRUDController?action=listByFilter'\r\n\t},\r\n\r\n\tfields: \r\n\t{\r\n\t\tapps_id: {key: true, create: false,edit: false,list: false},\r\n\t\tapps_id: {title:'ID', key: true,list: true,create:true,width: '10px'},\r\n\t\tacronym: {title:'Acronym',width: '30px',edit:true },\r\n\t\tapplication: {title:'APPLICATION',width: '40px',edit:true,listClass: 'child-opener-image-column',\r\n\t\tdisplay: function (app) {\r\n\t\t   var app_name= app.record.application + '&nbsp;&nbsp;&nbsp;';\r\n\t\t\tvar $img = $('<div><span class=\"jtable-column-header-text\">' + app_name + '</span><img class=\"child-opener-image\" src=\"\"  /></div>');\r\n\t\t\t$img.click(function () {\r\n\t\t\t\t$('#MQReposTable').jtable('openChildTable',\r\n\t\t\t\t\t\t$img.closest('tr'),\r\n\t\t\t\t\t\t{\r\n\t\t\t\t\t\t//---------show this in a pop-up or modal center aligned????\r\n\t\t\t\t\t\t\ttitle: app.record.application + ' - Application Details',\r\n\t\t\t\t\t\t\tactions:{\r\n\t\t\t\t\t\t\t\tlistAction: 'CRUDController?action=getAppsByAppIdEnv&apps_id='+ app.record.apps_id + \"&selectEnv=\"+$('#selectEnv').val()\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\tfields:{\r\n\t\t\t\t\t\t\t\tapps_id:   {title:'App ID', key: true,list: true,create:true,width: '5px'},\r\n\t\t\t\t\t\t\t\tapplication: {title:'Application Name',width: '12px',edit: true},\r\n\t\t\t\t\t\t\t\tmq_client_ver: {title:'MQ Client Version',width: '12px',edit: true},                  \r\n\t\t\t\t\t\t\t\tapp_technology: {title:'Application Technology',width: '12px',edit: true},\r\n\t\t\t\t\t\t\t\tos_type: {title:'OS',width: '12px',edit: true},\r\n\t\t\t\t\t\t\t\tregion: {title:'Region',width: '12px',edit: true},\r\n\t\t\t\t\t\t\t\tpci: {title:'PCI',width: '12px',edit: true},\r\n\t\t\t\t\t\t\t\txa_enabled: {title:'XA',width: '12px',edit: true},\r\n\t\t\t\t\t\t\t\treconnection_logic: {title:'Auto-Reconnect',width: '12px',edit: true}\r\n\t\t\t\t\t\t\t} \r\n\t\t\t\t\t  }, \r\n\t\t\t\t\t  function (data) { data.childTable.jtable('load'); }\r\n\t\t\t\t );\r\n\t\t\t});\r\n\t\t\treturn $img;\r\n\t\t\t}\r\n\t\t}, \r\n```"}}
{"actor":{"display_login":"abhijit-mishra2003"}}