Announcement

Collapse
No announcement yet.
X
Collapse
  • Page of 1
  • Filter
  • Time
Clear All
new posts
Previous template Next
    #1

    Display large grid

    Hello,
    We are using SmartClient_70rc2_Pro.

    I'm building a dynamic grid that can have 1 to 100 columns and 1 to 1000 rows. The grid will be in a VLayout. I want the grid to take all the space the browser has and can resize when the browser is resized. I also want to set the minimal width of the columns to 50px when there are more than 10 columns in the grid, so that the columns are not too small to see. The horizontal and vertical scroll bar should be added to the grid when there are too many columns or too many columns to show.

    I've played with the grid settings for a while and couldn't get what I want.
    See the following example. After I put the grid in a VLayout, some columns are not displayed because there are too many columns.

    Any suggestions on how to accomplish this will be helpful.

    Thanks!
    <HTML><HEAD>
    <SCRIPT>var isomorphicDir="../isomorphic/";</SCRIPT>
    <SCRIPT SRC=../isomorphic/system/modules/ISC_Core.js></SCRIPT>
    <SCRIPT SRC=../isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
    <SCRIPT SRC=../isomorphic/system/modules/ISC_Containers.js></SCRIPT>
    <SCRIPT SRC=../isomorphic/system/modules/ISC_Grids.js></SCRIPT>
    <SCRIPT SRC=../isomorphic/system/modules/ISC_Forms.js></SCRIPT>
    <SCRIPT SRC=../isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
    <SCRIPT SRC=../isomorphic/skins/TreeFrog/load_skin.js></SCRIPT>
    </HEAD><BODY>
    <SCRIPT>

    try {
    ctDisplayDataGrid.invalidateCache();
    ctDisplayDataGrid.show();
    } catch(err) {
    isc.ListGrid.create({
    ID: "ctDisplayDataGrid",
    loadingDataMessage:"Loading...",
    bodyBackgroundColor:"#FFFFFF",
    alternateRecordStyles:true,
    canPickFields:false,
    autoFitFieldWidths:true,
    autoFitData:"horizontal",
    // autoFitMaxWidth:"2000",
    // autoFitMaxColumns:7,
    // width:ctrContentWidth,
    // autoFitMaxHeight:800,
    // autoFitMaxHeight:"50%",
    width:"100%",
    height:"100%",
    border:"1px solid red",
    autoFetchData:false,
    top:10,
    left:10,
    canReorderRecords: true,
    autoDraw:true,
    fields:[
    ]
    });
    }

    try {
    ctrPageLayout.show();
    } catch(err) {
    isc.VLayout.create({
    members:[
    ctDisplayDataGrid
    ],
    ID:"ctrPageLayout",
    border:"1px solid black",
    overflow:"hidden",
    top:10,
    left:10,
    width:"100%",
    height:"100%",
    autoDraw:true
    })
    }


    var MAX_COL = 50;
    var MAX_ROW = 100;
    var ar= Array.create();
    for ( i=0; i<MAX_COL; i++){
    var f = new Object();
    f.title = "c"+i;
    f.name = "c"+i;
    f.type="text";
    f.width=50;
    ar.add(f);
    }
    var data = Array.create();
    for ( r=0; r<MAX_ROW; r++){
    row = Array.create();
    for ( i=0; i<MAX_COL; i++){
    row["c"+i]="row"+r+"col"+i;
    }
    data.add(row);
    }
    ctDisplayDataGrid.setFields(ar);
    ctDisplayDataGrid.setData(data);

    </SCRIPT>
    </BODY></HTML>
    Tags: None
    #2
    Turn off the autoFit settings, the default behavior of the grid is already what you want, with the exception only of establishing a minimum width. For that, in 8.0 there's ListGrid.minFieldWidth - if you stick with 7.0 you'll still need to assign the widths to each field, and it will establish the field as exactly 50 rather than a minimum of 50, so you will probably want to add your own sizing logic to determine when to assign 50 vs allow the default sizing.

    Comment

      #3
      Thanks for the quick response. It works!

      Comment

      Previous template Next
      Working...
      X