[cpuinParticipant]

Dear Ivailo,

Why this code alert the label, not the value?

`
$(‘#company’).jqxInput(‘val’, {label: row.Company, value: 33});
alert($(‘#company’).val());
‘

[cpuinParticipant]

Dear Ivailo,

I didn’t set a source , because i don’t need any source!It’s simple empty filed on which later when company is selected in the table i want to SET display and value member to the filed.Before this there is no need of source.

[cpuinParticipant]

Dear Nadhezda,

I have no idea, but my table is not loading when there is no record in the returned JSON.
In my projects i have tables which displays No data (what i want) when empty JSON is returned and tables which showing “loading…”
when empty JSOn is returned.I compared them, but becaus eof the large code i can’t find when i make a mistake.I don’t know so good the details of the your framework, but this stands on my way…

Here is the full code.

// CREATE DATE WIDGET --------------------------------------------------------------------------------					
$("#startDate").jqxDateTimeInput({width: '100px', height: '25px', formatString: "yyyy-MM-dd"});
		   		
		   		
$("#endDate").jqxDateTimeInput({width: '100px', height: '25px', formatString: "yyyy-MM-dd"});
		   		
// INIT --------------------------------------------------------------------------------------

var start = $('#startDate').val();
var end = $('#endDate').val();
var url = 'json_documents.php?' + "startDate=" + start + "&endDate=" + end;
createTable(url);
				
// CREATE TABLE ------------------------------------------------------------------------------------						

			function createTable(url) {
			
			var source =
						{
							datatype: "json",
							datafields: [
								{ name: 'ID', type: 'int'},
								{ name: 'Acct', type: 'int'},
								{ name: 'InvoiceNumber', type: 'string'},
								{ name: 'partnerName' , type: 'string'},
								{ name: 'ObjectID' , type: 'string'},
								{ name: 'InvoiceDate' , type: 'string'}
							],
							url: url,
							cache: false,
							addRow: function (rowID, rowData, position, commit) {
							           var data = "insert=true&" + $.param(rowData);
							           $.ajax({
							               dataType: 'json',
							               url: 'json_documents.php',
							               cache: false,
							               data: data,
							               success: function (data, status, xhr) {
							                   // update command is executed.
							                   commit(true);
							               },
							               error: function (jqXHR, textStatus, errorThrown) {
							                   commit(false);
							                   alert(errorThrown);
							                   }
							                  });
							                },
							updateRow: function (rowID, rowData, commit) {
									   var data = "" + $.param(rowData);
									   $.ajax({
										   dataType: 'json',
										   url: '',
										   cache: false,
										   data: data,
										   success: function (data, status, xhr) {
											   // update command is executed.
											   commit(true);
										   },
										   error: function (jqXHR, textStatus, errorThrown) {
											   commit(false);
											   alert('Does not work :(');
											   }
											  });
											},
							deleteRow: function (rowID, commit) {
												// synchronize with the server - send delete command
												// call commit with parameter true if the synchronization with the server is successful 
												// and with parameter false if the synchronization failed.
												commit(true);
											}
											
						};
						
						
// DELETE DOCUMNET -----------------------------------------------------------------------------------

				 
				 
				 
				 
				 
				 var dataAdapter = new $.jqx.dataAdapter(source);
				 
				 //this.editrow = -1;
				 
				 $("#dataTable").jqxDataTable(
				 				 {
				 					 width: 750,
				 					 pageable: true,
				 					 pagerButtonsCount: 10,
				 					 source: dataAdapter,
				 					 filterable: true,
				 					 filterMode: 'simple',
				 					 sortable: true,
				 					 selectionMode: 'none',
				 					 enableHover:false,
				 					 columnsResize: false,
				 					 altRows: true,
				 					 showAggregates: false,
				 					 aggregatesHeight: 60,
				 					 //autoShowLoadElement: false,
				 					 rendered: function () {
				 					 			//PRINT DOWNLOAD -------------------------------------                   
				 					                $(".printButtons").jqxButton({ width: 60, template: "inverse" });
													$(".printButtons").on('click', function (event) {
														if (event.target.tagName =="BUTTON") {
														        var row = $(event.target).attr('data-row');
														        var cellValueAcct = $("#dataTable").jqxDataTable('getCellValue', row, 'Acct');
														        

														//CREATE WINDOW
														$('#eventWindow').jqxWindow({
														                maxHeight: 180,
														                maxWidth: 280,
														                minHeight: 30, 
														                minWidth: 250, 
														                height: 180, 
														                width: 270,
														                resizable: false, 
														                isModal: true, 
														                modalOpacity: 0.3,
														                okButton: $('#print'), cancelButton: $('#cancel'),
														                initContent: function () {
														                    $("#bg").jqxRadioButton({ width: 120, height: 25, groupName: "Print", checked: true});
														                    $("#en").jqxRadioButton({ width: 120, height: 25,groupName: "Print", checked: false});
														                    $('#print').jqxButton({ width: '80px' });
														                    $('#cancel').jqxButton({ width: '80px' });
														                    $('#print').focus();
														                    
														                }
														               
														            });
														//OPEN THE WINDOW
														$("#eventWindow").jqxWindow('open');
														$("#eventWindow").css('visibility', 'inherit');
														$("#print").off("mousedown");
														$("#print").on("mousedown",function() {
																
														$("#eventWindow").jqxWindow('close');
														//print PDF
														//var saleNumber = $("#invAcct").val();
														
														var saleNumber = cellValueAcct;
														if ($("#bg").val()==true) {
															//BG
															var url = "invoicebg.php?saleNumber=" + saleNumber + "&do=print";				        			var myWindow=window.open(url, "_blank", "toolbar=no, scrollbars=no, resizable=no, top=10, left=350, width=600, height=700");
															myWindow.focus();
															myWindow.print();
														}
														else {
															//EN
														
														    var url = "invoiceen.php?saleNumber=" + saleNumber + "&do=print";				        		    var myWindow=window.open(url, "_blank", "toolbar=no, scrollbars=no, resizable=no, top=10, left=350, width=600, height=700");
														    myWindow.focus();
														    myWindow.print();
														}				        				
																		
															});
													}
											    });
											    
											    
											    //PDF DOWNLOAD ---------------------------------------
											    $(".pdfButtons").jqxButton({ width: 60, template: "success" });
											    $(".pdfButtons").on('click', function (event) {
											    	if (event.target.tagName =="BUTTON") {
											    	        var row = $(event.target).attr('data-row');
											    	        var cellValueAcct = $("#dataTable").jqxDataTable('getCellValue', row, 'Acct');
											    	        }
											    	
											    
											    //CREATE WINDOW
											    $('#pdfWindow').jqxWindow({
											                    maxHeight: 180,
											                    maxWidth: 280,
											                    minHeight: 30, 
											                    minWidth: 250, 
											                    height: 180, 
											                    width: 270,
											                    resizable: false, 
											                    isModal: true, 
											                    modalOpacity: 0.3,
											                    okButton: $('#download_pdf'), cancelButton: $('#cancel_pdf'),
											                    initContent: function () {
											                        $("#bg_pdf").jqxRadioButton({ width: 120, height: 25, groupName: "PDF", checked: true});
											                        $("#en_pdf").jqxRadioButton({ width: 120, height: 25, groupName: "PDF", checked: false});
											                        $('#download_pdf').jqxButton({ width: '80px' });
											                        $('#cancel_pdf').jqxButton({ width: '80px' });
											                        $('#download_pdf').focus();
											                        
											                    }
											                   
											                });
											       //OPEN THE WINDOW
											       $("#pdfWindow").jqxWindow('open');
											       $("#pdfWindow").css('visibility', 'inherit');
											       $("#download_pdf").off("mousedown");
											       $("#download_pdf").on("mousedown",function() {
											       		
											       $("#pdfWindow").jqxWindow('close');
											       var saleNumber = cellValueAcct;
											       if ($("#bg_pdf").val()==true) {
											       	//BG
											       	var url = "invoicebg.php?saleNumber=" + saleNumber+ "&do=download";	
											       	var myWindow=window.open(url);
											       				        			
											       }
											       
											       else {
											       	//EN
											       	var url = "invoiceen.php?saleNumber=" + saleNumber+ "&do=download";	
											       		var myWindow=window.open(url);
											       
											           
											       }				        				
											       				
											       	
											       });
											     
											    });
											    											    
											    //DELETE BUTTONS -------------------------------------
											    
											    $(".deleteButtons").jqxButton({ width: 60, template: "danger" });
											    $(".deleteButtons").on('click', function (event) {
											    	if (event.target.tagName =="BUTTON") {
											    	
											    	//CREATE WINDOW
											    	$('#deleteDialog').jqxWindow({
											    	                maxHeight: 150,
											    	                maxWidth: 280,
											    	                minHeight: 30, 
											    	                minWidth: 250, 
											    	                height: 180, 
											    	                width: 270,
											    	                resizable: false, 
											    	                isModal: true, 
											    	                modalOpacity: 0.3,
											    	                okButton: $('#deleteDocument'), cancelButton: $('#cancelDocument'),
											    	                initContent: function () {
											    	                
											    	                    $('#deleteDocumentButton').jqxButton({ width: '80px' });
											    	                    $('#cancelDocumentButton').jqxButton({ width: '80px' });
											    	                    $('#deleteDocumentButton').focus();
											    	                    
											    	                }
											    	               
											    	            });
												  $("#deleteDialog").jqxWindow('open');
												  $("#deleteDialog").css('visibility', 'inherit');
												  $("#deleteDocumentButton").off("mousedown");
											      $("#deleteDocumentButton").on("mousedown",function() {
											      		var row = $(event.target).attr('data-row');
														deleteDocument(row);
													});
												  $("#cancelDocumentButton").on("mousedown",function() {
												  	    $("#deleteDialog").jqxWindow('close');
												  	});
											    	        
											    	        }
											    	
											    });
											    
											 	
				 					   },
				 					 columns: [
				 					 	 { text: 'Дата:', dataField: 'InvoiceDate' , width: 150},
				 					 	 //{ text: 'Acct:', dataField: 'Acct' , width: 100},
				 						 { text: 'Ф-ра номер:', dataField: 'InvoiceNumber', width: 100 },
				 						 { text: 'Обект:', dataField: 'ObjectID', cellsFormat: 'f', width: 150 },
				 						 { text: 'Партньор:', dataField: 'partnerName', width:150},
				 						 { text: '', cellsAlign: 'center', columnType: 'none', width:65, editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) {
				 						                           // render custom column.
				 						                           return "<button data-row='" + row + "' class='printButtons'>Печат</button>";
				 												
				 													
				 						                       }
				 						 },
				 						 { text: '', cellsAlign: 'center', columnType: 'none', width:65, editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) {
				 						                            // render custom column.
				 						                            return "<button data-row='" + row + "' class='pdfButtons'>PDF</button>";
				 						 						
				 						 							
				 						                        }
				 						  },
				 						  
				 						  { text: '', cellsAlign: 'center', columnType: 'none', width:65, editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) {
				 						                              // render custom column.
				 						                              return "<button data-row='" + row + "' class='deleteButtons'>Анулирай</button>";
				 						   						
				 						   							
				 						                          }
				 						    }
				 						 
				 						 						  
				 						 ]
				 						 
				 				 });
				 				            
			
			}
						

// DELETE ROW

				function deleteDocument(row) {
				
				
				//var row = $(event.target).attr('data-row');
				var cellValueAcct = $("#dataTable").jqxDataTable('getCellValue', row, 'Acct');
				var data = {
				"delete": "true",
				"Acct": cellValueAcct,
				};
				
				$.ajax({
						dataType: 'text',
						url: 'json_documents.php',
						cache: false,
						data: data,
						type: 'POST',
						success: function (status, xhr) {
						
						  $("#deleteDialog").jqxWindow('close');
						  $("#dataTable").jqxDataTable('updateBoundData');
						},
						error: function (jqXHR, textStatus, errorThrown) {
										        
										  
					    }
					});
					
					
				};
		   		
		   		
// CREATE SUBIMT BUTTON ------------------------------------------------------------------------------

		   		$("#submitButton").jqxButton({width: '100px', height: '25px'});
		   		$("#submitButton").mousedown(function() {
		   					var start = $('#startDate').val();
		   					var end = $('#endDate').val();
		   					
		   					//check which arguments are selected
		   					
		   					url = 'json_documents.php?' + "startDate=" + start + "&endDate=" + end;
		   					createTable(url);
		   					
		   					
		   		});
		   		
				
// CREATE EXPORT and PRINT BUTTONS of the TABLE ------------------------------------------------------
		   
		   		
		   		$("#excelExport").jqxButton();
		   					$("#xmlExport").jqxButton();
		   					$("#csvExport").jqxButton();
		   					$("#tsvExport").jqxButton();
		   					$("#htmlExport").jqxButton();
		   					$("#jsonExport").jqxButton();
		   					$("#excelExport").click(function () {
		   						$("#dataTable").jqxDataTable('exportData', 'xls');
		   					});
		   					$("#xmlExport").click(function () {
		   						$("#dataTable").jqxDataTable('exportData', 'xml');
		   					});
		   					$("#csvExport").click(function () {
		   						$("#dataTable").jqxDataTable('exportData', 'csv');
		   					});
		   					$("#tsvExport").click(function () {
		   						$("#dataTable").jqxDataTable('exportData', 'tsv');
		   					});
		   					$("#htmlExport").click(function () {
		   						$("#dataTable").jqxDataTable('exportData', 'html');
		   					});
		   					$("#jsonExport").click(function () {
		   						$("#dataTable").jqxDataTable('exportData', 'json');
		   					});
		   					
		   		 $("#printButton").jqxButton({ width: 100 });
		   				  
		   					$("#printButton").click(function () {
		   						 var gridContent = $("#dataTable").jqxDataTable('exportData', 'html');
		   						 var newWindow = window.open('', '', 'width=800, height=500'),
		   						 document = newWindow.document.open(),
		   						 pageContent =
		   							 '<!DOCTYPE html>' +
		   							 '<html>' +
		   							 '<head>' +
		   							 '<meta charset="utf-8" />' +
		   							 '<title>jQWidgets DataTable</title>' +
		   							 '</head>' +
		   							 '<body>' + gridContent + '</body></html>';
		   						 document.write(pageContent);
		   						 document.close();
		   						 newWindow.print();
		   					 });
		   					 
			});
//END -----------------------------------------------------------------------------------------      

	</script>
	
	
	<div style='margin-top: 20px;'>
		<div style='float: left;' id="startDate" type="date" name="startdate"></div>
		<div style='float: left;' id="endDate" type="date" name="endDate" /></div>
	<input type="button" value="Изпрати" id='submitButton' />
	</div>
	<br>
	<div id="dataTable"></div>
	<div style='margin-top: 20px;'>
		<div style='float: left;'>
			<input type="button" value="Export to Excel" id='excelExport' />
			<br />
			<br />
			<input type="button" value="Export to XML" id='xmlExport' />
		</div>
		<div style='margin-left: 10px; float: left;'>
			<input type="button" value="Export to CSV" id='csvExport' />
			<br />
			<br />
			<input type="button" value="Export to TSV" id='tsvExport' />
		</div>
		<div style='margin-left: 10px; float: left;'>
			<input type="button" value="Export to HTML" id='htmlExport' />
			<br />
			<br />
			<input type="button" value="Export to JSON" id='jsonExport' />
		</div>
	</div>
	<div style='margin-top: 20px;'>
		<div style='margin-left: 10px; float: left;'>
			<input type="button" value="Print" id='printButton' />
		</div>
	</div>
	
		      
	      
	      
	      <div id="eventWindow" style="visibility: hidden;">
	      <div id="windowHeader">
	                          <span>
	                              <img src="css/myicons/icon_ok.png" height="20" alt="" style="margin-right: 15px" />
	                          </span>
	        </div>
	      	<div>
	        	<table width="100%">
	        		<tr>
	        			<td valign="center" align="center" height="30" colspan="2"><font color="green">Изберете език на документа:</font></td>
	        		</tr>
	            	<tr>
	            		<td width="80" valign="center" align="center" height="70" colspan="2">
	            		<div id="bg">BG(BGN)</div>
	            		<div id="en">EN(EUR)</div>
	            		</td>
	                </tr>
	                <tr>
	                	<td width="80"></td>
	                	<td width="80" colspan="2">
	                		<button id="cancel">Отказ</button>
	                		<button id="print">Принтирай</button>
	                	</td>
	                </tr>
	            </table>	                          
	      	</div>
	      </div>
	      
	      
	      
	      
	      <div id="pdfWindow" style="visibility: hidden;">
	      <div id="windowHeader2">
	                          <span>
	                              <img src="css/myicons/icon_ok.png" height="20" alt="" style="margin-right: 15px" />
	                          </span>
	        </div>
	      	<div>
	        	<table width="100%">
	        		<tr>
	        			<td valign="center" align="center" height="30" colspan="2"><font color="green">Изберете език за PDF документа:</font></td>
	        		</tr>
	            	<tr>
	            		<td width="80" valign="center" align="center" height="70" colspan="2">
	            		<div id="bg_pdf">BG(BGN)</div>
	            		<div id="en_pdf">EN(EUR)</div>
	            		</td>
	                </tr>
	                <tr>
	                	<td width="80"></td>
	                	<td width="80" colspan="2">
	                		<button id="cancel_pdf">Отказ</button>
	                		<button id="download_pdf">Свали</button>
	                	</td>
	                </tr>
	            </table>	                          
	      	</div>
	      </div>
	      
	      
	      
	      
	      <div id="deleteDialog" style="visibility: hidden;">
	      <div id="windowHeader3">
	                          <span>
	                              <img src="css/myicons/icon_attention.png" height="20" alt="" style="margin-right: 15px" />
	                          </span>
	        </div>
	      	<div>
	        	<table width="100%" height="100%">
	        		<tr height="50">
	        			<td valign="center" align="center" colspan="2"><font color="">Сигурни ли сте , че искате да изтриете документа? <br>Той няма да може да бъде възтановен!</font></td>
	        		</tr>
	                <tr>
	                	<td width="80"></td>
	                	<td width="80" colspan="2">
	                		
	                		<button id="cancelDocumentButton">Отказ</button>
	                		<button id="deleteDocumentButton">Изтрий</button>
	                	</td>
	                </tr>
	            </table>	                          
	      	</div>
	      </div>

[cpuinParticipant]

I can’t combine them in one.
When open the page there is a #company with empty field.
Next to the filed is a button and when click on it a window opens.
There is a table with “companie” when pick one and make double click on the row the selected index must be set on the “#company”.
But, the Display name shoudl be the name of the company and the ID shpuld be the value.

Here is a part of the code:

// CHOOSE COMPANY ------------------------------------------------------------------------------------

						var url = "json_partners.php";
						                // prepare the data
						var companies =
						                {
						                    datatype: "json",
						                    datafields: [
						                    	{ name: 'ID' },
						                        { name: 'Bulstat' },
						                        { name: 'Company' }
						                    ],
						                    url: url
						                };
						var dataAdapter = new $.jqx.dataAdapter(companies);
						
						$("#company").jqxInput({height: 25, width: 300, minLength: 1});
						
						
						$("#selectCompanyBtn").jqxButton({width:80});
						
						            
						$("#selectCompanyBtn").mousedown(function () {
							$('#selectCompanyWin').jqxWindow({
							                maxHeight: 360, maxWidth: 500, minHeight: 360, minWidth: 500, height: 180, width: 270,
							                resizable: false, isModal: true, modalOpacity: 0.3
							            });
							$("#selectCompanyOKBtn").jqxButton({width:80});
							$("#selectCompanyCancelBtn").jqxButton({width:80});
							$("#selectCompanyWin").css('visibility', 'inherit');                        
					    	$("#selectCompanyWin").jqxWindow('open');
							                        
							                    }); 
						
						$("#selectCompanyCancelBtn").mousedown(function () {
						
							$("#selectCompanyWin").jqxWindow('close');
							});
						
//						$("#company").on("select",
//						function () {
//						    $("#company").prop("readonly", true);
//						});

						 $("#tableCompany").jqxDataTable(
						       {
						        source: dataAdapter,
						        pageable: true,
						        pageSize: 5,
						        pagerButtonsCount: 10,
						        altRows: true,
						        filterable: true,
						        height: 240,
						        filterMode: 'simple',
						        width: 480,
						        columns: [
						        	{ text: 'Име', dataField: 'Company', width: 240 },
						            { text: 'ЕИК', dataField: 'Bulstat', width: 240 }
						                                        
						                ]
						            });
						            
						   $("#tableCompany").on('rowDoubleClick', function (event) {
						         var args = event.args;
						         var index = args.index;
						         var row = args.row;
                                 $("#company").jqxInput({displayMember: row.Company, valueMember: row.ID});
						         
						           		   		 
						                      //$("#saleTable").jqxDataTable('updateBoundData');
						                      //HIDE COLUMN
						                      //$("#saleTable").jqxDataTable('hideColumn','IDs');
						                      $("#selectCompanyWin").jqxWindow('close');
						                      
						                      
						                 });

[cpuinParticipant]

I initialise the code like this: $("#company").jqxInput({height: 25, width: 300, minLength: 1});

after that i want to set different value and display members like this $("#company").jqxInput({displayMember: row.Company, valueMember: row.ID});

No error, but there is nothing set!

[cpuinParticipant]

Dear Ivailo,

I have found another solution , but i need to know how to set jqxInput’s valueMember and displayMember?
I know how to set a value, but i need to set different displayMember?

[cpuinParticipant]

Dear Ivailo,

The selection that the user can choose from are name of companies from DB.The idea is one selected the company, that the user can’t change it’s name or if he for some reason choose wrong company to can re-select another one.I really don’t want to make additional window only for this, because the solution you give for filtering is great, but i can’t figure out how to achieve this, because don’t know in details the possibilities of your framework.

[cpuinParticipant]

Dear Ivailo,

I thought the same about the second solution, but it’s not a good practice.
About the fist one i can’t understand what you mean with “strict filtering”?

[cpuinParticipant]

Dear Ivailo,

Thank you for your suggestion, but on this way if the selected value is wrong, the user can’t select other!

[cpuinParticipant]

I have to update my HTML knowledge, but the problem is that first i need select some value from the source and after that i don’t want this value to be modify:

var url = "json_partners.php";
						                // prepare the data
						var companies =
						                {
						                    datatype: "json",
						                    datafields: [
						                    	{ name: 'ID' },
						                        { name: 'Bulstat' },
						                        { name: 'Company' }
						                    ],
						                    url: url
						                };
						var dataAdapter = new $.jqx.dataAdapter(companies);
						$("#company").jqxInput({placeHolder: "Избери партньор", displayMember: "Company", valueMember: "ID", height: 25, width: 300, minLength: 1,  source: dataAdapter});

[cpuinParticipant]

I tried to register in JSFiddle, but there is a pain.

Here is the part of the code you need.Thank you in advance:

function createTable(url) {
			
			var source =
						{
							datatype: "json",
							datafields: [
								{ name: 'ID', type: 'int'},
								{ name: 'Acct', type: 'int'},
								{ name: 'InvoiceNumber', type: 'string'},
								{ name: 'partnerName' , type: 'string'},
								{ name: 'ObjectID' , type: 'string'},
								{ name: 'InvoiceDate' , type: 'string'}
							],
							url: url,
							cache: false,
							addRow: function (rowID, rowData, position, commit) {
							           var data = "insert=true&" + $.param(rowData);
							           $.ajax({
							               dataType: 'json',
							               url: 'json_documents.php',
							               cache: false,
							               data: data,
							               success: function (data, status, xhr) {
							                   // update command is executed.
							                   commit(true);
							               },
							               error: function (jqXHR, textStatus, errorThrown) {
							                   commit(false);
							                   alert(errorThrown);
							                   }
							                  });
							                },
							updateRow: function (rowID, rowData, commit) {
									   var data = "" + $.param(rowData);
									   $.ajax({
										   dataType: 'json',
										   url: '',
										   cache: false,
										   data: data,
										   success: function (data, status, xhr) {
											   // update command is executed.
											   commit(true);
										   },
										   error: function (jqXHR, textStatus, errorThrown) {
											   commit(false);
											   alert('Does not work :(');
											   }
											  });
											},
							deleteRow: function (rowID, commit) {
												// synchronize with the server - send delete command
												// call commit with parameter true if the synchronization with the server is successful 
												// and with parameter false if the synchronization failed.
												commit(true);
											}
											
						};

var dataAdapter = new $.jqx.dataAdapter(source);
				 
				 this.editrow = -1;
				 
				 $("#dataTable").jqxDataTable(
				 				 {
				 					 width: 750,
				 					 pageable: true,
				 					 pagerButtonsCount: 10,
				 					 source: dataAdapter,
				 					 filterable: true,
				 					 filterMode: 'simple',
				 					 sortable: true,
				 					 selectionMode: 'none',
				 					 enableHover:false,
				 					 columnsResize: false,
				 					 altRows: true,
				 					 showAggregates: false,
				 					 aggregatesHeight: 60,
				 					 //autoShowLoadElement: false,
				 					 rendered: function () {
				 					 			//PRINT DOWNLOAD -------------------------------------                   
				 					                $(".printButtons").jqxButton({ width: 60, template: "inverse" });
													$(".printButtons").on('click', function (event) {
														if (event.target.tagName =="BUTTON") {
														        var row = $(event.target).attr('data-row');
														        var cellValueAcct = $("#dataTable").jqxDataTable('getCellValue', row, 'Acct');
														        

														//CREATE WINDOW
														$('#eventWindow').jqxWindow({
														                maxHeight: 180,
														                maxWidth: 280,
														                minHeight: 30, 
														                minWidth: 250, 
														                height: 180, 
														                width: 270,
														                resizable: false, 
														                isModal: true, 
														                modalOpacity: 0.3,
														                okButton: $('#print'), cancelButton: $('#cancel'),
														                initContent: function () {
														                    $("#bg").jqxRadioButton({ width: 120, height: 25, groupName: "Print", checked: true});
														                    $("#en").jqxRadioButton({ width: 120, height: 25,groupName: "Print", checked: false});
														                    $('#print').jqxButton({ width: '80px' });
														                    $('#cancel').jqxButton({ width: '80px' });
														                    $('#print').focus();
														                    
														                }
														               
														            });
														//OPEN THE WINDOW
														$("#eventWindow").jqxWindow('open');
														$("#eventWindow").css('visibility', 'inherit');
														$("#print").off("mousedown");
														$("#print").on("mousedown",function() {
																
														$("#eventWindow").jqxWindow('close');
														//print PDF
														//var saleNumber = $("#invAcct").val();
														
														var saleNumber = cellValueAcct;
														if ($("#bg").val()==true) {
															//BG
															var url = "invoicebg.php?saleNumber=" + saleNumber + "&do=print";				        			var myWindow=window.open(url, "_blank", "toolbar=no, scrollbars=no, resizable=no, top=10, left=350, width=600, height=700");
															myWindow.focus();
															myWindow.print();
														}
														else {
															//EN
														
														    var url = "invoiceen.php?saleNumber=" + saleNumber + "&do=print";				        		    var myWindow=window.open(url, "_blank", "toolbar=no, scrollbars=no, resizable=no, top=10, left=350, width=600, height=700");
														    myWindow.focus();
														    myWindow.print();
														}				        				
																		
															});
													}
											    });
											    
											    
											    //PDF DOWNLOAD ---------------------------------------
											    $(".pdfButtons").jqxButton({ width: 60, template: "success" });
											    $(".pdfButtons").on('click', function (event) {
											    	if (event.target.tagName =="BUTTON") {
											    	        var row = $(event.target).attr('data-row');
											    	        var cellValueAcct = $("#dataTable").jqxDataTable('getCellValue', row, 'Acct');
											    	        }
											    	
											    
											    //CREATE WINDOW
											    $('#pdfWindow').jqxWindow({
											                    maxHeight: 180,
											                    maxWidth: 280,
											                    minHeight: 30, 
											                    minWidth: 250, 
											                    height: 180, 
											                    width: 270,
											                    resizable: false, 
											                    isModal: true, 
											                    modalOpacity: 0.3,
											                    okButton: $('#download_pdf'), cancelButton: $('#cancel_pdf'),
											                    initContent: function () {
											                        $("#bg_pdf").jqxRadioButton({ width: 120, height: 25, groupName: "PDF", checked: true});
											                        $("#en_pdf").jqxRadioButton({ width: 120, height: 25, groupName: "PDF", checked: false});
											                        $('#download_pdf').jqxButton({ width: '80px' });
											                        $('#cancel_pdf').jqxButton({ width: '80px' });
											                        $('#download_pdf').focus();
											                        
											                    }
											                   
											                });
											       //OPEN THE WINDOW
											       $("#pdfWindow").jqxWindow('open');
											       $("#pdfWindow").css('visibility', 'inherit');
											       $("#download_pdf").off("mousedown");
											       $("#download_pdf").on("mousedown",function() {
											       		
											       $("#pdfWindow").jqxWindow('close');
											       var saleNumber = cellValueAcct;
											       if ($("#bg_pdf").val()==true) {
											       	//BG
											       	var url = "invoicebg.php?saleNumber=" + saleNumber+ "&do=download";	
											       	var myWindow=window.open(url);
											       				        			
											       }
											       
											       else {
											       	//EN
											       	var url = "invoiceen.php?saleNumber=" + saleNumber+ "&do=download";	
											       		var myWindow=window.open(url);
											       
											           
											       }				        				
											       				
											       	
											       });
											     
											    });
											    											    
											    //DELETE BUTTONS -------------------------------------
											    
											    $(".deleteButtons").jqxButton({ width: 60, template: "danger" });
											    $(".deleteButtons").on('click', function (event) {
											    	if (event.target.tagName =="BUTTON") {
											    	
											    	//CREATE WINDOW
											    	$('#deleteDialog').jqxWindow({
											    	                maxHeight: 150,
											    	                maxWidth: 280,
											    	                minHeight: 30, 
											    	                minWidth: 250, 
											    	                height: 180, 
											    	                width: 270,
											    	                resizable: false, 
											    	                isModal: true, 
											    	                modalOpacity: 0.3,
											    	                okButton: $('#deleteDocument'), cancelButton: $('#cancelDocument'),
											    	                initContent: function () {
											    	                
											    	                    $('#deleteDocumentButton').jqxButton({ width: '80px' });
											    	                    $('#cancelDocumentButton').jqxButton({ width: '80px' });
											    	                    $('#deleteDocumentButton').focus();
											    	                    
											    	                }
											    	               
											    	            });
												  $("#deleteDialog").jqxWindow('open');
												  $("#deleteDialog").css('visibility', 'inherit');
												  $("#deleteDocumentButton").off("mousedown");
											      $("#deleteDocumentButton").on("mousedown",function() {
											      		var row = $(event.target).attr('data-row');
														deleteDocument(row);
													});
												  $("#cancelDocumentButton").on("mousedown",function() {
												  	    $("#deleteDialog").jqxWindow('close');
												  	});
											    	        
											    	        }
											    	
											    });
											    
											 	
				 					   },
				 					 columns: [
				 					 	 { text: 'Дата:', dataField: 'InvoiceDate' , width: 150},
				 					 	 //{ text: 'Acct:', dataField: 'Acct' , width: 100},
				 						 { text: 'Ф-ра номер:', dataField: 'InvoiceNumber', width: 100 },
				 						 { text: 'Обект:', dataField: 'ObjectID', cellsFormat: 'f', width: 150 },
				 						 { text: 'Партньор:', dataField: 'partnerName', width:150},
				 						 { text: '', cellsAlign: 'center', columnType: 'none', width:65, editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) {
				 						                           // render custom column.
				 						                           return "<button data-row='" + row + "' class='printButtons'>Печат</button>";
				 												
				 													
				 						                       }
				 						 },
				 						 { text: '', cellsAlign: 'center', columnType: 'none', width:65, editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) {
				 						                            // render custom column.
				 						                            return "<button data-row='" + row + "' class='pdfButtons'>PDF</button>";
				 						 						
				 						 							
				 						                        }
				 						  },
				 						  
				 						  { text: '', cellsAlign: 'center', columnType: 'none', width:65, editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) {
				 						                              // render custom column.
				 						                              return "<button data-row='" + row + "' class='deleteButtons'>Анулирай</button>";
				 						   						
				 						   							
				 						                          }
				 						    }
				 						 
				 						 						  
				 						 ]
				 						 
				 				 });

[cpuinParticipant]

Dear Nadezhda,

Thank you, but this remove the “loading gif” at all.I need it when big amount of data is loading, but don’t need it “stacked” when null is returned.

[cpuinParticipant]

Thank you a lot!! It took a week trying to debug this.

[cpuinParticipant]

[cpuinParticipant]

[Author]

Posts