expansion in Grid - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: content, div, expander, initialize, jqxExpander, jqxTreeGrid, tree grid, treegrid, Widget

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 9 years, 7 months ago.

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

Author

expansion in Grid Posts

April 28, 2015 at 3:48 am 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>

April 28, 2015 at 5:31 am 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/

Author

Posts

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

You must be logged in to reply to this topic.