Announcement

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

    Dynamically changing ListGrid header icon for expansionfield

    I have a ListGrid with expansionMode set to detailField to present an expansion row for additional information. The header for the expansion field is set to show an icon indicating the "overall" expansion state of the entire grid -- open or closed. When the header button for the expansion column is clicked the grid rows are all expanded or collapsed depending on the current state. The initial icon seems quite simple to set, but I have tried several options to dynamically change the icon to indicate the new state -- setting the icon on the header object to overriding the draw method for the field.

    Is it possible to change the expansion header icon at runtime?

    An example snippet of this process is shown below - can be run in any of the feature explorer windows.

    Code:
    isc.ListGrid.create({
        ID: "countryList",
        width:500, height:300, 
        alternateRecordStyles:true,
        data: [{field1:"Test 1", field2:"Col 2", field3:"Col 3", desc:"This is row 1"},
                {field1:"Test 2", field2:"Col 2", field3:"Col 3", desc:"This is row 2"},
                {field1:"Test 3", field2:"Col 2", field3:"Col 3", desc:"This is row 3"}],
        fields: [
            {name: "field1", title: "Field 1"},
            {name: "field2", title: "Field 2"},
            {name: "field3", title: "Field 3"}
        ],
        expansionFieldProperties:{icon:"[SKIN]ListGrid/row_collapsed.png"},
        canExpandRecords: true,
        expansionMode: "detailField",
        detailField: "desc",
        isAllExpanded:false,
        expandCollapseRows:function(){
            if (this.isAllExpanded){
               for(var i=0; i<this.getTotalRows(); i++){
                   this.collapseRecord(this.getRecord(i));
                }
                this.fields[0].icon = "[SKIN]ListGrid/row_collapsed.png";
            }
            else{
                for(var i=0; i<this.getTotalRows(); i++){
                    this.expandRecord(this.getRecord(i));
                }
                this.fields[0].icon = "[SKIN]ListGrid/row_expanded.png";
            }
            this.isAllExpanded = !this.isAllExpanded;
        },
        headerClick:function(fieldNum){
            if (fieldNum == 0){
                isc.Timer.setTimeout({target:this, methodName:"expandCollapseRows"},150);
            }
            return this.Super("headerClick", arguments);
        }
    });

    #2
    Change Expantion field Position

    how can i change the position of Expand/Collapse field in ListGrid...

    now it showing in first column but i have to display in last column,

    Thanks,
    PRASANTH

    Comment

    Working...
    X