Quantcast
Channel: SmartClient Forums
Viewing all articles
Browse latest Browse all 4756

Several problems with ListGrid with createRecordComponent() implementation

$
0
0
SmartClient version SNAPSHOT_v9.1d_2014-01-02/Enterprise

browser: Chrome 34.0.1847.116 m, Firefox 28.0, Awesomium 1.7.4.2

Sample code:
Code:

var grid = isc.ListGrid.create({
  dataSource: dataSource,
  autoFetchData: false,
  defaultFields: [{name: "CODE", frozen:true},
                                {name: "SNAME"},
                                {name: "TIME"},
                                {name: "TRADE"},
                                {name: "PERC"},
                                {name: "POINTS"},
                                {name: "CLOSE"},
                                {name: "Chart", width: 100, autoFitWidth: false}],
                canRemoveRecords: true,
                autoSaveEdits: true,
                canEdit: true,
                editByCell: true,
                canExpandRecords : true,
                canExpandMultipleRecords: false,
                canReorderRecords: true,
                canDragRecordsOut: true,
                canAcceptDroppedRecords: true,
                dragDataAction: "move",
                canReorderFields: true,
                cellHeight: 30,
                showHeaderMenuButton: true,
                showRecordComponents: true,
                showRecordComponentsByCell: true,
                timeFormatter:"to24HourTime",
                autoFitWidthApproach: "both",
                getDefaultFieldWidth: function(field){
                    if(field && field.name=="Chart"){
                        return 100;
                    }
                    return this.Super("getDefaultFieldWidth", arguments);
                },
                createRecordComponent: function(record, colNum)
                {
                    var fieldName = this.getFieldName(colNum);

                    if (fieldName == "Chart") {
                        var recordCanvas = isc.HLayout.create({
                            height: 30,
                            width:100,
                            align: "center"
                        });

                        var chartImg = isc.FacetChart.create({
                            CODE: record["CODE"],
                            valueBase:0,
                            bandedBackground:false,
                            chartType: "Line",
                            showDataPoints: false,
                            showDataAxisLabel: false,
                            showDataValues: false,
                            showLegend: false,
                            showShadows:false,
                            shadowProperties:{},
                            showTitle: false,
                            showValueAxisLabel: false,
                            facets: [{id: "TIME", title: "Time"}],
                            valueProperty: "TRADE",
                            chartRectMargin: 0,
                            dataMargin: 0,
                            minDataSpreadPercent:10,
                            dataLineProperties: {lineWidth: 1},                           
                            gradationZeroLineProperties: {
                                lineWidth: 1,
                                lineOpacity: 0.5
                            },
                            gradationLineProperties: {lineWidth: 0,
                                lineOpacity: 0.0},
                            getYLabelsWidth: function() {
                                return -10;
                            },
                            getXLabelsHeight: function() {
                                return 0;
                            },
                            drawLabel: function() {
                            }
                        });
                        var _chartDS = isc.DS.get("chartDS");
                        var resultSet = isc.ResultSet.create({
                                dataSource : "chartDS",
                                ID: "chartRS_"+record["CODE"]
                            });
                        resultSet.dataArrived = function(startRow, endRow)
                            {
                                var data = resultSet.allRows;
                                chartImg.setData(data);
                            };
                        resultSet.fetchRemoteData({CODE: record["CODE"]});
                        recordCanvas.addMember(chartImg);
                        return recordCanvas;
                    }
                    else {
                        return this.Super("createRecordComponent", arguments);
                    }
                }, 
            });

Based on the code example above, I have several questions and I observe several problems.

1. The chart image is drown when the record is visible. It appears that when the row goes off screen, the image is destroyed and re-created when appears on the screen. This results in constant server calls for the chart data when scrolling.
- How to resolve this problem and avoid server calls for the charts when scrolling the grid?

2. When displaying print preview for the grid, only the visible rows will display chart image on the print preview and later only the visible rows will print chart image. The rest of the rows in the grid will display all the data except for the chart image.
- How to force it to display on the print preview and print the chart data for the rows not currently visible on the screen ?

3. The print preview and the print function ignores the column widths in the grid - as a result, the lines are wrapped around, even if there is enough space to print them on a single row with the selected paper size an orientation.

Viewing all articles
Browse latest Browse all 4756

Trending Articles