jQuery UI Widgets › Forums › DataTable › jqxDataTable auto resize table = false

Tagged: , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 9 years ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    jqxDataTable auto resize table = false Posts
  • December 21, 2015 at 9:53 am jqxDataTable auto resize table = false #79586

    No One
    Participant

    Here’s my code

    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
	<head>
		<link rel = "stylesheet" href = "http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type = "text/css" />
		<script type = "text/javascript" src = "http://jqwidgets.com/public/jqwidgets/scripts/jquery-1.11.1.min.js"> </script>
		<script type = "text/javascript" src = "http://jqwidgets.com/public/jqwidgets/jqxcore.js"> </script>
		<script type = "text/javascript" src = "http://jqwidgets.com/public/jqwidgets/jqxwindow.js"> </script>
		<script type = "text/javascript" src = "http://jqwidgets.com/public/jqwidgets/jqxdata.js"> </script>
		<script type = "text/javascript" src = "http://jqwidgets.com/public/jqwidgets/jqxdatatable.js"> </script>
		<script type = "text/javascript" src = "http://jqwidgets.com/public/jqwidgets/jqxscrollbar.js"> </script>
		<script type = "text/javascript" src = "http://jqwidgets.com/public/jqwidgets/jqxbuttons.js"> </script>
		<script type = "text/javascript" src = "http://jqwidgets.com/public/jqwidgets/jqxdropdownlist.js"> </script>
		<script type = "text/javascript" src = "http://jqwidgets.com/public/jqwidgets/jqxlistbox.js"> </script>
		<script type = "text/javascript">
			$(function()	{
				var data = [];
				
				for (var counter = 0; counter < 100; counter ++)
					data[counter] = {
						id: counter + 1,
						no: "00000000" + (counter + 1),
						desc: Math.random() * 10000000000
					};
				
				$("#jqxwindow").jqxWindow({
					showCollapseButton: true,
					maxHeight: 1000,
					maxWidth: 5000,
					minHeight: 300,
					minWidth: 500,
					height: 600,
					width: 800,
					position: "top, left"
				});
				$("#jqxwindow").on("resizing", function(event)	{
					$("#jqxdatatable").css("height", $(this).find("#windowContent").height() - 2);
				});
				$("#jqxdatatable").jqxDataTable({
					columns: [
						{ text: "Id", dataField: "id" },
						{ text: "No.", dataField: "no" },
						{ text: "Description", dataField: "desc" }
					],
					columnsResize: true,
					filterable: true,
					height: 500,
					pageable: true,
					pagerButtonsCount: 5,
					pageSize: 20,
					source: new $.jqx.dataAdapter({
						dataType: "json",
						localData: data
					}),
					width: "100%"
				});
			});
		</script>
	</head>
	<body>
		<div id = "jqxwindow">
			<div id = "windowHeader"> <span> Header </span> </div>
			<div id = "windowContent">
				<div id = "jqxdatatable"> </div>
			</div>
		</div>
	</body>
</html>

    The problem is, i want to set the table itself to maximize the window content
    I added a resizing event so that it fixes the size of the table when window is resized
    The problem is, the table is resizing back to its default ( i guess )
    Is there any attribute like autoresize: false?
    Thank you very much 🙂

    December 21, 2015 at 10:03 am jqxDataTable auto resize table = false #79590

    Peter Stoev
    Keymaster

    Hi No One,

    The problem is that you try to apply height incorrectly. To change the height, use the widget’s height property which you already used in the initialization.

    Best Regards,
    Peter Stoev

    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.