What's New?

[CLOSED] A dynamic column of images in Gridpanel

  1. #1
    Apr 18, 2011, 11:00 PM

    [CLOSED] A dynamic column of images in Gridpanel

    Hello all,

    I have a bit of a problem. I am presently working on a UI, however I cannot get a specific bit of functionality that I would like.

    I would like to have a gridpanel with a column that shows a specific icon based on the row's values. I have thought about using a custom renderer for an EXT:COLUMN, but the trouble is that I can only figure out how to output text - not an image. I can't find any demo of this in the EXT.NET examples site.

    Here's a quick and dirty example. I would like to put a small icon where I have put the text "GIF" output. I am sure this is very easy and it's something obvious, but I cannot figure it out.

    <%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">     
protected void Page_Load(object sender, EventArgs e)     
{         
    if (!X.IsAjaxRequest)         
    {             
        Store1.DataSource = new object[]             
    {                 
    new object[] {"3m Co", 71.72, 0.02, 0.03, "9/1 12:00am"},                 
    new object[] {"Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am"},                 
    new object[] {"Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am"},                 
    new object[] {"American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am"},                
    new object[] {"American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am"},                
    new object[] {"AT&amp;T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am"},                 
    new object[] {"Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am"},                 
    new object[] {"Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am"},                 
    new object[] {"Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am"},                 
    new object[] {"E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am"},                 
    new object[] {"Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am"}            
    
    };               
    this.Store1.DataBind();         }     
} 
</script>   
<script type="text/javascript">

        var companyRenderer = function (value) {
            var r = Store1.getById(value);
            if (Ext.isEmpty(r)) {
                return "ERR.GIF";
            }
            else if (r.data.pctChange > 0) {
                return "GOOD.GIF";
            }
            else if (r.data.pctChange == 0) {
                return "OK.GIF";
            }
            else if (r.data.pctChange < 0) {
                return "BAD.GIF";
            }
            else {
                return "";
            }
        };
</script>

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head id="Head1" runat="server">     
    <title></title>           
</head> 
 <body>     
 <form id="form1" runat="server">         
    <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" />
    <ext:Store ID="Store1" runat="server">
        <Reader>
        <ext:ArrayReader IDProperty="company">
        <Fields>
            <ext:RecordField Name="company" />
            <ext:RecordField Name="price" Type="Float" />
            <ext:RecordField Name="change" Type="Float" />
            <ext:RecordField Name="pctChange" Type="Float" />
            <ext:RecordField Name="lastChange" Type="Date" DateFormat="n/j h:ia" />
        </Fields>
        </ext:ArrayReader>
        </Reader>
    </ext:Store>
    <ext:GridPanel
    ID="GridPanel1"
    runat="server"
    StoreID="Store1"
    StripeRows="true"
    TrackMouseOver="true"
    Width="600"
    Height="500" 
    AutoExpandColumn="Company">
        <ColumnModel ID="ColumnModel1" runat="server">
        <Columns>
            <ext:Column DataIndex="company" >
                <Renderer Fn="companyRenderer" />
            </ext:Column>
            <ext:Column ColumnID="Company" Header="Company" Width="160" Sortable="true" DataIndex="company">
            <Editor>
                <ext:TextField runat="server">
            </ext:TextField>
            </Editor>
            </ext:Column>
            <ext:Column Header="Price" Width="75" Sortable="true" DataIndex="price">
            <Editor>
                <ext:TextField runat="server"></ext:TextField>
            </Editor>
            </ext:Column>
            <ext:Column Header="Change" Width="75" Sortable="true" DataIndex="change">
            <Editor>
                <ext:TextField runat="server"></ext:TextField>
            </Editor>
            </ext:Column>
            <ext:Column Header="Change" Width="75" Sortable="true" DataIndex="pctChange">
            <Editor>
                <ext:TextField runat="server">
            </ext:TextField>
            </Editor>
                </ext:Column>
            <ext:Column Header="Last Updated" Width="85" Sortable="true" DataIndex="lastChange">
            <Renderer Fn="Ext.util.Format.dateRenderer('m/d/Y')" />
            <Editor>
                <ext:TextField runat="server">
            </ext:TextField>
            </Editor>
            </ext:Column>
        </Columns>
        </ColumnModel>
    </ext:GridPanel> 
</form> 
</body> 
</html>
    Last edited by Daniil; Apr 20, 2011 at 5:11 AM. Reason: [CLOSED]
  2. #2
    Apr 18, 2011, 11:07 PM
    Hi,

    Please try the following renderer
    var companyRenderer = function (value, record) {
            var tpl = "<img src='{0}' />";
            if (r.data.pctChange > 0) {
                return String.format(tpl, "GOOD.GIF");
            }
            else if (r.data.pctChange == 0) {
                return String.format(tpl, "OK.GIF");
            }
            else if (r.data.pctChange < 0) {
                return String.format(tpl, "BAD.GIF");
            }
            else {
                return "";
            }
        };
  3. #3
    Apr 19, 2011, 5:40 PM
    Can't believe I didn't think about that. How embarassing.

    One last question: is there any way to access the built-in EXT.NET icons for this column, rather than an external image?
  4. #4
    Apr 19, 2011, 6:57 PM
    Hi,

    Please look at the example.

    Example
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest && !IsPostBack)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] 
            { 
                new object[] { 0 },
                new object[] { 1 }
            };
            store.DataBind();

            this.Url0.Value = ResourceManager.GetInstance().GetIconUrl(Icon.Accept);
            this.Url1.Value = ResourceManager.GetInstance().GetIconUrl(Icon.Add);
        }
    }
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.Net Example</title>

    <script type="text/javascript">
        var myRenderer = function (value, metadata, record) {
            var tpl = "<img src='{0}' />";
            if (value == 0) {
                return String.format(tpl, Url0.getValue());
            } else if (value == 1) {
                return String.format(tpl, Url1.getValue());
            } else {
                return "";
            }
        };
    </script>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:Hidden ID="Url0" runat="server" />
    <ext:Hidden ID="Url1" runat="server" />
    <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
        <Store>
            <ext:Store runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="test" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Header="Test" DataIndex="test">
                    <Renderer Fn="myRenderer" />
                </ext:Column>
            </Columns>
        </ColumnModel>
    </ext:GridPanel>
    </form>
</body>
</html>
  5. #5
    Apr 19, 2011, 7:58 PM
    That's excellent and will help me with many future projects. Thank you very much. Please mark this as solved.

Similar Threads

  1. [CLOSED] Dynamic GridPanel - AutoSize every column?
    By vaultview in forum 1.x Legacy Premium Help
    Replies: 27
    Last Post: Mar 12, 2013, 1:37 PM
  2. [CLOSED] Image Column - Images only shown on the current selected row
    By sisa in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Dec 01, 2011, 8:20 AM
  3. [CLOSED] GridPanel: Problem with Dynamic Column
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Oct 19, 2011, 9:47 AM
  4. [CLOSED] Dynamic GridPanel: Column widths are always the same size
    By deejayns in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 22, 2011, 3:37 PM
  5. [CLOSED] Dynamic Column in GridPanel
    By speedstepmem4 in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Apr 26, 2011, 11:23 AM

Tags for this Thread

Posting Permissions