[CLOSED] How to highlight entire row in this grid control when value= valueXYZ?

  1. #1

    [CLOSED] How to highlight entire row in this grid control when value= valueXYZ?

    Hi,
    In this online sample code, how do you highlight the entire row in the Grid instead of just changing the value to different color?
    Thank you in advance for your help!

    https://examples2.ext.net/#/GridPanel/ArrayGrid/Simple/

    <%@ 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)
            {
                this.Store1.DataSource = this.Data;
                this.Store1.DataBind();
            }
        }
    
        private object[] Data
        {
            get
            {
                return 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" },
                   
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>Simple Array Grid - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />    
    
        <style type="text/css">
            .x-grid-row-over .x-grid-cell-inner {
                font-weight : bold;
            }
        </style>
    
        <script type="text/javascript">
            var template = '<span style="color:{0};">{1}</span>';
    
            var change = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value);
            };
    
          
        </script>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        
        <h1>Simple Array Grid</h1>
        
        <ext:GridPanel 
            ID="GridPanel1"
            runat="server" 
            Title="Array Grid" 
            Width="600" 
            Height="350">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model ID="Model1" runat="server">
                            <Fields>
                                <ext:ModelField Name="company" />
                                <ext:ModelField Name="price" Type="Float" />
                                <ext:ModelField Name="change" Type="Float" />
                                <ext:ModelField Name="pctChange" Type="Float" />
                                <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel>
                <Columns>
                    <ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Flex="1" />
                    <ext:Column ID="Column2" runat="server" Text="Price" DataIndex="price">                  
    
                    </ext:Column>
                    <ext:Column ID="Column3" runat="server" Text="Change" DataIndex="change">
                      
                    </ext:Column>
                    <ext:Column ID="Column4" runat="server" Text="Change" DataIndex="pctChange">
                    
                    </ext:Column>
                    <ext:DateColumn ID="DateColumn1" runat="server" Text="Last Updated" DataIndex="lastChange" >
                      <Renderer Fn="change" />
                    </ext:DateColumn>
                </Columns>            
            </ColumnModel>       
            <SelectionModel>
                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
            </SelectionModel>
        </ext:GridPanel>
    </body>
    </html>
    Last edited by Daniil; Sep 19, 2012 at 6:21 PM. Reason: [CLOSED]
  2. #2
    Hi,

    To stylize a cell, please use Renderer.

    To stylize a row, please use GetRowClass.

    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.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "test1" },
                    new object[] { "test2" },
                    new object[] { "test1" },
                    new object[] { "test2" }
                };
                store.DataBind();
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script type="text/javascript">
            var myRenderer = function (value, metadata) {
                if (value === "test1") {
                    metadata.style = "color: red;"
                }
    
                return value;
            };
    
            var getRowClass = function (record, index, rowParams, store) {
                if (record.get("test") === "test2") {
                    return "my-highlighted-row";
                }
            };
        </script>
    
        <style type="text/css">
            .my-highlighted-row .x-grid-cell {
                background-color: yellow !important;
            }
        </style>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
    
        <ext:GridPanel ID="GridPanel1" runat="server">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="test" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Test" DataIndex="test">
                        <Renderer Fn="myRenderer" />
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <View>
                <ext:GridView runat="server">
                    <GetRowClass Fn="getRowClass" />
                </ext:GridView>
            </View>
        </ext:GridPanel>
    </body>
    </html>
    See also
    http://docs.sencha.com/ext-js/4-1/#!...od-getRowClass
    http://docs.sencha.com/ext-js/4-1/#!...n-cfg-renderer
  3. #3
    Thank you for much. This works great for me!
    Quote Originally Posted by Daniil View Post
    Hi,

    To stylize a cell, please use Renderer.

    To stylize a row, please use GetRowClass.

    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.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "test1" },
                    new object[] { "test2" },
                    new object[] { "test1" },
                    new object[] { "test2" }
                };
                store.DataBind();
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script type="text/javascript">
            var myRenderer = function (value, metadata) {
                if (value === "test1") {
                    metadata.style = "color: red;"
                }
    
                return value;
            };
    
            var getRowClass = function (record, index, rowParams, store) {
                if (record.get("test") === "test2") {
                    return "my-highlighted-row";
                }
            };
        </script>
    
        <style type="text/css">
            .my-highlighted-row .x-grid-cell {
                background-color: yellow !important;
            }
        </style>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
    
        <ext:GridPanel ID="GridPanel1" runat="server">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="test" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Test" DataIndex="test">
                        <Renderer Fn="myRenderer" />
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <View>
                <ext:GridView runat="server">
                    <GetRowClass Fn="getRowClass" />
                </ext:GridView>
            </View>
        </ext:GridPanel>
    </body>
    </html>
    See also
    http://docs.sencha.com/ext-js/4-1/#!...od-getRowClass
    http://docs.sencha.com/ext-js/4-1/#!...n-cfg-renderer

Similar Threads

  1. [CLOSED] Read the entire contents of a grid to store
    By majunior in forum 1.x Legacy Premium Help
    Replies: 27
    Last Post: Jul 15, 2011, 6:32 PM
  2. Replies: 1
    Last Post: Jun 24, 2011, 12:18 PM
  3. change entire row color in ext grid panel
    By ankit in forum 1.x Help
    Replies: 3
    Last Post: Jun 01, 2010, 3:30 AM
  4. [CLOSED] Grouping doesn't group entire grid data...just current page.
    By rthiney in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Mar 05, 2010, 2:34 PM
  5. Replies: 0
    Last Post: Jan 28, 2010, 2:47 AM

Tags for this Thread

Posting Permissions