IconCls Adding Double Quote

  1. #1

    IconCls Adding Double Quote

    I am trying to set the Panel IconCls to an svg image and it seems to be adding a double quote at the end for some reason...

    Click image for larger version. 

Name:	PanelHeaderWithAdditionalQuote.PNG 
Views:	44 
Size:	1.6 KB 
ID:	25100

    oPanel.IconCls = @"<?xml version=""1.0"" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height=""16px"" id=""Layer_1"" style=""enable-background:new 0 0 128 128;"" version=""1.1"" viewBox=""0 0 128 128"" width=""16px"" xml:space=""preserve"" xmlns=""http://www.w3.org/2000/svg"" xmlns:xlink=""http://www.w3.org/1999/xlink""><g><path d=""M102.924,116.949l12.807-12.807L53.705,42.116c1.021-2.582,1.596-5.39,1.596-8.332   c-0.002-12.556-10.178-22.731-22.732-22.733h-0.008l-0.045,0.001v0.002c-0.152,0.003-0.33,0.017-0.547,0.07   c-0.181,0.046-0.387,0.119-0.603,0.247c-0.325,0.186-0.663,0.521-0.852,0.899c-0.197,0.38-0.25,0.756-0.25,1.039   c0.006,0.438,0.102,0.704,0.178,0.913c0.162,0.393,0.318,0.607,0.48,0.836c0.305,0.409,0.654,0.791,1.074,1.226   c0.73,0.75,1.667,1.618,2.676,2.522c2.246,2.009,4.853,4.172,6.051,5.158l1.361,11.231l-8.104,8.135l-11.23-1.388   c-0.775-0.939-2.271-2.743-3.846-4.559c-1.138-1.311-2.314-2.623-3.314-3.647c-0.506-0.516-0.963-0.955-1.396-1.318   c-0.221-0.184-0.432-0.348-0.697
    -0.513c-0.137-0.08-0.285-0.164-0.494-0.246c-0.207-0.079-0.475-0.174-0.91-0.18   c-0.254-0.001-0.576,0.042-0.914,0.19c-0.252,0.108-0.504,0.282-0.699,0.485c-0.301,0.309-0.467,0.659-0.547,0.938   c-0.083,0.282-0.098,0.507-0.1,0.69C9.834,46.342,20.008,56.518,32.566,56.52c2.943,0.001,5.752-0.573,8.333-1.597L102.924,116.949   z"" style=""fill:#2F3435;""/><polygon points=""70.229,72.43 80.166,62.493 76.429,58.755 110.998,24.187 118.168,13.94 115.496,11.27    105.256,18.444 70.687,53.014 66.947,49.274 57.01,59.212 43.646,65.643 12.492,96.797 32.645,116.949 63.799,85.796  "" style=""fill:#2F3435;""/></g></svg>";
    Attached Thumbnails Click image for larger version. 

Name:	PanelHeaderWithAdditionalQuote.PNG 
Views:	34 
Size:	1.1 KB 
ID:	25099  
  2. #2
    Hello,

    The .IconCls property is expecting a css class name, so you cannot pass an SVG element as the value. I'm surprised it even rendered anything.

    Here's a sample demonstrating how to set a css with the SVG data, then set the IconCls property with the class name.

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    <style type="text/css">
        .logo {
          background: url('data:image/svg+xml;utf8,<svg height="16px" id="Layer_1" style="enable-background:new 0 0 128 128;" version="1.1" viewBox="0 0 128 128" width="16px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M102.924,116.949l12.807-12.807L53.705,42.116c1.021-2.582,1.596-5.39,1.596-8.332   c-0.002-12.556-10.178-22.731-22.732-22.733h-0.008l-0.045,0.001v0.002c-0.152,0.003-0.33,0.017-0.547,0.07   c-0.181,0.046-0.387,0.119-0.603,0.247c-0.325,0.186-0.663,0.521-0.852,0.899c-0.197,0.38-0.25,0.756-0.25,1.039   c0.006,0.438,0.102,0.704,0.178,0.913c0.162,0.393,0.318,0.607,0.48,0.836c0.305,0.409,0.654,0.791,1.074,1.226   c0.73,0.75,1.667,1.618,2.676,2.522c2.246,2.009,4.853,4.172,6.051,5.158l1.361,11.231l-8.104,8.135l-11.23-1.388   c-0.775-0.939-2.271-2.743-3.846-4.559c-1.138-1.311-2.314-2.623-3.314-3.647c-0.506-0.516-0.963-0.955-1.396-1.318   c-0.221-0.184-0.432-0.348-0.697-0.513c-0.137-0.08-0.285-0.164-0.494-0.246c-0.207-0.079-0.475-0.174-0.91-0.18   c-0.254-0.001-0.576,0.042-0.914,0.19c-0.252,0.108-0.504,0.282-0.699,0.485c-0.301,0.309-0.467,0.659-0.547,0.938   c-0.083,0.282-0.098,0.507-0.1,0.69C9.834,46.342,20.008,56.518,32.566,56.52c2.943,0.001,5.752-0.573,8.333-1.597L102.924,116.949   z" style="fill:#2F3435;"/><polygon points="70.229,72.43 80.166,62.493 76.429,58.755 110.998,24.187 118.168,13.94 115.496,11.27    105.256,18.444 70.687,53.014 66.947,49.274 57.01,59.212 43.646,65.643 12.492,96.797 32.645,116.949 63.799,85.796  " style="fill:#2F3435;"/></g></svg>');
        }
    } 
    </style>
    <html>
    <head runat="server">
        <title>SVG for Icon</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:Window
                ID="Window1"
                runat="server"
                Title="Hello World"
                IconCls="logo"
                Height="185"
                Width="350"
                BodyPadding="5">
            </ext:Window>
        </form>
    </body>
    </html>
    Hope this helps.
  3. #3
    Thanks Geoffrey, i was aware that it was expecting a class but wanted to be able to just set if from a simple resource without having to create a style or additional time consuming management. I would like to do it straight from code...maybe if i create the style in code and then set it, it will work. It would be handy to just set a resource like the "image src" property...
    <image src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvb...=="
    . Maybe if the panel framework had an additional property like "iconUrl".
  4. #4
    ...the fact that it is so close to working the way it is suggests that it would be very simple to add this functionality...just add another property that removes the extra quote. Anyways, thanks.
  5. #5
    The Icon is not set using an <img> element. The Icon is set using either a css class or inline style.

    Ext.NET is not adding an extra ". That " is happening because somehow the browser is trying to make sense of the elements it was passed and somehow it's rendering something relatively close to correct. You're basically improperly nesting HTML elements and the browser is trying to interpret your intention as best it can.

    I'm not entirely sure what you want to accomplish is possible without using either a css or inline style.

    Try to make the following work with specifying the svg within the style attribute:

    <div style="width:16ps; height:16px; background:url(your-svg-config-here);"></div>
    If you can make that work, then there might be hope in setting the Ext.NET component Icon from C# or markup.
    Geoffrey McGill
    Founder
  6. #6
    I will give it a try. Thanks.

Similar Threads

  1. Replies: 3
    Last Post: Jun 26, 2015, 11:46 AM
  2. Reply with quote
    By RCN in forum Open Discussions
    Replies: 2
    Last Post: Jan 30, 2015, 2:39 PM
  3. IconCls For ext:Editor
    By chsakell in forum 2.x Help
    Replies: 0
    Last Post: May 12, 2014, 6:11 PM
  4. Replies: 2
    Last Post: Aug 04, 2011, 2:14 PM
  5. [CLOSED] JSON.Deserialize backslash and double-quote fixing
    By webclouder in forum 1.x Legacy Premium Help
    Replies: 13
    Last Post: Jun 20, 2011, 9:10 PM

Tags for this Thread

Posting Permissions