Announcement

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

  • claudiobosticco
    replied
    Now it's working, thank you very much!

    Leave a comment:


  • Isomorphic
    replied
    hi Claudio,

    On the first issue, we've fixed so that replacementValue: "" works as expected.

    For the icon-clipping - when using the hilite.icon attribute, you'll need to set grid.hiliteIconSize to a size big enough for your SVG - the default is 12px - we've made hiliteIconSize scale with density in Shiva, so it'll increase in line with the "size" attribute in your src-string - again, given hiliteIconSize, a size-attribute on the src-string is probably then unnecessary, unless you want the graphic to be smaller than the hiliteIconSize.

    Please retest with today's build, dated July 14, or a later one.

    Leave a comment:


  • Isomorphic
    replied
    Yes, that's strange - we'll take a look.

    Note that doing this does not clip the image

    Code:
    replacementValue: isc.Canvas.imgHTML(spritePrefix+"#icon-forward;size:16,16;")

    Leave a comment:


  • claudiobosticco
    replied
    Hello, please try this modified test case:

    Code:
    var ds = isc.DataSource.get("countryDS");
    
    var spriteFile = "[ISOMORPHIC]system/reference/inlineExamples/svg/mediaPlayer.svg";
    // the special prefix "sprite:svg:" causes the browser to access the spriteFile svg file to
    // re-<use> the template <symbol> tags defined there
    var spritePrefix = "sprite:svg:" + spriteFile;
    // array of hilite-objects to apply to the grid
    var hiliteArray =
        [
            {
                fieldName:[
                    "area",
                    "gdp"
                ],
                replacementValue: "&nbsp;",
                icon:spritePrefix+"#icon-forward;size:16,16;",
                criteria: {
                    _constructor: "AdvancedCriteria",
                    operator: "and",
                    criteria: [
                        {
                            fieldName: "gdp",
                            operator: "greaterThan",
                            value: 1000000
                        },
                        {
                            fieldName: "area",
                            operator: "lessThan",
                            value: 500000
                        }
                    ]
                }
            }
        ]
    ;
    
    isc.VLayout.create({
        ID:"layout",
        width:600, height:250,
        membersMargin: 5,
        members: [
            isc.HLayout.create({
                ID:"buttonLayout",
                width:"*", height:30,
                membersMargin: 10,
                members: [
                    isc.IButton.create({
                        ID: "editHilitesButton",
                        autoFit: true,
                        title: "Edit Hilites",
                        click: "countryList.editHilites();"
                    }),
                    isc.IButton.create({
                        ID: "stateButton",
                        autoFit: true,
                        title: "Recreate from State",
                        click: function () {
                            var state = countryList.getHiliteState();
    
                            countryList.destroy();
                            // don't include the hilite array in the create statement to demonstrate
                            // re-application from state via setHiliteState()
                            recreateListGrid(false);
                            countryList.setHiliteState(state);
                        }
                    })
                ]
            })
        ]
    });
    
    // Create the initial ListGrid. See comment below for parameter description.
    recreateListGrid(true);
    
    // Function to create a new ListGrid. On the first call, passes "true" as the parameter, such
    // that the hiliteArray above is included in the create() statement. Subsequent calls pass false,
    // meaning no hiliteArray is included and a separate call to setHiliteState() is used instead.
    function recreateListGrid(includeHilites) {
        layout.addMember(isc.ListGrid.create({
            ID: "countryList",
            width:"100%", height:"*",
    
            dataSource: ds,
            autoFetchData: true,
            canAddFormulaFields: true,
            canAddSummaryFields: true,
            fields:[
                {name:"countryCode", title:"Flag", width:60, type:"image", imageURLPrefix:"flags/24/",
                    imageURLSuffix:".png"
                },
                {name:"countryName", title:"Country"},
                {name:"capital", title:"Capital"},
                {name:"population", title:"Population"},
                {name:"area", title:"Area"},
                {name:"gdp"}
            ],
            hilites: includeHilites ? hiliteArray : null
        }));
    
    }
    you'll see that the svg icon sits low and gets clipped on the bottom. When using formatCellValue it was centered and I could make it even bigger without clipping.

    Leave a comment:


  • Isomorphic
    replied
    Not really - applied to replacementValue, hiliteIconPosition doesn't really have a purpose, but not much else is different. Note that, in the example shown and Shiva, the png will map to SVG via the stockIcons system - if your actual icon is an SVG of your own, you can specify the sizes in the src-string to get automatic scaling.

    However - we *will* have a quick look at why we don't show the hilite-icon when there's no value (which is what setting replacementValue to "" resembles).

    Leave a comment:


  • claudiobosticco
    replied
    Thanks! As I'm actually thinking of using an SVG, does one of the two approaches has an advantage?

    Leave a comment:


  • Isomorphic
    replied
    hi Claudio - yes, that is the way things work right now.

    But you can stick the icon straight in the replacementValue if you want to:

    Code:
        replacementValue: isc.Canvas.imgHTML("[SKINIMG]/actions/exclamation.png", 16, 16)

    Leave a comment:


  • claudiobosticco
    replied
    thanks for the heads up! Now it's working. Is it expected that to display only the icon, I've got to use replacementValue: "&nbsp;", as the empty string doesn't seem to work?

    Leave a comment:


  • Isomorphic
    replied
    hi Claudio - your file-path is wrong - you want [SKINIMG], or [SKIN]images/

    Leave a comment:


  • claudiobosticco
    replied
    note that I'm asking because I usually define a formatCellValue when I want to add an icon or entirely replace the value with an icon, but this feature seems perfect to avoid this (at least if it's possible to define a criteria) and also seems to have an advantage in respect to filtering.

    Leave a comment:


  • claudiobosticco
    started a topic hilite icon not working?

    hilite icon not working?

    Hello, I was trying this sample
    https://www-demos.smartclient.com/sm...izeIncrease=10

    and noticed that the icon in the hilite is added using htmlAfter, but in the docs I see an icon attribute (and a ListGrid.hiliteIconPosition).

    So I tried to remove the html after and add icon:"[SKIN]/actions/exclamation.png", but nothing shows.

    Is it a bug or am I missing something?
Working...
X