RollOverCanvas on ListGrid just for a certain column?

[claudiobosticco]

I was looking at this sample
https://www.smartclient.com/smartcli...izeIncrease=10

and wondering if I could have those controls at cell level...thanks to this thread I realized that it's possible, and it's pretty cool, just modify the sample like this:

isc.ListGrid.create({
    ID: "countryList",
    width: 520, height: 224,
    data: countryData,
    selectionType: "single",
    fields: [
        {name: "countryCode", title: "Flag", width: 50, type: "image", imageURLPrefix: "flags/16/", imageURLSuffix: ".png"},
        {name: "countryName", title: "Country"},
        {name: "capital", title: "Capital"},
        {name: "continent", title: "Continent"}
    ],
    showRollOverCanvas: true,
    showRollUnderCanvas: false, // disable the rollUnderCanvas because we're not using it
    rollOverCanvasConstructor: isc.HLayout,
    useCellRollOvers: true,
    getRollOverCanvas: function (rowNum, colNum) {
        var fieldName = this.getFieldName(colNum);
        if (fieldName === 'countryCode') return null; // don't want controls for this field
        var canvas = this.Super("getRollOverCanvas", arguments);
        canvas.fieldName = fieldName;
        return canvas;
    },
    rollOverCanvasProperties: {
        snapTo: "R", height: 20, width: 55,
        members: [
            {
                _constructor: "Button", title: "+",
                click: function () {
                    isc.say('you clicked plus, field "' + this.parentElement.fieldName + '".<br>Record is:' + this.echo(this.parentElement.record));
                },
                height: 20, width: 27
            },
            {
                _constructor: "Button", title: "-",
                click: function () {
                    isc.say('you clicked minus, field "' + this.parentElement.fieldName + '.<br>Record is:' + this.echo(this.parentElement.record));
                },
                height: 20, width: 27
            }
        ]
    }
});

[slick07]

Solved. Thanks for the tip! I do not know how I missed that...

[Isomorphic]

Take a closer look - getRollOverCanvas allows you to return null if you do not want a rollover Canvas on specific rows.

[slick07]

I used that method but it is not enough. I do not want the icons to appear for all cells from all columns. I would like the icons to appear only for a certain column.

[Blama]

See setUseCellRollOvers(), which is mentioned in setShowRollOverCanvas().
Wr.t. to the showcase: I'd always use the SmartClient showcase (I'm using SmartGWT myself), as it is easier to test and change samples there. Everything possible in SmartClient is working in SmartGWT as well with slight name variations (e.g. properties instead of setters).

Best regards
Blama

[slick07]

Also it seems I have posted the question in the wrong forum... It was meant for Smart GWT but I do not know how to move it there...

[slick07]

Hi Blama,

Sorry but no. In your case it is per row. I need per cell and only for a certain column. In your example let's say I would like the icons to appear only for the Country column.

Slick

[Blama]

Hi,

does this sample help?

Best regards
Blama

[slick07]

I see that there is a setting 'setUseCellRollOvers' to apply a RollOverCanvas to each cell. However what can be done do display it only on the cells from a certain column and not for the entire grid?