[CLOSED] Render color div in gridpanel

  1. #1

    [CLOSED] Render color div in gridpanel

    The Employee class contains a property System.Drawing.Color Color to be displayed in a column.

    the column must contain a div with the specified color in the Color property.

    To do this I have two problems:

    1) the color property is complex (isComplex = true)
    2) I do not know how you can put a div inside a column
    I use template column?

    You can achieve this?
    thanks


    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            var store = this.GridPanel1.GetStore();
            
            store.DataSource = Employee.GetAll();
            store.DataBind();
        }
    
        public class Employee
        {
            public int ID { get; set; }
            public string Name { get; set; }
            public string Surname { get; set; }
            public Department Department { get; set; }
    
            public System.Drawing.Color Color { get; set; }
            
    
            public static List<Employee> GetAll()
            {
                return new List<Employee>
                {
                   new Employee
                   {
                       ID = 1,
                       Name = "Nancy",
                       Surname = "Davolio",
                       Department = Department.GetAll()[0]
                   },
                   new Employee
                   {
                       ID = 2,
                       Name = "Andrew",
                       Surname = "Fuller",
                       Department = Department.GetAll()[2]
                   }
                };
            }
        }
    
        public class Department
        {
            public int ID { get; set; }
            public string Name { get; set; }
    
            public static List<Department> GetAll()
            {
               
                return new List<Department>
                {
                    new Department { ID = 1, Name = "Department A" },
                    new Department { ID = 2, Name = "Department B" },
                    new Department { ID = 3, Name = "Department C" }
                };
            }
        }
    </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>Server Mapping - Ext.NET Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                EnableViewState="true" 
                AutoHeight="true" 
                Title="List" 
                Icon="Application">
                <Store>
                    <ext:Store runat="server">
                        <Reader>
                            <ext:JsonReader IDProperty="ID">
                                <Fields>
                                    <ext:RecordField Name="ID" Type="Int" />
                                    <ext:RecordField Name="Name" />
                                    <ext:RecordField Name="Surname" />
                                    <ext:RecordField Name="Department" ServerMapping="Department.Name" />
                                    <ext:RecordField Name="Color" IsComplex="true" />
                                </Fields>
                            </ext:JsonReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">                
                    <Columns>
                        <ext:Column Header="ID" DataIndex="ID" />
                        <ext:Column Header="NAME" DataIndex="Name" />
                        <ext:Column Header="SURNAME" DataIndex="Surname" />
                        <ext:Column DataIndex="Department" Header="Department" Width="240" />
                        
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel runat="server" />
                </SelectionModel>
                <LoadMask Msg="Loading" ShowMask="true" />
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Last edited by Daniil; Nov 29, 2010 at 5:32 PM. Reason: [CLOSED]
  2. #2
    Quote Originally Posted by 78fede78 View Post
    the column must contain a div with the specified color in the Color property.
    Hi,

    Please clarify what exactly column? Or did you mean a whole row?
  3. #3
    Hello Daniil
    The div with color property should occupy only one cell
  4. #4
    Please use the following column.

    Example
    <ext:Column Header="Color" DataIndex="Color">
        <Renderer Handler="metadata.style += 'background-color: ' + value;"/>
    </ext:Column>
    See also
    http://dev.sencha.com/deploy/dev/doc...ember=renderer

Similar Threads

  1. [CLOSED] How to set color row into GridPanel
    By tactime10 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 29, 2012, 9:54 AM
  2. Row Color on the GridPanel
    By flaviodamaia in forum 1.x Help
    Replies: 2
    Last Post: Sep 14, 2010, 1:26 PM
  3. [CLOSED] GridPanel: row and column color
    By RomualdAwessou in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Jul 28, 2010, 6:54 PM
  4. [CLOSED] Gridpanel row color change
    By Hari_CSC in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 26, 2010, 1:00 AM
  5. Replies: 0
    Last Post: Jun 11, 2009, 3:45 AM

Tags for this Thread

Posting Permissions