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

Hybrid View

Previous Post Previous Post   Next Post Next Post
  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.
    https://examples1.ext.net/#/GridPane...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>
  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

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 Legacy 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 Legacy 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