jQuery UI Widgets › Forums › Grid › Grid – numberinput column
Tagged: cellsrenderer, columntype, decimal, editor, grid, initeditor, integer, jqxgrid, numberinput, row
This topic contains 2 replies, has 2 voices, and was last updated by gio 10 years, 5 months ago.
-
Author
-
Hi all,
is there any way to define a different format for each row in my grid for a numberinput column?
In my case, there are some rows that needs an integer value (type “n”) and some others a decimal number (type “d2”).Thanks in advance for your reply.
Best RegardsGiovanni
Hello Giovanni,
This can be achieved through cellsrenderer. In the following example, even rows display integer numbers and odd rows display decimal numbers (in the column “UnitPrice”):
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.2.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/jqxnumberinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.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/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.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/jqxgrid.edit.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript"> $(document).ready(function () { var url = "../sampledata/products.xml"; // prepare the data var source = { datatype: "xml", datafields: [ { name: 'ProductName', type: 'string' }, { name: 'QuantityPerUnit', type: 'int' }, { name: 'UnitPrice', type: 'float' }, { name: 'UnitsInStock', type: 'float' }, { name: 'Discontinued', type: 'bool' } ], root: "Products", record: "Product", id: 'ProductID', url: url }; var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) { if (row % 2 == 0) { return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + ';">' + parseInt(value) + '</span>'; } else { return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + ';">' + value.toFixed(2) + '</span>'; } } var dataAdapter = new $.jqx.dataAdapter(source, { downloadComplete: function (data, status, xhr) { }, loadComplete: function (data) { }, loadError: function (xhr, status, error) { } }); // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 850, source: dataAdapter, pageable: true, autoheight: true, sortable: true, altrows: true, enabletooltips: true, editable: true, selectionmode: 'multiplecellsadvanced', columns: [ { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 }, { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 }, { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', width: 200, columntype: "numberinput", cellsrenderer: cellsrenderer }, { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 }, { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' } ], columngroups: [ { text: 'Product Details', align: 'center', name: 'ProductDetails' } ] }); }); </script> </head> <body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div id="jqxgrid"> </div> </div> </body> </html>
If you want to customize the editor’s properties, too, you should do so in the column’s initeditor callback function.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thanks Dimitar, your solution has worked perfectly!
Giovanni
-
AuthorPosts
You must be logged in to reply to this topic.