jQWidgets Forums
jQuery UI Widgets › Forums › DataTable › custom button rendering
Tagged: Button, Command Column, datatable, get row number, jqxdatatable
This topic contains 39 replies, has 2 voices, and was last updated by Nadezhda 9 years, 11 months ago.
-
Authorcustom button rendering Posts
-
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!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,
NadezhdajQWidgets team
http://www.jqwidgets.com/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>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,
NadezhdajQWidgets team
http://www.jqwidgets.com/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!
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>Hi cpuin,
Do you have any errors or unhandled exceptions?
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/No errors!
If i replace the picture with text, the same happens, the width of the button remain like this, it’s flattened.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.// 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>"; } } ] }); }Hi cpuin,
Here is a working example with above code: http://jsfiddle.net/zqdtnLsL/.
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/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!
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(); });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,
NadezhdajQWidgets team
http://www.jqwidgets.com/Dear Nadhezda,
thank you!
Unfortunately i’m still getting buttons to return randomly the number of row and unidentified
-
AuthorPosts
You must be logged in to reply to this topic.