What's New?

[CLOSED] GridPanel: row color after Ajax.request

  1. #1
    Jul 28, 2010, 8:06 PM

    [CLOSED] GridPanel: row color after Ajax.request

    Hello,

    I would want to do the following:

    I have a GridPanel with for example 7 rows. When I click a buton to save the changes made to the gridPanel an Ajax request is made to the server which return some values. On success I would want to color depending on some condition checked upon the received values some rows for example the row 3 and 5.

    All this is done in Javascript.

    Any idea?

    Romuald.
    Last edited by geoffrey.mcgill; Aug 02, 2010 at 8:25 PM.
  2. #2
    Jul 29, 2010, 1:44 PM
    No idea?

    Any suggestion?

    Romuald.
  3. #3
    Jul 29, 2010, 3:10 PM
    Hello!

    Please look at this solution.

    <script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store store = this.GridPanel1.Store.Primary;

            object[] data = 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},
                new object[] { "Altria Group Inc", 83.81},
                new object[] { "American Express Company", 52.55},
            };

            store.DataSource = data;
            store.DataBind();
        }
    }

    [DirectMethod]
    public bool Save()
    {
        return true;
    }
</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 id="Head1" runat="server">
    <title>Ext.NET Example</title>

    <script type="text/javascript">
        var colorRows = function() {
            Ext.select('.x-grid3-row').elements[2].style.backgroundColor = "red";
            Ext.select('.x-grid3-row').elements[4].style.backgroundColor = "red";
        }
    </script>

</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:GridPanel ID="GridPanel1" runat="server" Width="600" Height="350">
        <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 ID="ColumnModel1" runat="server">
            <Columns>
                <ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
                <ext:Column Header="Price" DataIndex="price" />
            </Columns>
        </ColumnModel>
        <SelectionModel>
            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
        </SelectionModel>
        <TopBar>
            <ext:Toolbar ID="Toolbar1" runat="server">
                <Items>
                    <ext:Button ID="Button1" runat="server" Text="Save" Icon="Accept">
                        <Listeners>
                            <Click Handler="
                                        Ext.net.DirectMethods.Save({
                                            success: function (result) {
                                                if (result)
                                                    colorRows();
                                            }
                                        });" />
                        </Listeners>
                    </ext:Button>
                </Items>
            </ext:Toolbar>
        </TopBar>
    </ext:GridPanel>
</body>
</html>
  4. #4
    Jul 29, 2010, 4:28 PM
    Here is another example based on using GetRowClass. This solution is better than previous one.

    <script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store store = this.GridPanel1.Store.Primary;

            object[] data = 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},
                new object[] { "Altria Group Inc", 83.81},
                new object[] { "American Express Company", 52.55},
            };

            store.DataSource = data;
            store.DataBind();
        }
    }

    [DirectMethod]
    public bool Save()
    {
        return true;
    }
</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 id="Head1" runat="server">
    <title>Ext.NET Example</title>
    <style type="text/css">
        .x-grid3-row-red
        {
            background-color: red;
        }
    </style>

    <script type="text/javascript">
        var getRowClass = function(record, rowIndex, rp, ds) {
            if (Object.prototype.toString.apply(coloredRows.value) === '[object Array]') {
                if (coloredRows.value[rowIndex]) {
                    return 'x-grid3-row-red';
                }
            }
            return 'x-grid3-row-collapsed';
        }

        var colorRows = function(grid) {
            coloredRows.value = [];
            coloredRows.value[2] = true;
            coloredRows.value[4] = true;

            grid.view.refreshRow(2);
            grid.view.refreshRow(4);
        }

        var removeColor = function(grid) {
            if (coloredRows.value) {
                delete coloredRows.value[2];
                delete coloredRows.value[4];
                grid.view.refreshRow(2);
                grid.view.refreshRow(4);
            }
        }
    </script>

</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" />
    <ext:GridPanel ID="GridPanel1" runat="server" Width="600" Height="350">
        <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 ID="ColumnModel1" runat="server">
            <Columns>
                <ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
                <ext:Column Header="Price" DataIndex="price" />
            </Columns>
        </ColumnModel>
        <SelectionModel>
            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
        </SelectionModel>
        <TopBar>
            <ext:Toolbar ID="Toolbar1" runat="server">
                <Items>
                    <ext:Button ID="Button1" runat="server" Text="Save" Icon="Accept">
                        <Listeners>
                            <Click Handler="
                                        Ext.net.DirectMethods.Save({
                                            success: function (result) {
                                                if (result)
                                                    colorRows(#{GridPanel1});
                                            }
                                        });" />
                        </Listeners>
                    </ext:Button>
                    
                    <ext:Button ID="Button2" runat="server" Text="Remove color" Icon="Accept">
                        <Listeners>
                            <Click Handler="removeColor(#{GridPanel1});" />
                        </Listeners>
                    </ext:Button>
                </Items>
            </ext:Toolbar>
        </TopBar>
        <View>
            <ext:GridView runat="server">
                <GetRowClass Fn="getRowClass" />
            </ext:GridView>
        </View>
    </ext:GridPanel>
    <ext:Hidden ID="coloredRows" runat="server">
    </ext:Hidden>
</body>
</html>

Similar Threads

  1. Operation Requires an Ajax Request
    By dan182 in forum 1.x Help
    Replies: 1
    Last Post: Feb 23, 2011, 12:58 PM
  2. Non JSON ajax request
    By craig2005 in forum 1.x Help
    Replies: 0
    Last Post: Dec 31, 2010, 6:08 PM
  3. [CLOSED] Mask + durection of ajax request
    By CSG in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Aug 05, 2009, 7:59 AM
  4. Page_ Ajax Load Complete BUG on Ajax Request
    By jeybonnet in forum 1.x Help
    Replies: 8
    Last Post: Jun 22, 2009, 11:19 AM
  5. [CLOSED] GridPanel.HideHeaders problem during ajax request
    By tansu in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: May 13, 2009, 4:56 AM

Posting Permissions