jQWidgets Forums

jQuery UI Widgets Forums DataTable custom button rendering

This topic contains 39 replies, has 2 voices, and was last updated by  Nadezhda 9 years, 11 months ago.

Viewing 15 posts - 16 through 30 (of 40 total)
  • Author
  • custom button rendering #69229

    cpuin
    Participant

    Dear Nadezhda,

    I upgraded jqxWidgets to 3.7.1 and none of my widgets work!!!They appears like if i had JS error.
    Until now i’ve being using 3.5.0.
    PLEASE HELP!

    custom button rendering #69230

    Nadezhda
    Participant

    Hi cpuin,

    Are there any errors thrown in your browser’s console when running the page with jqxDataTable? Please, make sure all your jQWidgets files are updated to version 3.7.1 and that they are referenced after the jQuery script in your page.

    Best Regards,
    Nadezhda

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

    custom button rendering #69247

    cpuin
    Participant

    Hi Nadezhda,

    I got the following error: Invalid property: filtermode

    I replaced all files with new ones.

    I’m using now:

    
    <link rel="stylesheet" href="css/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="css/jqx.office.css" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="js/jqx-all-3.7.1.js"></script>
    
    custom button rendering #69252

    Nadezhda
    Participant

    Hi cpuin,

    I suggest you to take out the following line <script type="text/javascript" src="js/jqx-all-3.7.1.js"></script> and reference only needed scripts like in the following example:

        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.office.css" type="text/css" />
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>

    You are using invalid property, please change ‘filtermode’ to ‘filterMode’.

    Best Regards,
    Nadezhda

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

    custom button rendering #69259

    cpuin
    Participant

    Dear Nadezhda,

    Now it works! I changed filtermode with filterMode!
    Despite of your recommendation i like using jqx-all.js in the process of development.When the project will be on use i’ll get rid of the modules i don’t use.

    Thank you for your HELP!

    custom button rendering #69260

    cpuin
    Participant

    Buttons, pictures are still as in the image i have attached.

    This is the full source:

    
    <script type="text/javascript">
    		$(document).ready(function () {			   
    				
    				
    // INIT --------------------------------------------------------------------------------------
    			var start = $('#startDate').val();
    			var end = $('#endDate').val();
    			var url = 'json_documents.php?' + "startDate=" + start + "&endDate=" + end;
    			createTable();
    			
    			
    // SAVE INVOICE --------------------------------------------------------------------------------------			
    			function saveInvoice(rowData) {
    			
    				var data = "insert=true&" + $.param(rowData);
    				$.ajax({
    				    dataType: 'json',
    				    url: 'json_documents.php',
    				    cache: false,
    				    data: data,
    				    success: function (data, status, xhr) {
    				        //command is executed
    				        //close dialog
    				        $("#addDialog").jqxWindow('close');
    				        //create confirmation modal dialog
    				        $('#eventWindow').jqxWindow({
    				                        maxHeight: 150, maxWidth: 280, minHeight: 30, minWidth: 250, height: 150, width: 270,
    				                        resizable: false, isModal: true, modalOpacity: 0.3,
    				                        okButton: $('#print'), cancelButton: $('#cancel'),
    				                        initContent: function () {
    				                            $('#print').jqxButton({ width: '80px' });
    				                            $('#download').jqxButton({ width: '80px' });
    				                            $('#cancel').jqxButton({ width: '80px' });
    				                            $('#print').focus();
    				                            
    				                        }
    				                    });
    				        
    				        $("#eventWindow").jqxWindow('open');
    				        $("#eventWindow").css('visibility', 'inherit');
    				        $("#print").off("mousedown");
    				        $("#print").on("mousedown",function() {
    				        		
    				        		$("#eventWindow").jqxWindow('close');
    				        		//print PDF
    				        		var saleNumber = $("#invAcct").val();
    				        		var url = "invoiceen.php?saleNumber=" + saleNumber;
    				        		var myWindow=window.open(url, "_blank", "toolbar=no, scrollbars=no, resizable=no, top=10, left=350, width=600, height=700");
    				        		myWindow.focus();
    				        		myWindow.print();				        				
    				        				
    				        	});
    				        //UPDATE TABLE WHEN eventWindow CLOSE	
    				        $("#eventWindow").off("close");
    				        $("#eventWindow").on("close",function() {
    				        	createTable();
    				        });
    				    },
    				    error: function (jqXHR, textStatus, errorThrown) {
    				        //command has failed on execution
    				        //alert(errorThrown);
    				        //command is executed
    				        $("#addDialog").jqxWindow('close');
    				        //create confirmation modal dialog
    				        $('#errorWindow').jqxWindow({
    				                        maxHeight: 150, maxWidth: 280, minHeight: 30, minWidth: 250, height: 145, width: 270,
    				                        resizable: false, isModal: true, modalOpacity: 0.3, cancelButton: $('#errorCancel'),
    				                        initContent: function () {
    				                            $('#errorCancel').jqxButton({ width: '80px' });
    				                            $('#errorCancel').focus();
    				                            
    				                        }
    				                    });
    				        
    				        $("#errorWindow").jqxWindow('open');
    				        $("#errorWindow").css('visibility', 'visible');
    				        $("#ok").off("mousedown");
    				        $("#ok").on("mousedown",function() {
    				        		
    				        		$("#errorWindow").jqxWindow('close');
    				        						        				
    				        				
    				        	});
    				        				        
    				        
    				        }
    				       });
    			
    			}
    			
    // CREATE TABLE ------------------------------------------------------------------------------------			
    			function createTable() {
    			
    			var source =
    						{
    							datatype: "json",
    							datafields: [
    								{ name: 'ID', 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);
    				 
    				 
    				 
    				 $("#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,
    				 					 rendered: function () {                   
    				 					                     $(".editButtons").jqxButton();
    				 					                     $(".editButtons").on('click', function (event) {
    				 					                         alert('print');
    				 					                     });
    				 					   },
    				 					 columns: [
    				 					 	 { text: 'Дата:', dataField: 'InvoiceDate' , width: 150},
    				 						 { text: 'Ф-ра номер:', dataField: 'InvoiceNumber', width: 100 },
    				 						 { text: 'Обект:', dataField: 'ObjectID', cellsFormat: 'f', width: 150 },
    				 						 { text: 'Партньор:', dataField: 'partnerName', width:250},
    				 						 { text: 'Print', cellsAlign: 'center', align: "center", columnType: 'none', editable: false, sortable: false, dataField: null, cellsRenderer: function (row) {
    				 						                           // render custom column.
    				 						                           return "<button data-row='" + row + "' class='editButtons'><img src='css/myicons/icon_print.png' height='25' width='25'/></button>";
    				 												
    				 													
    				 						                       }
    				 						 }
    				 						 
    				 						 						  
    				 						 ]
    				 						 
    				 				 });
    			
    			}
    			
    			
    // EVENT DIALOG --------------------------------------------------------------------------------------			
    			
    
    // CREATE DATE WIDGETS -------------------------------------------------------------------------------			
    			
    			$("#startDate").jqxDateTimeInput({width: '100px', height: '25px', formatString: "yyyy-MM-dd"});
    		   		
    		   		
    		   		$("#endDate").jqxDateTimeInput({width: '100px', height: '25px', formatString: "yyyy-MM-dd"});
    		   		
    		   		
    // 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();
    		   									//window.alert(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: 80 });
    		   				  
    		   					$("#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();
    		   					 });
    //ADD DIALOG -----------------------------------------------------------------------------------------      
    
    		   					 
    		   				
    		   					 
    			});
    	</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="3"><font color="green">Фактурата беше запазена успешно!</font></td>
    	        		</tr>
    	            	<tr>
    	            		<td width="80" valign="center" align="center" height="30" colspan="3">BG/EN</td>
    	                </tr>
    	                <tr>
    	                	<td width="80"><button id="print">Принтирай</button></td>
    	                	<td width="80"><button id="download">PDF</button></td>
    	                	<td width="80" colspan="2"><button id="cancel">Отказ</button></td>
    	                </tr>
    	            </table>	                          
    	      	</div>
    	      </div>
    	      
    	      
    	      
    	      <div id="errorWindow" style="visibility: hidden;">
    	      <div id="errorWindowHeader">
    	                          <span>
    	                              <img src="css/myicons/icon_cancel.png" height="20" alt="" style="margin-right: 15px" />
    	                          </span>
    	        </div>
    	      	<div>
    	        	<table width="100%">
    	        		<tr>
    	        			<td rowspan="4"><font color="red">Възникна грешка.<br>Операцията НЕ е записна!</font></td>
    	        		</tr>
    	                <tr>
    	                	<td width="80"><button id="errorCancel">Затвори</button></td>
    	                </tr>
    	            </table>	                          
    	      	</div>
    	      </div>
    
    custom button rendering #69302

    Nadezhda
    Participant

    Hi cpuin,

    Do you have any errors or unhandled exceptions?

    Best Regards,
    Nadezhda

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

    custom button rendering #69319

    cpuin
    Participant

    No errors!
    If i replace the picture with text, the same happens, the width of the button remain like this, it’s flattened.

    custom button rendering #69323

    cpuin
    Participant

    Dear Nadhezda,

    A part of the wrong displayed button/picture, the behaviour of this code is super, super weird.
    When i click on the button sometimes appear the number of the row, sometimes “undefined”.I tested with several click trying to get some logic, but it seems it loads randomly undefined and the number of the row.Even buttons which display correct the number of the row, w/out refresh of the table when i click again display undefined.

    custom button rendering #69324

    cpuin
    Participant
    
    // CREATE TABLE ------------------------------------------------------------------------------------			
    			function createTable() {
    			
    			var source =
    						{
    							datatype: "json",
    							datafields: [
    								{ name: 'ID', 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,
    				 					 rendered: function () {                   
    				 					                     $(".editButtons").jqxButton();
    //				 					                     $(".editButtons").on('click', function (event) {
    //				 					                         alert('print');
    //				 					                     });
    													$(".editButtons").on('click', function (event) {
    														    alert($(event.target).attr('data-row'));
    														                     });
    				 					   },
    				 					 columns: [
    				 					 	 { text: 'Дата:', dataField: 'InvoiceDate' , width: 150},
    				 						 { text: 'Ф-ра номер:', dataField: 'InvoiceNumber', width: 100 },
    				 						 { text: 'Обект:', dataField: 'ObjectID', cellsFormat: 'f', width: 150 },
    				 						 { text: 'Партньор:', dataField: 'partnerName', width:250},
    				 						 { text: 'Print', cellsAlign: 'center', align: "center", columnType: 'none', editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) {
    				 						                           // render custom column.
    				 						                           return "<button data-row='" + row + "' class='editButtons'><img src='css/myicons/icon_print.png' height='25' width='25'/></button>";
    				 												
    				 													
    				 						                       }
    				 						 }
    				 						 
    				 						 						  
    				 						 ]
    				 						 
    				 				 });
    			
    			}
    
    custom button rendering #69329

    Nadezhda
    Participant

    Hi cpuin,

    Here is a working example with above code: http://jsfiddle.net/zqdtnLsL/.

    Best Regards,
    Nadezhda

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

    custom button rendering #69337

    cpuin
    Participant

    putting { width: 100 } on theeditButton fix the rendering.It’s weird because in your example works properly w/out it, but in mine no.

    Thank you a lot!

    custom button rendering #69352

    cpuin
    Participant

    There is a problem, trying to get the row data.
    I got the row, but i can’t access the table’s row values.
    For instance i want to access the value of the first column which is ‘Acct’
    I’m trying to do this like this:

    rendered: function () {                   
    				 					                $(".editButtons").jqxButton({ width: 90 });
    													$(".editButtons").on('click', function (event) {
    														var row = $(event.target).attr('data-row');
    
    														//alert(row);
    														//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, checked: true});
    														                    $("#en").jqxRadioButton({ width: 120, height: 25, checked: false});
    														                    $('#print').jqxButton({ width: '80px' });
    														                    $('#download').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 = row.Acct;
    														var url = "invoiceen.php?saleNumber=" + saleNumber;
    														var myWindow=window.open(url, "_blank", "toolbar=no, scrollbars=no, resizable=no, top=10, left=350, width=600, height=700");
    														myWindow.focus();
    														myWindow.print();				        				
    																		
    															});
    
    custom button rendering #69376

    Nadezhda
    Participant

    Hi cpuin,

    In the following example you can find how to access the values from the first column. I hope it would be helpful to you.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title></title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.export.js"></script>
        <script type="text/javascript">
            var that = this;
            $(document).ready(function () {
                var data = [{
                    "ID": "1",
                    "partnerName": "Партньор 1",
                    "ObjectID": "Обект 1",
                    "InvoiceNumber": "370",
                    "InvoiceDate": "30.03.2015"
                }, {
                    "ID": "2",
                    "partnerName": "Партньор 2",
                    "ObjectID": "Обект 2",
                    "InvoiceNumber": "440",
                    "InvoiceDate": "31.03.2015"
                }, {
                    "ID": "3",
                    "partnerName": "Партньор 3",
                    "ObjectID": "Обект 3",
                    "InvoiceNumber": "450",
                    "InvoiceDate": "01.04.2015"
                }, {
                    "ID": "4",
                    "partnerName": "Партньор 4",
                    "ObjectID": "Обект 4",
                    "InvoiceNumber": "420",
                    "InvoiceDate": "02.04.2015"
                }, {
                    "ID": "5",
                    "partnerName": "Партньор 5",
                    "ObjectID": "Обект 5",
                    "InvoiceNumber": "15",                
                    "InvoiceDate": "03.04.2015"
                }]
    
                // prepare the data
                var source =
                {
                    dataType: "json",
                    dataFields: [  
                        { name: 'ID', type: 'int' },
    					{ name: 'InvoiceNumber', type: 'string' },
    					{ name: 'partnerName', type: 'string' },
    					{ name: 'ObjectID', type: 'string' },
    					{ name: 'InvoiceDate', type: 'string' }
                    ],               
                    localdata: data,                
                };
                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,
                    rendered: function () {
                        $(".editButtons").jqxButton();
                        $(".editButtons").on('click', function (event) {
                            var row = $(event.target).attr('data-row');
                            var value = $("#dataTable").jqxDataTable('getCellValue', row, 'InvoiceDate');
                            alert(value);                         
                        });
                    },
                    columns: [
    				 	{ text: 'Дата:', dataField: 'InvoiceDate', width: 150 },
    				 	{ text: 'Ф-ра номер:', dataField: 'InvoiceNumber', width: 100 },
    				 	{ text: 'Обект:', dataField: 'ObjectID', cellsFormat: 'f', width: 150 },
    				 	{ text: 'Партньор:', dataField: 'partnerName', width: 250 },
    				 	{
    				 		text: 'Print', cellsAlign: 'center', align: "center", columnType: 'none', editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) {
    				 			// render custom column.
    				 			return "<button data-row='" + row + "' class='editButtons'><img src='../../jqwidgets/styles/images/check_disabled.png' /></button>";
    				 		}
    				 	}
                    ]
    
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id="dataTable">
        </div>
    </body>
    </html>

    Best Regards,
    Nadezhda

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

    custom button rendering #69384

    cpuin
    Participant

    Dear Nadhezda,

    thank you!

    Unfortunately i’m still getting buttons to return randomly the number of row and unidentified 🙁

Viewing 15 posts - 16 through 30 (of 40 total)

You must be logged in to reply to this topic.