Announcement

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

    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?

    #2
    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.

    Comment


      #3
      hi Claudio - your file-path is wrong - you want [SKINIMG], or [SKIN]images/

      Comment


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

        Comment


          #5
          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)

          Comment


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

            Comment


              #7
              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).

              Comment


                #8
                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.

                Comment


                  #9
                  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;")

                  Comment


                    #10
                    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.

                    Comment


                      #11
                      Now it's working, thank you very much!

                      Comment


                        #12
                        Hello, is it expected that in hilites doesn't work to specify just the icon name, ie icon:"Cancel" ?

                        Also, now that all icons are scaling with densities, in my application I see that the default hilite icon size seems smaller than that of a Button for example, is it intended like this?


                        Comment


                          #13
                          hi Claudio,

                          We've fixed stockIcon-name mapping for the Hilite.icon property (and other valueIcons).

                          As for the hiliteIconSize, it's always defaulted to 12px, since it's displayed inline in cells - we'll have a look at increasing the default by a couple of px in Flat skins, and you can do it yourself in load_skin, if you have a custom skin.

                          Please retry with tomorrow's builds.

                          Comment


                            #14
                            Originally posted by Isomorphic View Post
                            hi Claudio,

                            We've fixed stockIcon-name mapping for the Hilite.icon property (and other valueIcons).
                            SmartClient Version: SNAPSHOT_v13.1d_2024-09-25/AllModules Development Only (built 2024-09-25)

                            I see it's fixed, thank you very much

                            Comment

                            Working...
                            X