Slick grid collapse and expand icons

[BuyInClub]

I know I am being dense, but I cannot figure out how to move to the SVG images. I do not see expanded or collapsed icons in my grid; however, the functionality works. I am using the following version of SlickGrid - https://cdn.jsdelivr.net/npm/[email protected]/dist/

I had this code

 .toggle.expand {
    background: url(http://6pac.github.io/SlickGrid/images/expand.gif) no-repeat center center;
  }

  .toggle.collapse {
    background: url(http://6pac.github.io/SlickGrid/images/collapse.gif) no-repeat center center;
  }

and changed it to this based on drilling into examples -

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/styles/css/slick.grid.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/styles/css/slick-default-theme.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/styles/css/slick-icons.css" type="text/css"/> // added this line
.toggle.expand {
    --alpine-group-expanded-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M17,11V13H7V11H17Z"/%3E%3C/svg%3E');
    -webkit-mask: var(--alpine-group-expanded-icon-svg) no-repeat;
    mask: var(--alpine-group-expanded-icon-svg) no-repeat;
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%
}

.toggle.collapse {
    --alpine-group-collapsed-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M11,7H13V11H17V13H13V17H11V13H7V11H11V7Z"/%3E%3C/svg%3E');
    -webkit-mask: var(--alpine-group-collapsed-icon-svg) no-repeat;
    mask: var(--alpine-group-collapsed-icon-svg) no-repeat;
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%

}
any help is appreciated. I have tried many things and have yet to be successful.

[ghiscoding]

but I cannot figure out how to move to the SVG images

it's not exactly clear what you're trying to do, what do you mean by move? If you just want to change the SVG to something else, I think it will only work via SASS because it uses a SASS mixin which cannot be used by CSS variables. Also if I remember correctly, there a couple of icons that are embedded within the Alpine Theme and only the Alpine Theme has SASS variables that can be customized.

SlickGrid/src/styles/_variables.scss

Lines 97 to 98 in d1132c9

	$alpine-group-expanded-icon-svg-path: "M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M17,11V13H7V11H17Z" !default;
	$alpine-group-collapsed-icon-svg-path: "M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M11,7H13V11H17V13H13V17H11V13H7V11H11V7Z" !default;

the mixin for the Alpine Theme that is being used is here

SlickGrid/src/styles/_mixins.scss

Lines 1 to 17 in d1132c9

	// credit goes to UnoCSS https://antfu.me/posts/icons-in-pure-css
	@mixin createSvgClass($cssVarName, $svgPath) {
	.#{$cssVarName} {
	@include createSvgStyle(#{$cssVarName + '-icon-svg'}, $svgPath); // all icon will create css variable named "[icon name]-icon-svg"
	}
	}
	// create SVG as a url() and the url string must be html escaped,
	// we will also use the name to create a CSS variable so that user could override any of the icon
	// by providing the full url string without needing else since it was already created
	@mixin createSvgStyle($cssVarName, $svgPath) {
	--#{$cssVarName}: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="#{$svgPath}"/%3E%3C/svg%3E');
	-webkit-mask: var(--#{$cssVarName}) no-repeat;
	mask: var(--#{$cssVarName}) no-repeat;
	mask-size: 100% 100%;
	-webkit-mask-size: 100% 100%;
	}

For the Classic Theme to work, I had to remove the references to the images and replaced them with SVG, so as per your code, it looks like you want to use the Classic Theme and if that is the case then you'll have to change it from here

SlickGrid/src/styles/slick-default-theme.scss

Lines 76 to 90 in d1132c9

	.slick-group-toggle.expanded {
	--un-icon: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1.2em" width="1.2em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M17,11V13H7V11H17Z"/%3E%3C/svg%3E');
	-webkit-mask: var(--un-icon) no-repeat;
	mask: var(--un-icon) no-repeat;
	mask-size: 100% 100%;
	-webkit-mask-size: 100% 100%;
	}
	.slick-group-toggle.collapsed {
	--un-icon: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1.2em" width="1.2em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M11,7H13V11H17V13H13V17H11V13H7V11H11V7Z"/%3E%3C/svg%3E');
	-webkit-mask: var(--un-icon) no-repeat;
	mask: var(--un-icon) no-repeat;
	mask-size: 100% 100%;
	-webkit-mask-size: 100% 100%;
	}

you can see a live demo of the grouping with both themes and default icons
https://6pac.github.io/SlickGrid/examples/example-draggable-grouping.html

[BuyInClub]

Let me start fresh -
If you go to this page - https://buyinclub.github.io/Table1-Details.html
You will notice that if you click to the right of the '1', first column, first row, it will collapse and expand, but you don't see the icon.
It most likely due to the fact that in the file gridstyle.css I reference gif files that are no longer there.

 .toggle.expand {
    background: url(http://6pac.github.io/SlickGrid/images/expand.gif) no-repeat center center;
  }

  .toggle.collapse {
    background: url(http://6pac.github.io/SlickGrid/images/collapse.gif) no-repeat center center;
  }

I'm trying to figure out how to change my code to use the images provided.

What is also confusing is that when I inspect the style I see ".toggle.collapse" and ".toggle.expand" In your examples the style is ".toggle.collapsed" (note the d at the end). I have no idea why that is.

If you click on the source code of the link, you will see I am including the themes

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/styles/css/slick.grid.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/styles/css/slick-default-theme.css">

I removed the the references from the gif images and used your code, but same result as either .slick-group-toggle.collapsed or .toggle.collapse
Belos is an impage from Chrome Inspect.

I am very confused, Am I making any sense.

Thanks.

[BuyInClub]

I now know why there is a difference in style names. I implemented the expand and collapse functionality and hence I created the ".toggle.collapse" and ".toggle.expand" names. Ugggh. My apologies. That being said, I still don't understand why the icons are not appearing. FYI, the code I wrote a long, long time ago --

 {id: "handNum", name: "Hand #", field: "handNum", width: 60, cssClass: "cell-title", formatter: HandFormatter},

var HandFormatter = function (row, cell, value, columnDef, dataContext) {
  if (value == null || value == undefined || dataContext === undefined) { return ""; }
  
  value = value.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
  var spacer = "<span style='display:inline-block;height:1px;width:" + (15 * dataContext["indent"]) + "px'></span>";
  var idx = dataView.getIdxById(dataContext.id);
  if (data[idx + 1] && data[idx + 1].indent > data[idx].indent) {
    if (dataContext._collapsed) {
      return spacer + " <span class='toggle expand'></span>&nbsp;" + value;
    } else {
      return spacer + " <span class='toggle collapse'></span>&nbsp;" + value;
    }
  } else {
    return spacer + " <span class='toggle'></span>&nbsp;" + value;
  }
};

[ghiscoding]

We removed all the icons in v5 because SVGs take a lot less space and we can control their size and color, we don't have that flexibility with images. All images are gone, so stop referencing them (your website is referencing an image that doesn't exist), use the new SVG provided or use custom SVG, I mentioned that in the Migration to v5 which you might have missed reading.

when you hover the url, it should show the SVG icon and the name must be unique I think

Also as mentioned in the migration, all the code I got to replace with SVG came from this external article, you can read it for more info

We used the technique that Anthony Fu, creator of UnoCSS, wrote in his article Reimagine Atomic CSS, this article was very helpful to learn how to easily colorize SVG with pure CSS.

another problem you might have is CSS order specificity, just try to find the best CSS selector to target the SVG to override, you should be able to find that in the developer tool

EDIT

actually for your use case, I think it would simpler to just use the new SlickGrid Icons (.sgi) which is what I've done in the Collapsing Tree Example formatters. Just make sure you load the icons CSS, which I believe you already do, and remove any CSS styling by just using the code below, that should be it.

SlickGrid/examples/example5-collapsing.html

Lines 97 to 102 in d58e944

	if (data[idx + 1] && data[idx + 1].indent > data[idx].indent) {
	if (dataContext._collapsed) {
	return spacer + " <span class='toggle expand sgi sgi-plus-box-outline'></span>&nbsp;" + value;
	} else {
	return spacer + " <span class='toggle collapse sgi sgi-minus-box-outline'></span>&nbsp;" + value;
	}

That Collapsing Example, which seems to be like your website, no longer has any styling for expand/collapse images since it uses the new .sgi icon CSS classes and the only styling left is shown below. You can check the Examples Wiki for the available SlickGrid Icons

SlickGrid/examples/example5-collapsing.html

Lines 24 to 30 in d58e944

	.toggle {
	cursor: pointer;
	height: 1em;
	width: 1em;
	display: inline-block;
	font-size: 15px;
	}