custom button rendering

[NadezhdaParticipant]

Hi cpuin,

Please, find the following example: http://jsfiddle.net/yx391xgz/.

Best Regards,
Nadezhda

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

[cpuinParticipant]

Dear Nadehzda,

After serious testing i can make the following conclusion:

– your code works correct
– my code, which is same as your returns randomly the right value (row), and some times “undefined”.This is on Safari 8.0.4 on OS X 10.10.2
– my code works correct on Firefox 36.0.4
– i use latest version of jqWidgets:
<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>

[NadezhdaParticipant]

Hi cpuin,

Please, check if your target (event.target) is button. If target is another HTML element it will not have attribute ‘data-row’.

Best Regards,
Nadezhda

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

[cpuinParticipant]

Yes it is.
As i told you before in more times it return right value, but for instance on every 10-15 give 3-4 undefined instead of the value.

This is the code, i can’t find differences with yours.
It seems to be a bug or browser specific issue.

function createTable() {
			
			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,
				 					 rendered: function () {                   
				 					                $(".editButtons").jqxButton({ width: 90 });
													$(".editButtons").on('click', function (event) {
														var row = $(event.target).attr('data-row');
														var cellValueAcct = $("#dataTable").jqxDataTable('getCellValue', row, 'Acct');
														//alert(value);

														//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 = cellValueAcct;
														if ($("#bg").val()==true) {
															//BG
															var url = "invoicebg.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();
														}
														else {
															//EN
														
														    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();
														}				        				
																		
															});
											    });
				 					   },
				 					 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:250},
				 						 { text: 'Отпечатай', cellsAlign: 'center', columnType: 'none', width:100, 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='15'/></button>";
				 												
				 													
				 						                       }
				 						 }
				 						 
				 						 						  
				 						 ]
				 						 
				 				 });

[NadezhdaParticipant]

Hi cpuin,

In the above example I did not find where you are checking the ‘event.target’ element. Please, find the following part of code and make your own check in above code. I hope it would be helpful.

rendered: function () {
    $(".editButtons").jqxButton();
    $(".editButtons").on('click', function (event) {
        if (event.target.tagName =="BUTTON") {
        var row = $(event.target).attr('data-row');
        var value = $("#dataTable").jqxDataTable('getCellValue', row, 'InvoiceDate');
        alert(value);    
    }
    });
},

Best Regards,
Nadezhda

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

[cpuinParticipant]

Dear Nadhezda,

Now it seems to work as expected.Thank you very much.
Despite of this i still can’t understand how in this case works “the getting of the row value”.

[cpuinParticipant]

In fact, when click on the picture of the button, nothing happens.Why the picture is not a part of the button?How to achieve working button with icon?

[NadezhdaParticipant]

Hi cpuin,

If you get the row number when click on the button, you are achieved working button.
If you want to click on icon as button and get the row number you may use css to give on icon the same size of the button. If this does not help, please provide us with a JSFiddle example.

Best Regards,
Nadezhda

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

[cpuinParticipant]

The code is the same, i just add the check you suggest for “BUTTON”.When click outside of the icon it works, now when click on the icon nothing happens because of the check.

[NadezhdaParticipant]

Hi cpuin,

You may try to check if event.target is button or image not only button.

Best Regards,
Nadezhda

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

[Author]

Posts