The official release of Ext.NET Mobile is now available. Ext.NET Mobile is an ASP.NET component framework for building Phone and Tablet specific mobile web applications. Read More

[CLOSED] Change font to bold on a specific row of GridPanel during a Command DirectEvent

  1. #1

    [CLOSED] Change font to bold on a specific row of GridPanel during a Command DirectEvent

    Here's what I need to happen. When the user clicks on a command column, my Command DirectEvent handler needs to unbold every other row and bold the row whose command was just clicked. Is this possible?
    Last edited by Daniil; Oct 15, 2010 at 4:48 PM. Reason: [CLOSED]
  2. #2
    Hi jmcantrell,

    I think it's possible.
    I would suggest you to use the getRowClass method of GridPanel's View.

    Here is an example how to use it.
    http://examples1.ext.net/#/GridPanel...rking_Records/

    Needs to create respective css class (-es) and returns them depending on the record's property (for example, record.bold).
    These property can be set in a Command's handler.

    I'm not sure but there may be a better solution.
  3. #3
    I saw that example. I do have some unanswered questions though.

    So let's say I have a field in my store called "marked" which is just a Boolean.

    1. From the DirectEvent, how do I get the row index so I can access it the store?
    2. How do I then modify that item in the store to set "marked" to true?
    3. How do I set all the others to false?
    4. Do I need to tell the grid to update, being that I'm altering the data in the store?
    5. Also, I've tried editing the CSS class directly using my browser's developer tools to set the font-weight to bold, but it has no effect. Other things like background color and text color do work, however. Can bold be done?
  4. #4
    Hi,

    Please look at the example.

    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", true},
                                             new object[] {"test2", false},
                                             new object[] {"test3", false}
                                    };
                store.DataBind();
            }
        }
        protected void Command(object sender, DirectEventArgs e)
        {
            Store store = this.GridPanel1.GetStore();
            int rowIndex = int.Parse(e.ExtraParams["rowIndex"]),
                count = int.Parse(e.ExtraParams["count"]);
            for (int i = 0; i < count; i++)
            {
                store.UpdateRecordField(i, "bold", false);    
            }
            store.UpdateRecordField(rowIndex, "bold", true);
            store.CommitChanges();
        }
    </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 getRowClass = function (record) {
                    if (record.get("bold")) {
                        return "myBoldClass";
                    }
                }
        </script>
    
        <style type="text/css">
            .myBoldClass.x-grid3-row td {
                font-weight: bolder;
                font-size: large;
            }
        </style>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="test1" />
                                <ext:RecordField Name="bold" Type="Boolean"/>
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test1" DataIndex="test1" />
                    <ext:Column Header="Bold" DataIndex="bold" />
                    <ext:CommandColumn>
                        <Commands>
                            <ext:GridCommand CommandName="command1" Icon="Accept" />
                        </Commands>
                    </ext:CommandColumn>
                </Columns>
            </ColumnModel>
            <View>
                <ext:GridView runat="server">
                    <GetRowClass Fn="getRowClass" />
                </ext:GridView>
            </View>
            <DirectEvents>
                <Command OnEvent="Command">
                    <ExtraParams>
                        <ext:Parameter Name="rowIndex" Value="rowIndex" Mode="Raw"/>
                        <ext:Parameter 
                            Name="count" 
                            Value="#{GridPanel1}.getStore().getCount()" 
                            Mode="Raw"/>
                    </ExtraParams>
                </Command>
            </DirectEvents>
        </ext:GridPanel>
        </form>
    </body>
    </html>
  5. #5
    Hi,

    Please see the following sample
    <%@ 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},
                    new object[] { "Alcoa Inc", 29.01},
                    new object[] { "Altria Group Inc", 83.81},
                    new object[] { "American Express Company", 52.55},
                    new object[] { "American International Group, Inc.", 64.13}
                };
            }
        }
    
        protected void ClickCommand(object sender, DirectEventArgs e)
        {
            if (e.ExtraParams["cmd"] == "Bold")
            {
                GridPanel1.View[0].Set("boldId", e.ExtraParams["recordId"]);
                GridPanel1.RefreshView();
            }
        }
    </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>
        
        <style type="text/css">
            .bold-row .x-grid3-cell-inner{
                font-weight:bold;
            }
        </style>   
        
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        
        <ext:GridPanel 
            ID="GridPanel1"
            runat="server" 
            StripeRows="true"
            Title="Array Grid" 
            TrackMouseOver="true"
            Width="600" 
            Height="350"
            AutoExpandColumn="company">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="company" />
                                <ext:RecordField Name="price" Type="Float" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
                    <ext:Column Header="Price" DataIndex="price">                  
                        <Renderer Format="UsMoney" />
                    </ext:Column>
                    <ext:CommandColumn>
                        <Commands>
                            <ext:GridCommand Icon="TextBold" CommandName="Bold" />
                        </Commands>
                    </ext:CommandColumn>
                </Columns>
            </ColumnModel>
            <View>
                <ext:GridView runat="server">
                    <GetRowClass Handler="return record.id == this.boldId ? 'bold-row' : '';" />
                </ext:GridView>
            </View>
            <DirectEvents>
                <Command OnEvent="ClickCommand">
                    <ExtraParams>
                        <ext:Parameter Name="cmd" Value="command" Mode="Raw" />
                        <ext:Parameter Name="recordId" Value="record.id" Mode="Raw" />
                    </ExtraParams>
                </Command>
            </DirectEvents>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" SingleSelect="true" />
            </SelectionModel>
        </ext:GridPanel>
    </body>
    </html>
    Vladimir Shcheglov
    Sr. Developer
  6. #6
    Fantastic! This worked like a charm.

    Thanks again, guys. :)
  7. #7
    I tried Vladimir's code using v3.
    it works fine except for the style
    <style type="text/css">
            .bold-row {
                font-weight: bold;
            }
     </style>
    I don't have "grid3" style, but just grid.

    Thanks
  8. #8
    Hello @bbros!

    I believe you posted just what's left to fix in recent Ext.NET versions, right?.. If you're in actual trouble with this using Ext.NET v3, don't hesitate on posting (if so please post a new thread in v3 forums as this one is quite old and focused on version 1).
    Fabrício Murta
    Developer & Support Expert
  9. #9
    Hello Fabricio.
    Everything is alright. I posted only for people like me which copies old solutions to new projects and starts debugging :)
    thanks.

Similar Threads

  1. Replies: 7
    Last Post: Sep 02, 2016, 7:47 PM
  2. Replies: 4
    Last Post: Jul 25, 2013, 8:51 AM
  3. [CLOSED] Change the Font style to Bold for a Row in Grid View
    By speedstepmem3 in forum 1.x Premium Help
    Replies: 1
    Last Post: Nov 10, 2011, 11:50 AM
  4. [CLOSED] Server Side Menu Item in bold font
    By nirajrdave in forum 1.x Premium Help
    Replies: 4
    Last Post: Mar 25, 2011, 11:54 AM
  5. Replies: 5
    Last Post: Nov 26, 2010, 5:39 PM

Tags for this Thread

Posting Permissions