jQWidgets Forums

This topic contains 2 replies, has 2 voices, and was last updated by mr_putersmit 7 years, 10 months ago.

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

Author

Grid does not size correctly Posts

June 5, 2017 at 7:57 am Grid does not size correctly #94090

Participant

Hello
I am using the latest version of widgets and have started to experiment with using the jqxcombobox widget. However, I am faced with a weird problem which for the life of me I cannot solve, hence my post. Whatever size I set in the grid options either in % or 800 for example, the griad never extends beyond the width of the columns. It seems to never go beyond 50% of the screen size.

I am confused however, as I am using the grid elsewhere and it is fine. I need to sort this and would be grateful if someone could check my code for errors or offer some advice as to how I can troubleshoot this. Many thanks.

<!DOCTYPE html>
   <html lang="">
      <head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		
		 <link rel="stylesheet" href="styles/jqx.base.css" type="text/css" />
		 <link rel="stylesheet" href="styles/jqx.ui-redmond.css" type="text/css" />
		 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
		 <script type="text/javascript" src="js/jqx-all.js"></script>

		 <script type="text/javascript" src="scripts/gettheme.js"></script>
		 <script type="text/javascript" src="globalization/globalize.js"></script>
		 <script type="text/javascript" src="globalization/jquery.global.js"></script>
		 <style type="text/css">
	
		 .jqx-widget-header-ui-redmond {
			 
			 font-size: 11px !important;
			 
		 }
		 
		 .jqx-grid-cell {
			 
			 font-size: 12px !important;
			 
		 }
		 
		 .jqx-input {
			 
			 padding-left: 5px !important;
			 
		 }
		 
		 #address {
			
		text-transform: capitalize;
			 
		 }
		 
		 #rack {
			
		text-transform: uppercase;
			 
		 }
			 
	 </style>
	 <script type="text/javascript">
	 $(document).ready(function() { 
	 
	 // prepare the data
		var actionTypeSource =
		[
 			"New Intake",
			"Box Destruction",
			"Box Retrieval",
			"Box Return",
			"Permanent Retrieval",
			
		];
		 var actionTypeDataAdapter = new $.jqx.dataAdapter(actionTypeSource);
		// create a comboBox. 
	 
	  	$("#jqxcombobox").jqxComboBox(
 			{
 				width: 250,
				height: 25,
				 autoDropDownHeight: true,
				 theme: 'ui-redmond',
				source: actionTypeDataAdapter,
				promptText: 'Select an Action',
				selectedIndex: -1,
				displayMember: 'type',
				valueMember: 'type'
			});
		 
		 $("#jqxcombobox").bind('select', function(event) {
			 
			// get employee's ID.
			var actionType = event.args.item.value;
			 
			 if(actionType == "Box Destruction") {
			 
			// prepare the data
			var actionSource =
			{
				datatype: "json",
				datafields: [
				{ name: 'id', type: 'int'},
				{ name: 'slot', type: 'string'},
				{ name: 'service', type: 'string'},
				{ name: 'activity', type: 'string'},
				{ name: 'company', type: 'string'},
				{ name: 'item', type: 'string'},
				{ name: 'destroyedby_date', type: 'string'}
				],
				type: 'POST',
				data: {actionType:actionType},
				url: "actionsType.php"
			};
			var dataAdapter = new $.jqx.dataAdapter(actionSource);
				 
			$("#jqxgrid").jqxGrid({ 
			width: "95%",
			theme:'ui-redmond',
			height: 346,
			source: dataAdapter,
			pageable: true,
			sortable: true,
			editable: true,
			enabletooltips: true,
			editmode: 'click',
			filterable: true,
			autoheight: false,
			showemptyrow: true,
			pagesize: 10,
			pagesizeoptions: ['15', '20', '30', '40'],
			selectionmode: 'singlecell',
			columnsResize: true,
			columns: 
			[
				{datafield: "id", text: "Id", hidden: true},
				{datafield: "slot", text: "Slot", width: '10%'},
				{datafield: "service", text: "Service"},
				{datafield: "activity", text: "Activity"},
				{datafield: "company", text: "Company"},
				{datafield: "item", text: "Item"},
				{datafield: "destroyedby_date", text: "Destroyed Date"}
			]
		    });
		 }
	     }); 
	});
    </script>
</head>

<body>
    <div style = "margin: 0 auto; text-align: center; font-size: 24px; background-color: #000; color: white; height: 30px; width: 95%;"></div>
		
    <div id='new' style="font-size: 13px; font-family: Verdana; float: left; margin-top: 20px; margin-left: 36px;">
        <span>Get Actions by Type:</span>
        <div style="margin-top: 9px; margin-bottom: 11px;" id="jqxcombobox"></div>
	<div id="jqxgrid"></div>
    </div>
</body>
</html>

June 5, 2017 at 10:19 am Grid does not size correctly #94095

Stanislav

Participant

Hello putersmit,

We couldn’t re-create the problem you seem to be having. Could you please give us a little more information on the exact problem and some kind of an image of the problem, so we can understand it better.

Best Regards,
Stanislav

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

June 12, 2017 at 7:20 am Grid does not size correctly #94267

mr_putersmit

Participant

Hi Stanislav
Couldn’t figure the problem either, so decided to go along another route. Thanks for your help.

Author

Posts

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

You must be logged in to reply to this topic.