[CLOSED] ListView rendering

  1. #1

    [CLOSED] ListView rendering

    I want to change Listview rows data color according the data on the store.
    Can I do this? I cannot find a render control or something like that
    Last edited by Daniil; Mar 15, 2011 at 7:36 AM. Reason: [CLOSED]
  2. #2
    Hi,

    Generally speaking, ListView doesn't support custom styles for the rows. The best way to customize the rows is using GridPanel.

    But see how can you could achieve the requirement in the context of ListView.

    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)
            {
                Store store = this.ListView1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] {"r"},
                    new object[] {"g"},
                    new object[] {"b"},
                    new object[] {"none"}
                };
                store.DataBind();
            }
        }
    </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 getColor = function(color) {
                var s = "background-color: ";
                switch (color) {
                    case "r": s += "red;"; break;
                    case "g": s += "green;"; break;
                    case "b": s += "blue;"; break;
                    default: s += "yellow;"
                }
                return s;
            }
        </script>
    
        <style type="text/css">
            .my-listview .x-list-body dt em {
                padding: 0;
            }
        </style>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:ListView ID="ListView1" runat="server" AutoHeight="true" Cls="my-listview">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="test" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <Columns>
                <ext:ListViewColumn Header="Test" DataIndex="test">
                    <XTemplate runat="server">
                        <Html>
                            <tpl for=".">
                                <div style="{[getColor(values.test)]} height: 20px;">{test}</div>
                            </tpl>
                        </Html>
                    </XTemplate>
                </ext:ListViewColumn>
            </Columns>
        </ext:ListView>
        </form>
    </body>
    </html>

Similar Threads

  1. [CLOSED] ListView - Row ToolTips
    By ndotis in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 30, 2011, 4:37 PM
  2. Listview within Listview
    By ctallos in forum 1.x Help
    Replies: 3
    Last Post: Sep 13, 2011, 3:15 PM
  3. [CLOSED] asp listview with ext button
    By SouthDeveloper in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 06, 2011, 2:27 PM
  4. [CLOSED] Adding new row to ListView...
    By mattwoberts in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 01, 2011, 9:10 AM
  5. [CLOSED] Listview Paging
    By ogokgol in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jan 05, 2011, 4:03 PM

Tags for this Thread

Posting Permissions