jQWidgets Forums

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.

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

1 2 3 →

Author

custom button rendering Posts

March 23, 2015 at 1:01 pm 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

March 23, 2015 at 1:19 pm 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/

March 23, 2015 at 1:44 pm 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>";

March 23, 2015 at 1:52 pm 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/

March 23, 2015 at 2:42 pm 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>";
												
													
						                       }
						 }
						 
						 						  
						 ]
						 
				 });

March 24, 2015 at 6:59 am 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/

March 24, 2015 at 9:14 am 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?

March 25, 2015 at 7:40 am 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/

March 25, 2015 at 8:31 am custom button rendering #69123

cpuin

Participant

Dear Nadezhda,

Thank you a lot for your answer.

Following your example i got this:

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.

March 25, 2015 at 8:31 am 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>";
				 												
				 													
				 						                       }
				 						 }
				 						 
				 						 						  
				 						 ]
				 						 
				 				 });

March 25, 2015 at 10:24 am 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/

March 26, 2015 at 12:42 pm 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>";
				 												
				 													
				 						                       }
				 						 }
				 						 
				 						 						  
				 						 ]
				 						 
				 				 });

March 26, 2015 at 1:42 pm 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/

March 26, 2015 at 6:58 pm 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.

March 27, 2015 at 7:13 am 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/

Author

Posts

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

1 2 3 →

You must be logged in to reply to this topic.