HowTo change the cellIcon in a ListGrid

[jazevedo]

Hi,

I am using smatclient snapshot version SmartClient_SC_SNAPSHOT-2010-11-08 and I am trying to change the cellIcon when the user double clicks on the cell, but I tried everything (but maybe the wrong things :-)). I just don't manage to get it working, here is the snip of the code:

isc.ListGrid.create({
        ID:"nodePortGrid"+record.id,
        dataSource: node_port,
        initialCriteria: {fk_node_card_id : record.id},
        autoFetchData: true,
        canEdit:false,
        autoDraw:false,
        fields:[
            {name:"measure", title:"Measure", type:"icon", cellIcon:"icons/time.png", autoFitWidth:true},
            {name:"audit", title:"", type: "icon", cellIcon:"icons/audit.png", autoFitWidth:true},
            {name:"dlm_enabled", title:"DLM", type:"image", imageURLPrefix:"icons/", imageURLSuffix:".png", valueIcons:{'false':'dlmfalse','true':'dlmtrue'}, autoFitWidth:true},
            {name:"locked", title:"Lock", type:"image", imageURLPrefix:"icons/", imageURLSuffix:".png", valueIcons:{'true':'locktrue'}, autoFitWidth:true},
            {name:"customer_id", title:"Customer ID", autoFitWidth:true},
            {name:"port_name", title:"Port Name", autoFitWidth:true},
            {name:"service_profile", title:"Service Profile", autoFitWidth:true},
            {name:"spectrum_profile", title:"Spectrum Profile", autoFitWidth:true},
            {name:"aal5_encapsulation_detection", title: "AAL5 Encapsulation", autoFitWidth:true},
            {name:"modem_type", title:"Modem", autoFitWidth:true},
            {name:"fk_isp_id", title:"ISP", type:"select", displayField:"abbrevation", optionDataSource:"isp", valueField:"id", autoFitWidth:true},
            {name:"vci", title:"VCI", autoFitWidth:true},
            {name:"comment", title:"History",autoFitWidth:true, canExpand:true}
        ],

 cellDoubleClick: function(record, rowNum, colNum) {
            if (this.getField(colNum).name == "audit") {
                record[this.recordBaseStyleProperty]="myGridCell";
                this.getField(colNum).cellIcon("icons/sound.png");
                isc.say(this.getField(colNum).cellIcon);
                this.refreshCell(rowNum,colNum);
                isc.XMLTools.loadWSDL("http://localhost/Node/NodeSOAPImpl?wsdl",
                    function(service) {run(service, record, rowNum);},null, true);
            }
            if (this.getField(colNum).name == "measure") {
               isc.XMLTools.loadWSDL("http://localhost:9090/NodeNetwork/NodeNetworkSOAPImpl?wsdl",
                    function(service) {measure(service, record, rowNum);},null, true)
            }
            
        }
});

Can someone help me here?

Thanks,

Jeronimo

[jazevedo]

Has anyone any hint, I would appriciate...

Thanks

[jazevedo]

Anyone any idea... Is it so difficult or is it that easy :-)

[acarur01]

maybe try

this.getField(colNum).setProperty("cellIcon","icons/sound.png"); instead of this.getField(colNum).cellIcon("icons/sound.png") - not sure what you are trying to do there..cellIcon is a property not a function as far as i know

[jazevedo]

Hi acarur01,

Thanks, for your reply.
Yes teh cellIcon is an property an not an fucntion, but I tried everything. With setProperty it is not working because it is not a function of the ListGridField. Well I tried as I said everything I have no idea why it is not working..

Thnaks

Jeronimo

[acarur01]

Got it. markForRedraw solved it.

isc.ListGrid.create({
    ID:"countryList",
    width:500, height:224,
    data: countryData,
    selectionType:"single",
    fields:[
        {name:"countryCode", title:"Flag", width:50, align:"right",
         type:"image", imageURLPrefix:"flags/16/", imageURLSuffix:".png"},
        {name:"countryName", title:"Country"},
        {name:"capital", title:"Capital"},
        {name:"continent", title:"Continent"},
        {name:"icon", title:"ffIcon", type: "icon"}
    ],
    baseStyle:"simpleCell",
    showRollOver:false, cellHeight:22,
    showSelectionCanvas:true,
    selectionUnderCanvasConstructor:isc.StretchImg,
    selectionUnderCanvasProperties:{
        vertical:false,
        capSize:7,
        src:"other/cellSelected.png"
    }  
});


isc.ImgButton.create({title:"Change Icon",top:400,ID: "testButton",
click: function(){countryList.getField(4).cellIcon="icons/16/icon_add_files.png";
isc.warn(countryList.getField(4).cellIcon);countryList.markForRedraw();}
});

[jazevedo]

Hi acarur01,

Thanks for hints and help, but it didn't work because all the cellIcon is changed for every record in the ListGrid, not what I actually want. Anyway I manged to get it working here is what I did:

isc.ListGrid.create({
        ID:"nodePortGrid"+record.id,
        dataSource: node_port,
        initialCriteria: {fk_node_card_id : record.id},
        autoFetchData: true,
        canEdit:false,
        autoDraw:false,
        fields:[
            {name:"measure", title:"Measure", type:"icon", cellIcon:"icons/time.png", autoFitWidth:true},
            {name:"audit", title:"", type: "icon", imageURLPrefix:"icons/", imageURLSuffix:".png", valueIcons:{'undefined':'audit','1':'sound'}, autoFitWidth:true},
            {name:"dlm_enabled", title:"DLM", type:"image", imageURLPrefix:"icons/", imageURLSuffix:".png", valueIcons:{'false':'dlmfalse','true':'dlmtrue'}, autoFitWidth:true},
            {name:"locked", title:"Lock", type:"image", imageURLPrefix:"icons/", imageURLSuffix:".png", valueIcons:{'true':'locktrue'}, autoFitWidth:true},
            {name:"customer_id", title:"Customer ID", autoFitWidth:true},
            {name:"port_name", title:"Port Name", autoFitWidth:true},
            {name:"service_profile", title:"Service Profile", autoFitWidth:true},
            {name:"spectrum_profile", title:"Spectrum Profile", autoFitWidth:true},
            {name:"aal5_encapsulation_detection", title: "AAL5 Encapsulation", autoFitWidth:true},
            {name:"modem_type", title:"Modem", autoFitWidth:true},
            {name:"fk_isp_id", title:"ISP", type:"select", displayField:"abbrevation", optionDataSource:"isp", valueField:"id", autoFitWidth:true},
            {name:"vci", title:"VCI", autoFitWidth:true},
            {name:"comment", title:"History",autoFitWidth:true, canExpand:true}
        ],

 cellDoubleClick: function(record, rowNum, colNum) {
            if (this.getField(colNum).name == "audit") {
                record[this.recordBaseStyleProperty]="myGridCell";
                record.audit = "1";
                this.refreshRow(rowNum);
                isc.XMLTools.loadWSDL("http://localhost/Node/NodeSOAPImpl?wsdl",
                    function(service) {run(service, record, rowNum);},null, true);
            }
            if (this.getField(colNum).name == "measure") {
               isc.XMLTools.loadWSDL("http://localhost:9090/NodeNetwork/NodeNetworkSOAPImpl?wsdl",
                    function(service) {measure(service, record, rowNum);},null, true)
            }
            
        }
});

Ass you can see I removed cellIcon an replaced it by

type: "icon", imageURLPrefix:"icons/", imageURLSuffix:".png", valueIcons:{'undefined':'audit','1':'sound'}

Than I added to my cellDoubleClick function the following 'record.audit = "1"' and did a 'this.refreshRow(rowNum)'. I change the value of record.audit from undefined to 1 and the icon chabges after the refresh. Well I don't know if this is a good way to it, but it works..

Thanks for you help,

Jeronimo