autoChildProperties for expansionField (printPreview)

[Developer12145]

Hi Isomorphic,

I´m using a ListGrid within a print preview using "Canvas.showPrintPreview(listGird);"
on the ListGrid I apply the following properties:

setCanExpandRecords(true);
setExpansionMode(ExpansionMode.DETAIL_FIELD);

Everything works fine and as expected. In my case, I want to give the DETAIL_FIELD a different background-color, because the default doesn`t fit for our app. But I have some issues to do so.
What I tried:
Setting "setHoverStyle("customGridHover");" on the ListGrid. This didn't work.

What I wanted to try is to set "setHoverStyle" on a ListGridField and pass it as autoChildProperties, but the method does not exist.

The style-class I want to replace on the ListGrid is "gridHover" but thats not possible, because of the reasons above. I cannot override it in the stylesheet, because it would influence all hoves in the app.
Here a little screenshot:


Can You please give some advice on how to do it, or add a setter for that on the ListGridField, so I can pass it as autoChildProperties?

Thanks in advance and
Kind Regards

[Isomorphic]

Why are you not just customizing the expansionDetailField AutoChild? Is there something wrong with that approach for you?

[Blama]

Hi Isomorphic,

I think that the problem is that there is no setHoverStyle() in ListGridField, so it is not possible to use a field configured this way in ListGrid.setAutoChildProperties("expansionField", myLGF). Is that what you meant?

Best regards
Blama

[Isomorphic]

It's not clear why you guys are focused on the hoverStyle - this is not a hover, so this API is not relevant. The default style for the expansionDetailField AutoChild happens to be the same as the hover style, but you can change it via normal AutoChild properties.

Also, there is no reason this would be related to an LGF. Although the expansionDetailField shows data from a particular field, there is only one expansionDetailField displayed per row - it is not field specific.

[Blama]

Hi Isomorphic,

thanks. I think I got it. I got mislead by the default style.

Modified sample:

isc.ListGrid.create({
    ID: "countryList",
    width: 500, height: 350, 
    data: countryData,
    fields: [
        {name: "countryName", title: "Country"},
        {name: "capital", title: "Capital"},
        {name: "continent", title: "Continent"}
    ],
    canExpandRecords: true,
    expansionMode: "detailField",
    detailField: "background",
[B]    expansionDetailFieldProperties: {styleName:"normalDisabled"},[/B]
});

isc.IButton.create({ 
    ID : "buttonPdf",
    width: 150,
    title: "Export",  
    click : function () {
        // this sample exports to the Enterprise skin, and that skin defaults to 
        // alternate row styling but not alternate field styling - remember the 
        // alternate styling settings (from the current skin) and update them to
        // those required for Enterprise, via a call to setProperties().
        var oldAlternateRecordStyles = countryList.alternateRecordStyles;
        var oldAlternateFieldStyles = countryList.alternateFieldStyles;
        countryList.setProperties({
            alternateRecordStyles: true,
            alternateFieldStyles: false
        });

        var settings = {
            skinName: "Enterprise", 
            pdfName: "export"// without .pdf
        };
        isc.RPCManager.exportContent(mainLayout, settings);

        // reinstate the alternate styling settings from the current skin, on a short delay
        countryList.delayCall("setProperties", [{
            alternateRecordStyles: oldAlternateRecordStyles,
            alternateFieldStyles: oldAlternateFieldStyles
        }], 300);
    }
});
isc.IButton.create({ 
    ID : "buttonPreview",
    width: 150,
    title: "Show Print Preview",  
    click: function () {
        isc.Canvas.showPrintPreview(mainLayout);
    }
});
isc.HLayout.create({
    ID: "hLayout",
    membersMargin: 5,
    members: [
        buttonPdf,
        buttonPreview
    ]
});
isc.VLayout.create({
    ID: "mainLayout",
    width: 500,
    membersMargin: 5,
    height: 350,
    members: [
        countryList,
        hLayout
    ]
});
countryList.expandRecord(countryList.data[2]);
countryList.expandRecord(countryList.data[4]);

Thank you & Best regards
Blama