jQuery UI Widgets Forums Navigation Expander expansion in Grid

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 5 years, 1 month ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • expansion in Grid #70326

    coni
    Participant

    Hello

    I’d like to use extensions to jqxgrid.

    but, the browser size change, or is not working properly for expansion.

    Below is my code.

    
    <!DOCTYPE html>
    <%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
    <html lang="ko">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="jQuery Tabs, Tabs Widget, TabView" />
    <meta name="description" content="The jqxTabs is breaking the content into multiple sections. You
            can populate it from 'UL' for the tab titles and 'DIV' for it's contents." />
    <!-- jQuery -->
    <script src="js/jquery-1.11.2.js"></script>
    <!-- jqWidget -->
    <link rel="stylesheet" href="static/widgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="static/widgets/jqwidgets/styles/jqx.energyblue.css" type="text/css" />
    <script type="text/javascript" src="static/widgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="static/widgets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="static/widgets/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="static/widgets/jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="static/widgets/jqwidgets/jqxtreegrid.js"></script>
    <script type="text/javascript" src="static/widgets/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="static/widgets/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="static/widgets/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="static/widgets/jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="static/widgets/jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="static/widgets/jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="static/widgets/jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="static/widgets/jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="static/widgets/jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="static/widgets/jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript">
    	$(document).ready(function() {
    
    		//var data;
    		var dataAdapter;
    		var group = new Array();
    		var data = [{"GroupID": "00001","GroupName":"Customers-Admin","ParentGroupID":null,"ParentGroupName":null,"Level":"000_Developers"},{"GroupID": "00002","GroupName":"Department of Justice","ParentGroupID":"00001","ParentGroupName":"Customers-Admin","Level":"000_Developers"},{"GroupID": "00003","GroupName":"Department of Justice","ParentGroupID":"00002","ParentGroupName":"Department of Justice","Level":"000_Developers"},{"GroupID": "00004","GroupName":"Customers-system","ParentGroupID":null,"ParentGroupName":null,"Level":"000_Developers"}];	  
    		var levelCode = [ "000_Developer", "999_AllLevel", "500_CustomerService", "400_MerchantsRights", "300_FiscalAuthority", "200_Business rights", "150_Operators", "100_System Operator" ];
    		$.ajax({
    			url : 'selectUserGroupList.ajax',
    			type : "POST",
    			cache : false,
    			async : true,
    			contentType : "application/json; charset=UTF-8",
    			datatype : "json",
    			success : function(jsonObj) {
    				//접기 셋팅
    				$("#jqxExpander").jqxExpander({
    					width : '100%',
    					expanded : true,
    					initContent : function() {
    						//debugger;
    						data = decodeURIComponent(jsonObj);
    						//// prepare the data
    						var source = {
    							dataType : "json",
    							dataFields : [ {
    								name : 'groupId',
    								type : 'string'
    							},//그룹 ID
    							{
    								name : 'groupName',
    								type : 'string'
    							}, //그룹명
    							{
    								name : 'pgroupId',
    								type : 'string'
    							}, //부모 그룹 ID
    							{
    								name : 'levelCode',
    								type : 'string'
    							} //권한레벨
    							],
    							hierarchy : {
    								keyDataField : {
    									name : 'groupId'
    								},
    								parentDataField : {
    									name : 'pgroupId'
    								}
    							},
    							id : 'groupId',
    							//contentType : "application/json;charset=UTF-8", 
    							localData : data
    						//url : "selectUserGroupList.ajax",
    						//type : 'POST'
    						};
    
    						/* dataAdapter */						
    
    						var dataAdapter = new $.jqx.dataAdapter(source);
    						
    						//그리드 셋팅
    						$("#treeGrid").jqxTreeGrid({
    							width : '100%',
    							source : dataAdapter,
    							sortable : true,
    							altRows : true,
    							toolbarHeight : 35,
    							showToolbar : true,
    							columns : [ {
    								text : '그룹명',
    								editable : false,
    								dataField : 'groupName',
    								width : '50%',
    								align : 'center'
    							}, {
    								text : '권한레벨',
    								editable : false,
    								dataField : 'levelCode',
    								width : '50%',
    								align : 'center'
    							} ],
    							ready : function() {
    								// called when the jqxTreeGrid is loaded.                    
    								$("#treeGrid").jqxTreeGrid('expandRow', 2);
    								$("#treeGrid").jqxTreeGrid('expandRow', 5);
    								$("#GroupName").jqxInput({
    									width : 150,
    									height : 30
    								});
    								$("#ParentGroupName").jqxDropDownList({
    									source : group,
    									selectedIndex : 1,
    									width : '150',
    									height : '30'
    								});
    								$("#Level").jqxDropDownList({
    									source : levelCode,
    									selectedIndex : 1,
    									width : '150',
    									height : '30'
    								});
    								$("#save").jqxButton({
    									height : 30,
    									width : 80
    								});
    								$("#cancel").jqxButton({
    									height : 30,
    									width : 80
    								});
    								$("#ok").jqxButton({
    									height : 30,
    									width : 80
    								});
    								$("#delcancel").jqxButton({
    									height : 30,
    									width : 80
    								});
    
    								//취소 버튼 클릭
    								$("#cancel").mousedown(function() {
    									$("#dialog").jqxWindow('close');
    								});
    								$("#delcancel").mousedown(function() {
    									$("#deletepop").jqxWindow('close');
    								});
    
    								//취소버튼 온
    								$("#dialog").on('close', function() {
    									// enable jqxTreeGrid.
    									$("#treeGrid").jqxTreeGrid({
    										disabled : false
    									});
    								});
    								$("#deletepop").on('close', function() {
    									// enable jqxTreeGrid.
    									$("#treeGrid").jqxTreeGrid({
    										disabled : false
    									});
    								});
    
    								//저장 버튼 클릭
    								$("#save").mousedown(function() {
    									$("#dialog").jqxWindow('close');
    									//추가&수정 로직                        
    								});
    								//삭제확인 버튼 클릭
    								$("#ok").mousedown(function() {
    									$("#deletepop").jqxWindow('close');
    									//삭제 로직
    								});
    
    								//팝업 설정
    								$("#dialog").jqxWindow({
    									resizable : false,
    									width : 270,
    									position : {
    										left : $("#treeGrid").offset().left + 75,
    										top : $("#treeGrid").offset().top + 35
    									},
    									autoOpen : false
    								});
    								$("#deletepop").jqxWindow({
    									resizable : false,
    									width : 200,
    									position : {
    										left : $("#treeGrid").offset().left + 75,
    										top : $("#treeGrid").offset().top + 35
    									},
    									autoOpen : false
    								});
    								$("#dialog").css('visibility', 'visible');
    								$("#deletepop").css('visibility', 'visible');
    
    							},
    							renderToolbar : function(toolBar) {
    								var toTheme = function(className) {
    									return className;
    								}
    								var rowKey = null;
    								var args = null;
    								// appends buttons to the status bar.
    								var container = $("<div style='overflow: hidden; position: relative; height: 100%; width: 100%;'></div>");
    								var buttonTemplate = "<div style='float: left; padding: 3px; margin: 2px;'><div style='margin: 4px; width: 16px; height: 16px;'></div></div>";
    								var addButton = $(buttonTemplate);
    								var editButton = $(buttonTemplate);
    								var deleteButton = $(buttonTemplate);
    								container.append(addButton);
    								container.append(editButton);
    								container.append(deleteButton);
    								toolBar.append(container);
    								addButton.jqxButton({
    									cursor : "pointer",
    									enableDefault : false,
    									disabled : true,
    									height : 25,
    									width : 25
    								});
    								addButton.find('div:first').addClass(toTheme('jqx-icon-plus'));
    								addButton.jqxTooltip({
    									position : 'bottom',
    									content : "추가"
    								});
    
    								editButton.jqxButton({
    									cursor : "pointer",
    									disabled : true,
    									enableDefault : false,
    									height : 25,
    									width : 25
    								});
    								editButton.find('div:first').addClass(toTheme('jqx-icon-edit'));
    								editButton.jqxTooltip({
    									position : 'bottom',
    									content : "수정"
    								});
    
    								deleteButton.jqxButton({
    									cursor : "pointer",
    									disabled : true,
    									enableDefault : false,
    									height : 25,
    									width : 25
    								});
    								deleteButton.find('div:first').addClass(toTheme('jqx-icon-delete'));
    								deleteButton.jqxTooltip({
    									position : 'bottom',
    									content : "삭제"
    								});
    
    								//이벤트에 따른 버튼 상태 설정
    								var updateButtons = function(action) {
    									switch (action) {
    									case "Select":
    										addButton.jqxButton({
    											disabled : false
    										});
    										deleteButton.jqxButton({
    											disabled : false
    										});
    										editButton.jqxButton({
    											disabled : false
    										});
    										break;
    									case "Unselect":
    										addButton.jqxButton({
    											disabled : true
    										});
    										deleteButton.jqxButton({
    											disabled : true
    										});
    										editButton.jqxButton({
    											disabled : true
    										});
    										break;
    									case "Edit":
    										addButton.jqxButton({
    											disabled : true
    										});
    										deleteButton.jqxButton({
    											disabled : true
    										});
    										editButton.jqxButton({
    											disabled : true
    										});
    										break;
    									case "End Edit":
    										addButton.jqxButton({
    											disabled : false
    										});
    										deleteButton.jqxButton({
    											disabled : false
    										});
    										editButton.jqxButton({
    											disabled : false
    										});
    										break;
    									}
    								}
    
    								$("#treeGrid").on('rowSelect', function(event) {
    									args = event.args;
    									rowKey = args.key;
    									updateButtons('Select');
    								});
    								$("#treeGrid").on('rowUnselect', function(event) {
    									updateButtons('Unselect');
    								});
    								$("#treeGrid").on('rowEndEdit', function(event) {
    									updateButtons('End Edit');
    								});
    								$("#treeGrid").on('rowBeginEdit', function(event) {
    									updateButtons('Edit');
    								});
    								//추가 버튼 이벤트
    								addButton.click(function(event) {
    									if (!addButton.jqxButton('disabled')) {
    										var key = args.key;
    										var row = args.row
    										// update the widgets inside jqxWindow.
    										$("#dialog").jqxWindow('setTitle', "그룹 추가");
    										$("#dialog").jqxWindow('open');
    										$("#dialog").attr('data-row', key);
    										$("#GroupName").val('');
    										$("#ParentGroupName").jqxDropDownList('selectItem', row.ParentGroupName);
    										$("#Level").jqxDropDownList('selectItem', row.Level);
    										// disable jqxTreeGrid.
    										$("#treeGrid").jqxTreeGrid({
    											disabled : true
    										});
    
    										updateButtons('add');
    									}
    								});
    								//수정 버튼 이벤트
    								editButton.click(function() {
    									if (!editButton.jqxButton('disabled')) {
    										EditPopup(args);
    										updateButtons('edit');
    									}
    								});
    								//삭제 버튼 이벤트
    								deleteButton.click(function() {
    									if (!deleteButton.jqxButton('disabled')) {
    										$("#deletepop").jqxWindow('setTitle', "삭제");
    										$("#deletepop").jqxWindow('open');
    										$("#treeGrid").jqxTreeGrid({
    											disabled : true
    										});
    										updateButtons('delete');
    									}
    								});
    							}
    						});
    					}
    				});
    			},
    			error : function(XMLHttpRequest, textStatus, errorThrown) {
    				alert(XMLHttpRequest.status + " : " + errorThrown);
    			}
    		});
    		var strHTML = "<input type='button' id='jqxButton' value='Button' /><div id='mygrid'></div>";
    		$("#jqxExpander").jqxExpander('setContent', strHTML);
    
    		//더블클릭 수정 팝업
    		$("#treeGrid").on('rowDoubleClick', function(event) {
    			EditPopup(event.args);
    		});
    
    		function EditPopup(args) {
    			var key = args.key;
    			var row = args.row;
    			// update the widgets inside jqxWindow.
    			$("#dialog").jqxWindow('setTitle', "수정: " + row.GroupName);
    			$("#dialog").jqxWindow('open');
    			$("#dialog").attr('data-row', key);
    			$("#GroupName").val(row.GroupName);
    			$("#ParentGroupName").jqxDropDownList('selectItem', row.ParentGroupName);
    			$("#Level").jqxDropDownList('selectItem', row.Level);
    			// disable jqxTreeGrid.
    			$("#treeGrid").jqxTreeGrid({
    				disabled : true
    			});
    		}
    		;
    	});
    </script>
    </head>
    <body class='default'>
      <div id='jqxExpander'>
        <div>사용자 그룹관리</div>
        <div id="treeGrid"></div>
      </div>
      <div style="visibility: hidden;" id="dialog">
        <div>Edit Dialog</div>
        <div style="overflow: hidden;">
          <table style="table-layout: fixed; border-style: none;">
            <tr>
              <td align="right">그룹명:</td>
              <td align="left"><input id="GroupName" type="text" /></td>
            </tr>
            <tr>
              <td align="right">상위그룹:</td>
              <td align="left">
                <div id="ParentGroupName"></div>
              </td>
            </tr>
            <tr>
              <td align="right">권한레벨:</td>
              <td align="left">
                <div id="Level"></div>
              </td>
            </tr>
            <tr>
              <td colspan="2" align="right"><br />
                <button id="save">저장</button>
                <button style="margin-left: 5px;" id="cancel">취소</button></td>
            </tr>
          </table>
        </div>
      </div>
      <div style="visibility: hidden;" id="deletepop">
        <div>Delete Dialog</div>
        <div style="overflow: hidden;">
          <table style="table-layout: fixed; border-style: none;">
            <tr>
              <td align="center"><div>삭제 하시겠습니까?</div></td>
            </tr>
            <tr>
              <td align="center"><br />
                <button id="ok">확인</button>
                <button style="margin-left: 5px;" id="delcancel">취소</button></td>
            </tr>
          </table>
        </div>
      </div>
    </body>
    </html>
    
    • This topic was modified 5 years, 1 month ago by  coni.
    expansion in Grid #70332

    Dimitar
    Participant

    Hello coni,

    The jqxTreeGrid has to be initialized from a div inside the jqxExpander’s content div, not the content div itself, i.e.:

    <div id='jqxExpander'>
        <div>사용자 그룹관리</div>
        <div>
            <div id="treeGrid"></div>
        </div>
    </div>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.