[CLOSED] [#652] StripeRows not working on Crispy and Crisp and CrispTouch themes

  1. #1

    [CLOSED] [#652] StripeRows not working on Crispy and Crisp and CrispTouch themes

    On Gray, Neptune and NeptuneTouch themes, StripeRows is enabled by default.


    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
    </head>
    <body>
        <ext:ResourceManager runat="server" Theme="Gray" ScriptMode="Debug" />
        <ext:GridPanel runat="server" Title="Ext.Net" Width="300" Height="400">
            <Store>
                <ext:Store AutoLoad="true" ID="_str" runat="server">
                    <Proxy>
                        <ext:AjaxProxy Url="~/Example/LoadFakeRecords/">
                            <ActionMethods Read="POST" />
                            <Reader>
                                <ext:JsonReader RootProperty="data" />
                            </Reader>
                        </ext:AjaxProxy>
                    </Proxy>
                    <Model>
                        <ext:Model IDProperty="ID" runat="server">
                            <Fields>
                                <ext:ModelField Name="ID" Type="String" />
                                <ext:ModelField Name="Name" Type="String" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Text="ID" DataIndex="ID" runat="server" />
                    <ext:Column Text="Name" Flex="1" DataIndex="Name" runat="server" />
                </Columns>
            </ColumnModel>
            <View>
                <ext:GridView StripeRows="true" />
            </View>
        </ext:GridPanel>
    </body>
    </html>
    namespace SandBox.Controllers
    {
        public class ExampleController : System.Web.Mvc.Controller
        {
            public ActionResult Index()
            {
                return View();
            }
    
            public StoreResult LoadFakeRecords()
            {
                List<Entity> lstEntities = new List<Entity>();
    
                for (int index = 0; index < 15; index++)
                {
                    lstEntities.Add(new Entity
                    {
                        ID = index,
                        Name = string.Format("Name - {0}", index)
                    });
                }
    
                return new StoreResult(lstEntities, lstEntities.Count());
            }
        }
    
        [Serializable]
        public class Entity
        {
            public int ID { get; set; }
    
            public string Name { get; set; }
        }
    }
    On themes metioned above, it's possible to override the alternate-row css rule, as shown below:

    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <style type="text/css">
            .x-grid-item-alt {
                color: white !important;
                background-color: #0066cc !important;
            }
        </style>
    </head>
    <body>
        <ext:ResourceManager runat="server" Theme="Gray" ScriptMode="Debug" />
        <ext:GridPanel runat="server" Border="true" Title="Ext.Net" Width="300" Height="400">
            <Store>
                <ext:Store AutoLoad="true" ID="_str" runat="server">
                    <Proxy>
                        <ext:AjaxProxy Url="~/Example/LoadFakeRecords/">
                            <ActionMethods Read="POST" />
                            <Reader>
                                <ext:JsonReader RootProperty="data" />
                            </Reader>
                        </ext:AjaxProxy>
                    </Proxy>
                    <Model>
                        <ext:Model IDProperty="ID" runat="server">
                            <Fields>
                                <ext:ModelField Name="ID" Type="String" />
                                <ext:ModelField Name="Name" Type="String" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Text="ID" DataIndex="ID" runat="server" />
                    <ext:Column Text="Name" Flex="1" DataIndex="Name" runat="server" />
                </Columns>
            </ColumnModel>
            <View>
                <ext:GridView StripeRows="true" />
            </View>
        </ext:GridPanel>
    </body>
    </html>
    But, on both Crisp and CrispTouch themes, StripeRows doesn't work as expected.

    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <style type="text/css">
            .x-grid-item-alt {
                color: white !important;
                background-color: #0066cc !important;
            }
        </style>
    </head>
    <body>
        <ext:ResourceManager runat="server" Theme="Crisp" ScriptMode="Debug" />
        <ext:GridPanel runat="server" Border="true" Title="Ext.Net" Width="300" Height="400">
            <Store>
                <ext:Store AutoLoad="true" ID="_str" runat="server">
                    <Proxy>
                        <ext:AjaxProxy Url="~/Example/LoadFakeRecords/">
                            <ActionMethods Read="POST" />
                            <Reader>
                                <ext:JsonReader RootProperty="data" />
                            </Reader>
                        </ext:AjaxProxy>
                    </Proxy>
                    <Model>
                        <ext:Model IDProperty="ID" runat="server">
                            <Fields>
                                <ext:ModelField Name="ID" Type="String" />
                                <ext:ModelField Name="Name" Type="String" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Text="ID" DataIndex="ID" runat="server" />
                    <ext:Column Text="Name" Flex="1" DataIndex="Name" runat="server" />
                </Columns>
            </ColumnModel>
            <View>
                <ext:GridView StripeRows="true" />
            </View>
        </ext:GridPanel>
    </body>
    </html>
    Attached Thumbnails Click image for larger version. 

Name:	sr001.png 
Views:	18 
Size:	10.5 KB 
ID:	19101   Click image for larger version. 

Name:	sr002.png 
Views:	18 
Size:	10.8 KB 
ID:	19111   Click image for larger version. 

Name:	sr003.png 
Views:	19 
Size:	7.3 KB 
ID:	19121  
    Last edited by Daniil; Jan 23, 2015 at 12:00 PM. Reason: [CLOSED] [#652]
  2. #2
    Going further, Sencha states that it's possible to override default rules by using x-grid-row-alt: http://docs.sencha.com/extjs/5.0/5.0...cfg-stripeRows. I would like to inform that to override default rules, it's necessary to use x-grid-item-alt instead.

    To whom it may concern: The following thread is not effective on version 3.1; http://forums.ext.net/showthread.php...ng-in-Gridview
    Last edited by RCN; Jan 20, 2015 at 11:54 AM.
  3. #3
    Hi Raphael,

    Thank you for the report! Created an Issue.
    https://github.com/extnet/Ext.NET/issues/652

    Crisp themes change the default value of StripeRows to false.

    The problem is that StripeRows="true" is not rendered to client, because it is treated as a default value.

    Fixed in the revision #6277 (trunk). It goes to v3.1.0 beta.

    Added this breaking change:
    7. [EXTNET] The type of a GridView's StripeRows property has been changed
    to bool? from bool. It should be always rendered to client, because Crisp
    themes change the default value to true.
  4. #4
    Thank you Daniil. I am gonna review.
    Last edited by RCN; Jan 23, 2015 at 12:35 PM.
  5. #5
    I reviewed and everything seems to be ok.

    Once again, thank you Daniil.

Similar Threads

  1. [CLOSED] ExtJS 5.0 Beta and the Crisp Theme
    By leonardm in forum 2.x Legacy Premium Help
    Replies: 24
    Last Post: Dec 18, 2014, 10:06 AM
  2. [CLOSED] GridPanel RowWrap and StripeRows
    By snow_cap in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 01, 2014, 10:27 AM
  3. [CLOSED] Striperows not working in Gridview
    By CarpFisher in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: May 09, 2012, 9:04 AM
  4. GridPanel StripeRows insert/delete bug
    By Neil_Walters in forum 1.x Help
    Replies: 2
    Last Post: Feb 17, 2010, 12:15 PM
  5. StripeRows color
    By fabiomarcos in forum 1.x Help
    Replies: 2
    Last Post: Mar 02, 2009, 3:36 PM

Posting Permissions