GridPanel Cell background color - nice css trick

  1. #1

    GridPanel Cell background color - nice css trick

    Hi:

    I wanted to assign the cells in a column a different background color, and even more, use a distinct background color for the cells in the column on the alternate rows. The catch is that I wanted the normal row selection background and the hover background colors to work as they do for the "normal" cells. I modified the Areas/Grid_Pane_DataPresentation/Views/Data_Prepare/index.cshtml and the key was to use the :not css selector. The sample works in FF (32.0.3), Chrome (37.0.2062.124 m) and IE11.

    @model System.Collections.IEnumerable
    
    @{
        ViewBag.Title = "Data Prepare - Ext.NET MVC Examples";
        Layout = "~/Views/Shared/_BaseLayout.cshtml";
    }
    
    @section headtag
    {
      <script>
        var prepareCity = function (value, record) {
          return record.get('Address').City;
        };
    
        var prepareStreet = function (value, record) {
          return record.get('Address').StreetAddress;
        };
      </script>
      <style type="text/css">
        .yellow {
          background-color: lemonchiffon;
        }
    
        .x-grid-row-alt:not(.x-grid-row-selected):not(.x-grid-row-over) .yellow {
          background-color: yellow;
        }
      </style>
    }
    
    @section example
    {    
        @(Html.X().GridPanel()
            .Title("Customers")
            .Width(630)
            .Height(300)
            .Store(Html.X().Store()
                .Model(Html.X().Model()
                    .Fields(
                        new ModelField("ID", ModelFieldType.Int),
                        new ModelField("FirstName"),
                        new ModelField("LastName"),
                        new ModelField("Company"),
                        new ModelField()
                        {
                            Name = "Address",
                            Type = ModelFieldType.Object
                        },
                        new ModelField()
                        {
                            Name = "City",
                            Convert =
                            {
                                Fn = "prepareCity"    
                            }
                        },
                        new ModelField()
                        {
                            Name = "Street",
                            Convert =
                            {
                                Fn = "prepareStreet"
                            }
                        }
                    )
                )
                .DataSource(Model)
            )
            .ColumnModel(
                Html.X().Column().Text("ID").DataIndex("ID"),
                Html.X().Column().Text("FirstName").DataIndex("FirstName").TdCls("yellow"),
                Html.X().Column().Text("LastName").DataIndex("LastName"),
                Html.X().Column().Text("Company").DataIndex("Company"),
                Html.X().Column().Text("City").DataIndex("City"),
                Html.X().Column().Text("Street").DataIndex("Street")
            )
        )
    }
  2. #2
    Hi @bogc,

    A nice demonstration of using ":not". Thank you for sharing!

    Moving to the Examples and Extras forum.

Similar Threads

  1. Change GridPanel Cell background color
    By mis@adphk.com in forum 2.x Help
    Replies: 1
    Last Post: Mar 19, 2013, 1:43 AM
  2. [CLOSED] Gridpanel cell background color
    By mis@adphk.com in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Mar 13, 2013, 2:00 AM
  3. Replies: 3
    Last Post: Feb 14, 2013, 10:35 AM
  4. Replies: 1
    Last Post: Jul 10, 2012, 11:16 AM
  5. Replies: 2
    Last Post: Mar 02, 2012, 1:07 PM

Tags for this Thread

Posting Permissions