jQWidgets Forums
jQuery UI Widgets › Forums › Editors › Button, RepeatButton, ToggleButton, LinkButton › ToggleButton in jqxGrid
Tagged: grid, jqxgrid, new column, ToggleButtons column
This topic contains 3 replies, has 2 voices, and was last updated by Nadezhda 10 years ago.
-
AuthorToggleButton in jqxGrid Posts
-
Hi,
Is it possible to add columns with ToggleButtons in jqxGrid?
Hello chr1s,
Here is an example with ToggleButtons column in jqxGrid:
<!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/jqxdata.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/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxwindow.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/jqxinput.js"></script> <script type="text/javascript" src="generatedata.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare the data var data = generatedata(200); var source = { localdata: data, datatype: "array", datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' } ], 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 failder. commit(true); } }; var dataAdapter = new $.jqx.dataAdapter(source); var editrow = -1; // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 850, source: dataAdapter, pageable: true, autoheight: true, columns: [ { text: 'First Name', datafield: 'firstname', width: 200 }, { text: 'Last Name', datafield: 'lastname', width: 200 }, { text: 'Product', datafield: 'productname', width: 190 }, { text: 'Quantity', datafield: 'quantity', width: 90, cellsalign: 'right' }, { text: 'Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' }, { text: 'Toggle', datafield: 'Toggle', columntype: 'button', cellsrenderer: function () { return "Toggle"; }, buttonclick: function (row) { var toggled = $("input.jqx-button").jqxToggleButton('toggled'); if (toggled) { $("input.jqx-button")[0].value = 'Toggled On'; } else $("input.jqx-button")[0].value = 'Toggled Off'; } } ] }); }); </script> </head> <body class='default'> <div id="jqxgrid"></div> </body> </html>
If you want to add new column in an existing grid you can set the Grid’s columns property to a new columns array. Example:
$("#grid").jqxGrid({columns: newColumns});
.Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/Thanks for the answer Nadezhda !
But in your example the ToggleButtons are always ‘Toggled On’.
How can I toggle them off?Hi chr1s,
Please, take a look at ToggleButton demo and find how to switch the state after a click.
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.