Announcement

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

    Dynamic TreeIcon in TreeGrid using SVG

    I am trying to customize TreeNode.icon dynamically in the TreeGrid for the nodeIcon (without a static image URL but dynamic update an image e.g. using SVG instead). However, the TreeNode.icon API seems to be restricted to be using a SCImgURL type only.

    I just wonder if there is an alternate way to achieve that. Thanks.

    ----------------
    SmartClient Version: v9.1p_2015-02-05/Pro Deployment (built 2015-02-05)
    Windows 7 Firefox 36.0 and Chrome 40.0.2214.115 m

    #2
    An SCImgURL can be a "data:" URL, which can in turn embed SVG content (in browsers that support this).

    Comment


      #3
      Using the SVG as base64 works but not if it is unencoded...

      Code:
      icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIxN3B4IiBoZWlnaHQ9IjE3cHgiIHZpZXdCb3g9IjAgMCAxNyAxNyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTcgMTciIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8ZyBpZD0iY2xvc2VJY29uIj4KCQoJCTxlbGxpcHNlIGlkPSJncmV5Q2lyY2xlIiB0cmFuc2Zvcm09Im1hdHJpeCgwLjcwNzEgLTAuNzA3MSAwLjcwNzEgMC43MDcxIC0zLjM4MDEgOC40MDc1KSIgZmlsbD0iIzk5OTk5OSIgY3g9IjguNDU5IiBjeT0iOC4yODQiIHJ4PSI3Ljg1OSIgcnk9IjguMTM4Ii8+Cgk8ZyBpZD0iWCI+CgkJPGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjQuODQ0IiB5MT0iMTEuNTAzIiB4Mj0iMTEuNzQ5IiB5Mj0iNC41OTgiLz4KCQk8bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iMTEuNzQ5IiB5MT0iMTEuNTAzIiB4Mj0iNC44NDQiIHkyPSI0LjU5OCIvPgoJPC9nPgo8L2c+Cjwvc3ZnPgo='
      Code:
      icon: 'data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="17px" height="17px" viewBox="0 0 17 17" enable-background="new 0 0 17 17" xml:space="preserve"><g id="closeIcon"><ellipse id="greyCircle" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -3.3801 8.4075)" fill="#999999" cx="8.459" cy="8.284" rx="7.859" ry="8.138"/><g id="X"><line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="4.844" y1="11.503" x2="11.749" y2="4.598"/><line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="11.749" y1="11.503" x2="4.844" y2="4.598"/></g></g></svg>'
      where I would need the unencoded case.

      Comment


        #4
        Base64 encoding is easy to do on the fly.

        The other option is to have the URL just point at an SVG file (again in supported browsers).

        Comment

        Working...
        X