jQuery UI Widgets › Forums › Grid › Add javascript code after created
Tagged: after, aggregates, create, dynamic, grid, initialize, jqxGrid ;
This topic contains 5 replies, has 3 voices, and was last updated by Dimitar 7 years, 3 months ago.
-
Author
-
HI,
It is posible to add another part of code in grid.
for example
this is initial code.
$("#jqxgrid").jqxGrid( { width: 670, source: dataAdapter, theme: theme, pageable: true, autoheight: true, columns: [ { text: 'First Name', datafield: 'firstname', width: 100 }, { text: 'Last Name', datafield: 'lastname', width: 100 }, { text: 'Product', datafield: 'productname', width: 190 }, { text: 'Quantity', datafield: 'quantity', width: 90, cellsalign: 'right' }, { text: 'Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' }, ] }); And when I press a button add JavaScript code to show the sum of a column or validation. the idea it's add javascript code after the grid it's created .something like this. $("#jqxgrid").jqxGrid( { width: 670, source: dataAdapter, theme: theme, pageable: true, autoheight: true, columns: [ { text: 'First Name', datafield: 'firstname', width: 100 }, { text: 'Last Name', datafield: 'lastname', width: 100 }, { text: 'Product', datafield: 'productname', width: 190 }, { text: 'Quantity', datafield: 'quantity', width: 90, cellsalign: 'right', aggregates: [{'total_credit': function(Value, currentValue, column, record) { if( typeof( currentValue)!='undefined' ) return parseFloat(currentValue) + parseFloat(Value) else if( typeof( Value)!='undefined') return parseFloat(Value) else return 0 } }], aggregatesrenderer :function(aggregates) { var renderstring = aggregates['total_credit']; return '<span style="margin-top: 4px; float: right;"><strong> Total : ' + renderstring + '</strong></span>'; }, validation: function (cell, value) { try { var myresult = eval(value.toString()); if(myresult>15 and myresult<150)return true; else return false } catch (err) { return { result: false, message: 'Error en la digitaciĆ³n...' }; } }, { text: 'Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' }, ] }); how could i do this?
var column = $('#grid').jqxGrid('getcolumn', 'columndatafield');
column.
aggregates=" aggregates: [{'total_credit': function(Value, currentValue, column, record) { ...... " thanks!Hello jose Ivan,
Here is how to show aggregates when a button is clicked. The example is based on the one in the demo Aggregates.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>In this sample is demonstrated how to display aggregates in jqxGrid.</title> <link rel="stylesheet" href="../../jqwidgets2.4.2/jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.8.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxgrid.aggregates.js"></script> <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript" src="../../demos/jqxgrid/generatedata.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = getTheme(); // prepare the data var data = generatedata(200); var source = { localdata: data, datatype: "array", updaterow: function (rowid, rowdata) { // synchronize with the server - send update command } }; var dataAdapter = new $.jqx.dataAdapter(source); // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 680, source: dataAdapter, theme: theme, showstatusbar: false, editable: true, showaggregates: false, selectionmode: 'singlecell', columns: [ { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90 }, { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 90 }, { text: 'Product', datafield: 'productname', width: 170 }, { text: 'In Stock', datafield: 'available', columntype: 'checkbox', width: 125 }, { text: 'Quantity', datafield: 'quantity', width: 85, cellsalign: 'right', cellsformat: 'n2' }, { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' } ] }); $("#aggregatesButton").click(function () { $("#jqxgrid").jqxGrid({ showaggregates: true, showstatusbar: true, statusbarheight: 50, columns: [ { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90 }, { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 90 }, { text: 'Product', datafield: 'productname', width: 170, aggregates: ['count', { 'Cappuccino Items': function (aggregatedValue, currentValue) { if (currentValue == "Cappuccino") { return aggregatedValue + 1; } return aggregatedValue; } } ] }, { text: 'In Stock', datafield: 'available', columntype: 'checkbox', width: 125, aggregates: [{ 'In Stock': function (aggregatedValue, currentValue) { if (currentValue) { return aggregatedValue + 1; } return aggregatedValue; } }, { 'Not In Stock': function (aggregatedValue, currentValue) { if (!currentValue) { return aggregatedValue + 1; } return aggregatedValue; } } ] }, { text: 'Quantity', datafield: 'quantity', width: 85, cellsalign: 'right', cellsformat: 'n2', aggregates: ['min', 'max'], aggregatesrenderer: function (aggregates) { var renderstring = ""; $.each(aggregates, function (key, value) { var name = key == 'min' ? 'Min' : 'Max'; renderstring += '<div style="position: relative; margin: 4px; overflow: hidden;">' + name + ': ' + value + '</div>'; }); return renderstring; } }, { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2', aggregates: ['sum', 'avg'] } ] }); }); }); </script></head><body class='default'> <div id='jqxWidget'> <div id="jqxgrid"> </div> <button id="aggregatesButton"> Show aggregates</button> </div></body></html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/HI , thanks for reply.
i’m doing this way.
for (var i = 0; i < config.columsDecimal.length; i++) { var datafield = config.columsDecimal[i]; var column = $('#' + config.name).jqxGrid('getcolumn', datafield); column.validation = numbervalidation; column.initeditor = numberiniteditor; column.aggregates = aggregates; column.aggregatesrenderer = aggregatesrenderer; }
where config.columsDecimal=[‘column1′,’column2’] ;
this way i’m doing dynamic columns. I got a class config.So i add the function this way but i got a problem with aggregates and rernder.It’s seem the aggregates it’s a array so in the aggregatesrenderer get the value in the array.
These are the functions
var aggregatesrenderer = function (aggregates) { var renderstring = aggregates['total_']; return '<span style="margin-top: 4px; float: right;"><strong> Total : ' + renderstring + '</strong></span>'; }; var aggregates = function (Value, currentValue, column, record) { //[{ 'total_': function (Value, currentValue, column, record) { if (typeof (currentValue) != 'undefined') return parseFloat(currentValue) + parseFloat(Value) else if (typeof (Value) != 'undefined') return parseFloat(Value) else return 0 // } // }] };
how can i do the aggregate and aggregaterenderer like other functions…
Hi jose Ivan,
In our approach to adding aggregates, the whole columns property is changed, which refreshes the grid. You add aggregates dynamically and the grid cannot reflect the changes.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Jose Ivan,
I need same functionality.where to put for loop
for (var i = 0; i < config.columsDecimal.length; i++) {
var datafield = config.columsDecimal[i];
var column = $(‘#’ + config.name).jqxGrid(‘getcolumn’, datafield);
column.validation = numbervalidation;
column.initeditor = numberiniteditor;
column.aggregates = aggregates;
column.aggregatesrenderer = aggregatesrenderer;
}`Hi veenahosur,
This topic has been inactive for more than five years. Please specify in detail what your requirement regarding aggregates is and we will try to assist you or offer advice.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.