jQuery UI Widgets Forums Grid Computed Column that will sort and use the cellclass

This topic contains 8 replies, has 3 voices, and was last updated by  Jerry Penguin 8 years ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author

  • phoxlabs
    Participant

    I have a grid that is pulling json data and then I have a computed column that is generated but my problem is that I want that column to be sorted and have a cellclass. The output in the computed column has positive and negative values and I want the negative columns to be red and the positive values to be green and also sort but it’s doing neither. Does this have to all go through a function or are there other parameters that need to be passed?

                var cellclass = function (row, columnfield, value) {
                    if (value < 0) {
                        return 'red';
                    }
                    else return 'green';
                    
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
                $("#jqxgrid-trade-p").jqxGrid(
                {
                    width: '100%',
                    autoheight: true,
                    sortable: true,
                    source: dataAdapter,
                    showaggregates: true,
                    columnsresize: false,
                    showstatusbar: true,
                    statusbarheight: 40,
                    altrows: true,
                    columns: [
    
                      { text: 'Name', dataField: 'name', width: '15%' },
                      { text: 'Quantity', dataField: 'qty', width: '15%' },
                      { text: 'Price', dataField: 'rice', cellsformat: 'c2', width: '15%' },
                      { text: 'Net Profit', datafield: 'netProfit', 
                          cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
                              var netProfit = parseFloat(rowdata.costBasis) - parseFloat(rowdata.marketValue);
                              return "<div style='margin: 10px;' class='jqx-right-align'>" + dataAdapter.formatNumber(netProfit, "c2") + "</div>";
                      	}, cellclassname: cellclass },
                      { text: 'Cost Per', datafield: 'total',
                          cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
                              var total = parseFloat(rowdata.costBasis) / parseFloat(rowdata.qty);
                              return "<div style='margin: 10px;' class='jqx-right-align'>" + dataAdapter.formatNumber(total, "c2") + "</div>";
                      	} },
                      { text: 'Target Price', datafield: 'TargetPrice', cellsformat: 'c2', width: '15%'}
    
                      
                    ]
                });

    Dimitar
    Participant

    Hello phoxlabs,

    Neither of these are possible because the actual value of the cells from the computed column is “”. You can conditionally style the cells in the cellsrenderer (as shown here).

    To achieve both a different approach has to be followed – change the cells of the computed column with the setcellvalue method. This way, all cells will have actual values which can be sorted and styled via cellclassname. Your cells may also require an actual datafield for initialization.

    Best Regards,
    Dimitar

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


    phoxlabs
    Participant

    That makes sense. Can you give me an example of the setcellvalue? Would i have to go through each row as it is computed and set the value that way by looping through the rows?

    for (var i = 0; i < rows.length; i++) {

    My goal is to have that computed column sorted on page load.


    phoxlabs
    Participant

    I currently have the cellclass figured out per row:

    var dataAdapter = new $.jqx.dataAdapter(source, {
                    downloadComplete: function (data, status, xhr) { },
                    loadComplete: function (data) { 
                    	setTimeout(function () {
                    $(this).trigger("reloadGrid"); // Call to fix client-side sorting
                }, 50);
                },
                    loadError: function (xhr, status, error) { }
                });
                
                $("#jqxgrid-trade-p").jqxGrid(
                {
                    width: '100%',
                    rowsheight: 40,
                    autoheight: true,
                    theme: "metrodark",
                    sortable: true,
                    source: dataAdapter,
                    showaggregates: true,
                    columnsresize: false,
                    showstatusbar: true,
                    statusbarheight: 40,
                    altrows: true,
                    
                    columns: [
    
                      { text: 'Symbol', dataField: 'symbol', width: '15%' },
                      { text: 'Quantity', dataField: 'qty', width: '15%' },
                      { text: 'Last Price', dataField: 'lastPrice', cellsformat: 'c2', width: '15%' },
                      { text: 'Net Profit', datafield: 'netProfit',  keys: true, sortable: true,
                          cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
    
                              var netProfit = parseFloat(rowdata.costBasis) - parseFloat(rowdata.marketValue);
                              
                              if (netProfit < 0) {
                        return "<div style='height: 100%; background: red; padding: 10px;'>"  + dataAdapter.formatNumber(netProfit, "c2")  + "</div>";
                    }
                    else return "<div style='height: 100%; background: green; padding: 10px;'>" + dataAdapter.formatNumber(netProfit, "c2") + "</div>";
    
                      	}, sorttype: function (cellValue, rowdata) {
                      		var netProfit = parseFloat(rowdata.costBasis) - parseFloat(rowdata.marketValue);
            				return netProfit; 
            				
        				}  },
                      { text: 'Cost Per Share', datafield: 'total',
                          cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
                              var total = parseFloat(rowdata.costBasis) / parseFloat(rowdata.qty);
                              return "<div style='margin: 10px;' class='jqx-right-align'>" + dataAdapter.formatNumber(total, "c2") + "</div>";
                      	} },
                      { text: 'Target Price', datafield: 'yahooTargetPrice', cellsformat: 'c2', width: '15%'}
    
                      
                    ]
                });

    Dimitar
    Participant

    Hi phoxlabs,

    If you do not have the computed values in your source, you would have to iterate through all rows. We suggest you do this in the ready callback function of the grid. After the for loop, call sortby for the computed column.

    Best Regards,
    Dimitar

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


    Jerry Penguin
    Participant

    Hi Dimitar,
    is it possible to see a Demo for such a callback function.
    My problem is, that i work with date columns in different localization.
    In the computed columns I have computed date fields, date-diffs and average usage of counts.
    I need to sort the computed numbers columns.
    But I have no idea who to implement a callback function.
    I have tried to use $(“#jqxGrid”).jqxGrid(‘setcellvalue’, index, “TagesVerbrauch”,usage); in the cellrenderer function, but this gives a loopback.

    Thanks in advance
    Jörn


    Dimitar
    Participant

    Hi Jörn,

    The suggestion in my previous post was about the jqxGrid ready callback function. It is called when the grid is initialized and the binding is complete. Here is an example with it: http://jsfiddle.net/jqwidgets/Xr4LS/. For more information, please refer to the jqxGrid API documentation: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-api.htm.

    Best Regards,
    Dimitar

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


    Jerry Penguin
    Participant

    Hi Dimitar,

    Thanks for the quick reply, it works, I have built the following function:

    
    Ready: function () {
    	Var rows = $ ( '# jqxGrid') jqxGrid ( 'getrows');
    	For (var i = 0; i <rows.length; i ++) {
    	Var _AnzTage = Math.round (DateDiff (rows [i] .Date_from, rows [i] .Date_bis, "d")) + 1;
    		$ ( '# JqxGrid'). JqxGrid ( 'setcellvalue', i, 'days', _daysdays);
    		//Console.log ( "AnzTage =" + _AnzTage);
    	}
    },
    

    But I have now the problem that for each line I use the method setcellvalue the “updaterow” function of my source object is called and an update is written to the MySQL database.

    Now my question:
    Can I define a function in the source object that calculates a field while reading the JSON data?
    I have neither found a method in the API of jqxGrid nor in the jqxDataAdapter API such as “selectrow”, since there is a way, such as:

    
    datafields: [
    	{ name: 'ZigID' },
    	{ name: 'Datum_von', type: 'date' },
    	{ name: 'Datum_bis', type: 'date' },
    	{ name: 'Verbrauch' },
    	{ name: 'AnzTage' },
    	{ name: 'TagesVerbrauch' = 'Verbrauch' / 'AnzTage'}
    

    Thanks in advance

    Greetings Jörn


    Jerry Penguin
    Participant

    Hi Dimitar,

    I have found a solution:

    
    			var dataAdapter = new $.jqx.dataAdapter(source, 
    				{
    					beforeLoadComplete: function (records) {
    						for (var i = 0; i < records.length; i++) {
    							var _AnzTage	= Math.round(DateDiff(records[i]['Datum_von'], records[i]['Datum_bis'], "d")) + 1;
    							records[i]['AnzTage'] = _AnzTage;
    							//console.log("AnzTage1=" + _AnzTage);
    							//console.log("AnzTage2=" + records[i]['AnzTage']);
    							var _TagesVerbrauch	= records[i]['Verbrauch'] / _AnzTage;
    							records[i]['TagesVerbrauch'] = _TagesVerbrauch;
    							//console.log("TagesVerbrauch1=" + _TagesVerbrauch);
    							//console.log("TagesVerbrauch2=" + records[i]['TagesVerbrauch']);
    						}
    					}
    				}
    			);
    

    It works fine, I can sort the columns and I can use the build in cellsformat in columns with my localization objects.

    Thanks and have a nice weekend

    Greetings Jörn

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.