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 10 posts - 31 through 40 (of 40 total)
  • Author
  • custom button rendering #69401

    Nadezhda
    Participant

    Hi cpuin,

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

    Best Regards,
    Nadezhda

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

    custom button rendering #69491

    cpuin
    Participant

    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>

    custom button rendering #69506

    Nadezhda
    Participant

    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/

    custom button rendering #69542

    cpuin
    Participant

    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>";
    				 												
    				 													
    				 						                       }
    				 						 }
    				 						 
    				 						 						  
    				 						 ]
    				 						 
    				 				 });
    
    custom button rendering #69588

    Nadezhda
    Participant

    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/

    custom button rendering #69600

    cpuin
    Participant

    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”.

    custom button rendering #69602

    cpuin
    Participant

    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?

    custom button rendering #69618

    Nadezhda
    Participant

    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/

    custom button rendering #69625

    cpuin
    Participant

    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.

    custom button rendering #69628

    Nadezhda
    Participant

    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/

Viewing 10 posts - 31 through 40 (of 40 total)

You must be logged in to reply to this topic.