Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Several problems with ListGrid with createRecordComponent() implementation

    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.

    #2
    On #1 and #3, could you take a look at the docs for showRecordComponents and all linked properties, especially recordComponentPoolingMode (controls lifecycle and describes how to get involved) and recordComponentPosition (controls sizing).

    As far as #2 (printing the entire grid and all charts), while you could do this with recordComponentPoolingMode:"data" and showAllRecords:true (which would force fetching and rendering of all data), this is probably only going to work with relatively small data volume - can you comment on how large of an export you are going for here?

    Comment


      #3
      Thank you for your prompt replay.
      Adding the following options to the ListGrid solved all the 3 issue reported above:
      recordComponentPoolingMode: "data",
      showAllRecords:true,
      The record set is relatively small, up to couple of dozens of records.

      But I am facing now another related problem:

      When displaying the Print preview, the record component cell image is shifted to the left by the number of frozen columns.
      For example if I have 1 frozen column, the record component image is displayed on top of the cell left from the cell where it has to appear. If there are no frozen columns it appears where it is supposed to appear. Also when this happens, the cell where the cell component image is displayed is displayed with size to fit the image. But the cell where the record component has to appear is reduced to the size of the heading.
      The cell data and the record component cell data are both printed one on top of the other.
      See in the attachments for example of the problem. The expansion column is also counted as "frozen" in the example.
      Attached Files

      Comment


        #4
        We'll look into it and let you know what we find

        Thanks
        Isomorphic Software

        Comment


          #5
          We've made a change to address this issue.
          The fix should be present in the latest nightly build (April 18)
          Please give this a try and let us know if you continue to see the problem.

          Thanks
          Isomorphic Software

          Comment

          Working...
          X