 <div id="container_ReportWIP" style="height:100%; margin:0px; padding:0px;overflow:'hidden'; border: 0px solid #cd0a0a">
	<div class="pane-header ui-state-active" id="ReportWIP_bar" >   
			 <label >PERIODE </label>
 			 <label style="margin-right:10px;">S/D :</label>
			 <input id="txtEndReportWIP" type="text" value='<?php echo $end_date; ?>' style="margin-right:10px;width:80px" />
			 <button id="btnSearchReportWIP" >SEARCH</button>
			 <button id="btnPrintReportWIPPDF"  >PRINT PDF</button> 
			 <button id="btnPrintReportWIPXLX"  >PRINT XLS</button> 
			 <button id="btnPrintReportWIPXLXS" >PRINT XLSX</button>  
	</div>
	 <table id="tblReportWIP"  /><div id="ptblReportWIP"/> 
</div> 

<script> 
  $(document).ready(function(){ 
	$(window).bind('resize', function() {   
		 setTimeout(function(){
		 setGridHight($("#tblReportWIP"),$("#container_ReportWIP"),$("#ReportWIP_bar")); 
  		},10); 
	}) ;
	
	$("#btnSearchReportWIP").button();
	$("#btnPrintReportWIPPDF").button();
	$("#btnPrintReportWIPXLX").button(); 
	$("#btnPrintReportWIPXLXS").button(); 
 
    $( "#txtEndReportWIP" ).datepicker({
		dateFormat:'yy-mm-dd',
		defaultDate: "+1w",
		changeMonth: true,
		changeYear: true,
		numberOfMonths: 4,
		onClose: function( selectedDate ) {
		//$( "#txtStartReportWIP" ).datepicker( "option", "maxDate", selectedDate );
		}
    });
	 
	$("#btnSearchReportWIP").click(function(){ 
	 	var end_date	=	$.datepicker.formatDate('yymmdd', new Date($("#txtEndReportWIP").val())) ; 
		jQuery("#tblReportWIP").jqGrid('setGridParam', { postData: {end_date : end_date } });
		$('#tblReportWIP').trigger( 'reloadGrid' );
	});
	
	function reportPrint(format){
 		var end_date	=	$.datepicker.formatDate('yymmdd', new Date($("#txtEndReportWIP").val())) ;
  	
		var dialog = jQuery('<div />')
					 .html('<div class="ui-layout-content ui-widget-content-panel">\
									<p >Are u want to print report?</p>\
								   </div>\
									<div class="pane-footer ui-state-default"></div>\
									<form hidden id="frmPrintReportWIP" method="POST" action="<?php echo base_url().'reports/CT_report_wip/printReport'; ?>"/>');  
		dialog.dialog({
				modal:true,
				width : 300,
				height : 150,
				title :'Report WIP',
				buttons: { 
					"CLOSE": function(){
						dialog.dialog("close");  
					},
					"PRINT": function() { 
					
 					$("#frmPrintReportWIP").append($("<input>").attr({"value":end_date , "name":'end_date'})); 
					$("#frmPrintReportWIP").append($("<input>").attr({"value":format , "name":'format'})); 
		 			$("#frmPrintReportWIP").submit();  
					
					dialog.dialog("close");  
					}
				},
				close : function(){
					dialog.dialog('destroy').remove(); 
				},
				open: function(){
					$("body").unblock(); 
				}
			}); 
	
	} 

	$("#btnPrintReportWIPPDF").button().click(function(){	
		reportPrint('pdf');
 	})	
 	$("#btnPrintReportWIPXLX").button().click(function(){	
		reportPrint('xls');
 	})	
 	$("#btnPrintReportWIPXLXS").button().click(function(){	
		reportPrint('xlsx');
 	})	
  
	jQuery("#tblReportWIP").jqGrid({
	   url:'<?php echo base_url().'reports/ct_report_wip/loadreport'; ?>',
                mtype : "post",
                postData:{'q':'1','end_date':'<?php echo $end_date_grid;?>'},
                datatype: "json",
                colNames:['KODE', 'NAMA', 'SAT', 'QTY', 'KETERANGAN'],
                colModel:[ 
                    {name:'r1',index:'r1', width:150},
                    {name:'r2',index:'r2', width:300},  
                    {name:'r3',index:'r3', width:40,align:'center'},  
                    {name:'r4',index:'r4', width:120,align:'right'},  
                    {name:'r5',index:'r5', width:150},   
                ],
	    rowNum:15,
		rowList:[10,15,20,30,50,100],
		pager: '#ptblReportWIP',
		sortname: 'r1',
	 	sortorder: "asc",
		shrinkToFit:false,
		autowidth: false,           
		width: '',
		height: 100,
 		rownumbers:true,
 		jsonReader: { repeatitems : false }, 
		viewrecords : true,  
		gridview:true
	}); 
	 	
	jQuery("#tblReportWIP").jqGrid('setGroupHeaders', 
          { useColSpanStyle: true, groupHeaders:[
            {startColumnName: 'r1', numberOfColumns: 2, titleText: '<em><center>ITEM</center></em>'} ] });

 	jQuery("#tblReportWIP").jqGrid('navGrid','#ptblReportWIP',{edit:false,add:false,del:false,view:true});  
	jQuery("#tblReportWIP").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false, defaultSearch: 'cn', ignoreCase: false}); 
	
	 setTimeout(function(){
		 setGridHight($("#tblReportWIP"),$("#container_ReportWIP"),$("#ReportWIP_bar")); 
	},10); 
 	
});

</script> 

  