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 - 1 through 15 (of 40 total)
  • Author
  • custom button rendering #69002

    cpuin
    Participant

    I’m trying to get custom button on one of the columns, but it can’t render as expected.

    
    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 id='linkButton'><img src='css/myicons/icon_print.png' height='25'/></button>";
    												
    													
    						                       }
    						 }
    						 
    						 						  
    						 ]
    

    It looks like this

    custom button rendering #69004

    Nadezhda
    Participant

    Hello cpuin,

    Please, check if source image path is referred correctly and add width of the image.

    You can refer to the following demo for more information about column of buttons in jqxDataTable: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdatatable/javascript-datatable-command-column.htm?arctic.

    Best Regards,
    Nadezhda

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

    custom button rendering #69005

    cpuin
    Participant

    Dear Nadezda,

    This is from where i came.Unfortunately i can’t see the buttons as expected.
    This is the line from the example and i thing i do the same:

    return "<button data-row='" + row + "' class='editButtons'>Edit</button><button style='display: none; margin-left: 5px;' data-row='" + row + "' class='cancelButtons'>Cancel</button>";
    
    custom button rendering #69006

    Nadezhda
    Participant

    Hi cpuin,

    Here is an example which shows how to use button column with image on each button and works on our side. If it does not help you resolve your issue, please provide us with more information.

    <!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">
            var that = this;
            $(document).ready(function () {
                var orderdetailsurl = "../sampledata/orderdetails.xml";
    
                var ordersSource =
                {
                    dataFields: [
                        { name: 'OrderID', type: 'int' },
                        { name: 'Freight', type: 'float' },
                        { name: 'ShipName', type: 'string' },
                        { name: 'ShipAddress', type: 'string' },
                        { name: 'ShipCity', type: 'string' },
                        { name: 'ShipCountry', type: 'string' },
                        { name: 'ShippedDate', type: 'date' }
                    ],
                    root: "Orders",
                    record: "Order",
                    dataType: "xml",
                    id: 'OrderID',
                    url: orderdetailsurl,
                    addRow: function (rowID, rowData, position, commit) {
                        // synchronize with the server - send insert command
                        // call commit with parameter true if the synchronization with the server is successful 
                        // and with parameter false if the synchronization failed.
                        // you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
                        commit(true);
                    },
                    updateRow: function (rowID, rowData, commit) {
                        // synchronize with the server - send update command
                        // call commit with parameter true if the synchronization with the server is successful 
                        // and with parameter false if the synchronization failed.
                        commit(true);
                    },
                    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(ordersSource, {
                    loadComplete: function () {
                        // data is loaded.
                    }
                });
    
                this.editrow = -1;
             
                $("#dataTable").jqxDataTable(
                {
                    width: 850,
                    source: dataAdapter,
                    pageable: true,
                    sortable: true,
                    altRows: true,
                    editable: true,
                    editSettings: { saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: false, cancelOnEsc: true, saveOnEnter: true, editOnDoubleClick: false, editOnF2: false },
                    // called when jqxDataTable is going to be rendered.
                    rendering: function()
                    {
                        // destroys all buttons.
                        if ($(".editButtons").length > 0) {
                            $(".editButtons").jqxButton('destroy');
                        }
                        if ($(".cancelButtons").length > 0) {
                            $(".cancelButtons").jqxButton('destroy');
                        }
                    },
                    // called when jqxDataTable is rendered.
                    rendered: function () {
                        if ($(".editButtons").length > 0) {
                            $(".cancelButtons").jqxButton();
                            $(".editButtons").jqxButton();
                            
                            var editClick = function (event) {
                                var target = $(event.target);
                                // get button's value.
                                var value = target.val();
                                // get clicked row.
                                var rowIndex = parseInt(event.target.getAttribute('data-row'));
                                if (isNaN(rowIndex)) {
                                    return;
                                }
    
                                if (value == "Edit") {
                                    // begin edit.
                                    $("#dataTable").jqxDataTable('beginRowEdit', rowIndex);
                                    target.parent().find('.cancelButtons').show();
                                    target.val("Save");
                                }
                                else {
                                    // end edit and save changes.
                                    target.parent().find('.cancelButtons').hide();
                                    target.val("Edit");
                                    $("#dataTable").jqxDataTable('endRowEdit', rowIndex);
                                }
                            }
    
                            $(".editButtons").on('click', function (event) {
                                editClick(event);
                            });
                     
                            $(".cancelButtons").click(function (event) {
                                // end edit and cancel changes.
                                var rowIndex = parseInt(event.target.getAttribute('data-row'));
                                if (isNaN(rowIndex)) {
                                    return;
                                }
                                $("#dataTable").jqxDataTable('endRowEdit', rowIndex, true);
                            });
                        }
                    },
                    pagerButtonsCount: 8,
                    columns: [
                      { text: 'Order ID', editable: false, dataField: 'OrderID', width: 200 },
                      { text: 'Freight', dataField: 'Freight', cellsFormat: 'f2', cellsAlign: 'right', align: 'right', width: 200 },
                      {
                          text: 'Ship Country', dataField: 'ShipCountry', width: 150,
                          columnType: 'custom',
                          createEditor: function (row, cellValue, editor, width, height) {
                              // create jqxInput editor.
                              var textBox = $("<input style='padding-left: 4px; box-sizing: border-box; -moz-box-sizing: border-box; border: none;'/>").appendTo(editor);;
                              var countries = new Array("Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antarctica", "Antigua and Barbuda", "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burma", "Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Central African Republic", "Chad", "Chile", "China", "Colombia", "Comoros", "Congo, Democratic Republic", "Congo, Republic of the", "Costa Rica", "Cote d'Ivoire", "Croatia", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "East Timor", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Fiji", "Finland", "France", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Greece", "Greenland", "Grenada", "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Honduras", "Hong Kong", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Israel", "Italy", "Jamaica", "Japan", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Korea, North", "Korea, South", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Mauritania", "Mauritius", "Mexico", "Micronesia", "Moldova", "Mongolia", "Morocco", "Monaco", "Mozambique", "Namibia", "Nauru", "Nepal", "Netherlands", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Norway", "Oman", "Pakistan", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Qatar", "Romania", "Russia", "Rwanda", "Samoa", "San Marino", " Sao Tome", "Saudi Arabia", "Senegal", "Serbia and Montenegro", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "Spain", "Sri Lanka", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Togo", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", "Turkmenistan", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "Uruguay", "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe");
                              textBox.jqxInput({ source: countries, width: '100%', height: '100%' });
                              textBox.val(cellValue);
                          },
                          initEditor: function (row, cellValue, editor) {
                              // set jqxInput editor's initial value.
                              editor.find('input').val(cellValue);
                          },
                          getEditorValue: function (index, value, editor) {
                              // get jqxInput editor's value.
                              return editor.find('input').val();
                          }
                      },
                      { text: 'Shipped Date', dataField: 'ShippedDate', cellsAlign: 'right', align: 'right', cellsFormat: 'd', width: 170 },
                      {
                          text: 'Edit', 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><button style='display: none; margin-left: 5px;' data-row='" + row + "' class='cancelButtons'>Cancel</button>"
                          }
                      }
                    ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id="dataTable">
        </div>
    </body>
    </html>

    Best Regards,
    Nadezhda

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

    custom button rendering #69012

    cpuin
    Participant

    With this code, the table stacks on “loading”

    
    $("#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,
    					 rendering: function()
    					 {
    					     $('#linkButton').jqxButton({ width: '80px' });
    
    					     
    					 },
    					 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 id='linkButton'><img src='css/myicons/icon_print.png' height='25'/></button>";
    												
    													
    						                       }
    						 }
    						 
    						 						  
    						 ]
    						 
    				 });
    
    
    custom button rendering #69041

    Nadezhda
    Participant

    Hi cpuin,

    What do you mean by “the table stacks on “loading””? If your issue is about the loading html element with animated gif displayed by the widget during the data binding process you can take it out as you set the ‘autoShowLoadElement’ to false.

    Best Regards,
    Nadezhda

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

    custom button rendering #69060

    cpuin
    Participant

    Dear Nadezhda,

    i’m attaching an image in order to show you what i mean.

    I’m confused with the example in the DEMO, because i don’t want to achieve the same thing and i’m not sure which functions are obligated.
    What i need is a column with same button (in my case ‘print’) and when the user click to get the row number.Nothing more, no edit, no changing and appearance of another buttons.

    i see <button data-row= is this a special way to get the row?

    custom button rendering #69116

    Nadezhda
    Participant

    Hi cpuin,

    You have not attached any image. Please, find the following example which shows how to click on Print button and display message after button is clicked. According to ‘click’ event you can not get the row data in this case so I suggest you to use ‘rowClick’ event. Here is an example how to use ‘rowClick’ event to display row data:

    $('#dataTable').on('rowClick', function (event) {
        var args = event.args;
        var row = args.row;
        alert("The row you clicked is: " + JSON.stringify(row));
    }); 
    <!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">
            var that = this;
            $(document).ready(function () {
                var orderdetailsurl = "../sampledata/orderdetails.xml";
                var ordersSource =
                {
                    dataFields: [
                        { name: 'OrderID', type: 'int' },
                        { name: 'Freight', type: 'float' },
                        { name: 'ShipName', type: 'string' },
                        { name: 'ShipAddress', type: 'string' },
                        { name: 'ShipCity', type: 'string' },
                        { name: 'ShipCountry', type: 'string' },
                        { name: 'ShippedDate', type: 'date' }
                    ],
                    root: "Orders",
                    record: "Order",
                    dataType: "xml",
                    id: 'OrderID',
                    url: orderdetailsurl,
                    addRow: function (rowID, rowData, position, commit) {
                        // synchronize with the server - send insert command
                        // call commit with parameter true if the synchronization with the server is successful 
                        // and with parameter false if the synchronization failed.
                        // you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
                        commit(true);
                    },
                    updateRow: function (rowID, rowData, commit) {
                        // synchronize with the server - send update command
                        // call commit with parameter true if the synchronization with the server is successful 
                        // and with parameter false if the synchronization failed.
                        commit(true);
                    },
                    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(ordersSource, {
                    loadComplete: function () {
                        // data is loaded.
                    }
                });
                this.editrow = -1;
    
                $("#dataTable").jqxDataTable(
                {
                    width: 850,
                    source: dataAdapter,
                    pageable: true,
                    sortable: true,
                    selectionMode: 'none',
                    enableHover: false,
                    altRows: true,
                    editable: true,
                    // called when jqxDataTable is rendered.
                    rendered: function () {                   
                        $(".editButtons").jqxButton();
                        $(".editButtons").on('click', function (event) {
                            alert("print");
                        });      
                },
                pagerButtonsCount: 8,
                columns: [
                  { text: 'Order ID', editable: false, dataField: 'OrderID', width: 200 },
                  { text: 'Freight', dataField: 'Freight', cellsFormat: 'f2', cellsAlign: 'right', align: 'right', width: 200 },
                  {
                      text: 'Ship Country', dataField: 'ShipCountry', width: 150,
                      columnType: 'custom'
                  },
                  { text: 'Shipped Date', dataField: 'ShippedDate', cellsAlign: 'right', align: 'right', cellsFormat: 'd', width: 170 },
                  {
                      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'>Print</button>";
                      }
                  }
                ]
            });
            });
        </script>
    </head>
    <body class='default'>
        <div id="dataTable">
        </div>
    </body>
    </html>

    I hope one of these helps you implement this functionality as you require.

    Best Regards,
    Nadezhda

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

    custom button rendering #69123

    cpuin
    Participant

    Dear Nadezhda,

    Thank you a lot for your answer.

    Following your example i got this:
    http://s16.postimg.org/f565ahxo5/Screen_Shot_2015_03_25_at_10_26_26.png

    Also i don’t want the user to click on the entire row, but only on the button.This is because there will be more buttons in another column.

    custom button rendering #69124

    cpuin
    Participant

    This is the code

    $("#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'/></button>";
    				 												
    				 													
    				 						                       }
    				 						 }
    				 						 
    				 						 						  
    				 						 ]
    				 						 
    				 				 });
    custom button rendering #69131

    Nadezhda
    Participant

    Hi cpuin,

    The following example works on our side. Please, make sure you are set size (width,height) of the image.

    <!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">
            var that = this;
            $(document).ready(function () {
                var orderdetailsurl = "../sampledata/orderdetails.xml";
                var ordersSource =
                {
                    dataFields: [
                        { name: 'OrderID', type: 'int' },
                        { name: 'Freight', type: 'float' },
                        { name: 'ShipName', type: 'string' },
                        { name: 'ShipAddress', type: 'string' },
                        { name: 'ShipCity', type: 'string' },
                        { name: 'ShipCountry', type: 'string' },
                        { name: 'ShippedDate', type: 'date' }
                    ],
                    root: "Orders",
                    record: "Order",
                    dataType: "xml",
                    id: 'OrderID',
                    url: orderdetailsurl,
                    addRow: function (rowID, rowData, position, commit) {
                        // synchronize with the server - send insert command
                        // call commit with parameter true if the synchronization with the server is successful 
                        // and with parameter false if the synchronization failed.
                        // you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
                        commit(true);
                    },
                    updateRow: function (rowID, rowData, commit) {
                        // synchronize with the server - send update command
                        // call commit with parameter true if the synchronization with the server is successful 
                        // and with parameter false if the synchronization failed.
                        commit(true);
                    },
                    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(ordersSource, {
                    loadComplete: function () {
                        // data is loaded.
                    }
                });
                this.editrow = -1;
    
                $("#dataTable").jqxDataTable(
                {
                    width: 850,
                    source: dataAdapter,
                    pageable: true,
                    sortable: true,
                    selectionMode: 'none',
                    enableHover: false,
                    altRows: true,
                    editable: false,
                    // called when jqxDataTable is rendered.
                    rendered: function () {
                        $(".editButtons").jqxButton();
                        $(".editButtons").on('click', function (event) {
                            alert("print");
                        });
                    },
                    pagerButtonsCount: 8,
                    columns: [
                      { text: 'Order ID', editable: false, dataField: 'OrderID', width: 200 },
                      { text: 'Freight', dataField: 'Freight', cellsFormat: 'f2', cellsAlign: 'right', align: 'right', width: 200 },
                      { text: 'Ship Country', dataField: 'ShipCountry', width: 150, columnType: 'custom' },
                      { text: 'Shipped Date', dataField: 'ShippedDate', cellsAlign: 'right', align: 'right', cellsFormat: 'd', width: 170 },
                      {
                          text: 'Print', cellsAlign: 'center', align: "center", columnType: 'none', editable: false, sortable: false, cellsRenderer: function (row, column, value) {
                              // render custom column.
                              return "<button data-row='" + row + "' class='editButtons'><img src='../../jqwidgets/styles/images/check_disabled.png' height='13' width='13'/></button>";
                          }
                      }
                    ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id="dataTable">
        </div>
    </body>
    </html>

    Best Regards,
    Nadezhda

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

    custom button rendering #69178

    cpuin
    Participant

    The result is completely the same 🙁

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

    Nadezhda
    Participant

    Hi cpuin,

    Please, find the following example which shows how to get number of current row when click on image button. 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">
            var that = this;
            $(document).ready(function () {
                var orderdetailsurl = "../sampledata/orderdetails.xml";
                var ordersSource =
                {
                    dataFields: [
                        { name: 'OrderID', type: 'int' },
                        { name: 'Freight', type: 'float' },
                        { name: 'ShipName', type: 'string' },
                        { name: 'ShipAddress', type: 'string' },
                        { name: 'ShipCity', type: 'string' },
                        { name: 'ShipCountry', type: 'string' },
                        { name: 'ShippedDate', type: 'date' }
                    ],
                    root: "Orders",
                    record: "Order",
                    dataType: "xml",
                    id: 'OrderID',
                    url: orderdetailsurl,
                    addRow: function (rowID, rowData, position, commit) {
                        // synchronize with the server - send insert command
                        // call commit with parameter true if the synchronization with the server is successful 
                        // and with parameter false if the synchronization failed.
                        // you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
                        commit(true);
                    },
                    updateRow: function (rowID, rowData, commit) {
                        // synchronize with the server - send update command
                        // call commit with parameter true if the synchronization with the server is successful 
                        // and with parameter false if the synchronization failed.
                        commit(true);
                    },
                    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(ordersSource, {
                    loadComplete: function () {
                        // data is loaded.
                    }
                });
                this.editrow = -1;
    
                $("#dataTable").jqxDataTable(
                {
                    width: 850,
                    source: dataAdapter,
                    pageable: true,
                    sortable: true,
                    selectionMode: 'none',
                    enableHover: false,
                    altRows: true,
                    editable: false,
                    // called when jqxDataTable is rendered.
                    rendered: function () {
                        $(".editButtons").jqxButton();
                        $(".editButtons").on('click', function (event) {
                            alert($(event.target).attr('data-row'));
                        });
                    },
                    pagerButtonsCount: 8,
                    columns: [
                      { text: 'Order ID', editable: false, dataField: 'OrderID', width: 200 },
                      { text: 'Freight', dataField: 'Freight', cellsFormat: 'f2', cellsAlign: 'right', align: 'right', width: 200 },
                      { text: 'Ship Country', dataField: 'ShipCountry', width: 150, columnType: 'custom' },
                      { text: 'Shipped Date', dataField: 'ShippedDate', cellsAlign: 'right', align: 'right', cellsFormat: 'd', width: 170 },
                      {
                          text: 'Print', cellsAlign: 'center', align: "center", columnType: 'none', editable: false, sortable: false, 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 #69203

    cpuin
    Participant

    Dear Nadezhda,

    Thank you, but as i show on the picture, the problem is with the visualisation of the button with or w/out image is the same as shown on the pic.

    custom button rendering #69228

    Nadezhda
    Participant

    Hi cpuin,

    The above example works correctly on our side. Please, make sure you are using the latest version of jQWidgets (3.7.1). If it does not help you resolve your issue, please provide us with full sample.

    Best Regards,
    Nadezhda

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

Viewing 15 posts - 1 through 15 (of 40 total)

You must be logged in to reply to this topic.