[CLOSED] RowSelectionModel RowSelect Handler problem

**vadym.f** · Jun 21, 2012, 7:31 PM

Hi,

My RowSelect Handler invokes a DirectMethod, which repopulates the Store of a details form combobox bound to GridPanel. The details form controls need to be rebound AFTER the data retrieval is completed:

                <SelectionModel>
                    <ext:RowSelectionModel runat="server" SingleSelect="true">
                        <Listeners>
                             <RowSelect Handler="X.RetrieveData(record.data['fld1'], record.data['fld2'], {eventMask: {showMask: true} });
                                                #{FormPanel1}.getForm().loadRecord(record);
                                                #{FormPanel1}.record=record;" />
                            <SelectionChange Handler="#{HiddenSelectedRow}.setValue(Ext.encode(#{GridPanel1}.getRowsValues({selectedOnly: true})));" />
                        </Listeners>

        [DirectMethod]
        public void RetrieveData(string fld1, string fld2)
        {
            DataTable dt = GetDataTable(fld1, fld2);
            this.StoreComboBox1.DataSource = dt;
            this.StoreComboBox1.DataBind();
        }

I'm getting inconsistent results since I believe the Ajax call is not guaranteed to complete before the rest of Handler client code is executed. So, the details form is bound with some garbage data as a result. At least, that's my guess.

Is there any way to ensure that the data retrieval on the server is actually finished and only then proceed with details form data binding? I realize this mechanism is available via DirectEvents but for some reason if I put it into RowSelect DirectEvent for RowSelectionModel and comment out the Listener, it's not executed at all. Please advise or suggest a better approach.

Thanks,

Vadym

**Daniil** · Jun 21, 2012, 8:00 PM

Hi,

If you need to execute some JavaScript code after DirectEvent/DirectMethod, you should use its success/failure handlers.

**vadym.f** · Jun 21, 2012, 8:05 PM

Originally Posted by Daniil

Hi,

If you need to execute some JavaScript code after DirectEvent/DirectMethod, you should use its success/failure handlers.

Thanks Daniil! It seems that I found the problem in my code. I didn't have a valid OnEvent attribute in the DirectEvent setup hence the issue. While we're at it, the RowSelect DirectEvent server code is executed 5 (!) times when the page is initially loaded. What may be the reasons and is there any way to prevent such behavior?

Thanks,

Vadym

**Daniil** · Jun 21, 2012, 9:14 PM

Are there initially selected rows?

Could you provide a sample?

**vadym.f** · Jun 22, 2012, 1:29 AM

Here's a simplified example. Note that the PagingToolbar Change handler code executes four times on page load triggering multiple execution of the DirectEvent code. My objective is to have the first row selected in the grid view after the page is loaded or a store page is changed.

<%@ 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, 0.02, 0.03, "9/1 12:00am" },
                new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
                new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
                new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
                new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
                new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
                new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
                new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
                new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
                new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
                new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
                new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
                new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
                new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
                new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
                new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
                new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
                new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
                new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
                new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
                new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
            };
        }
    }

    protected void GridPanel1_RowSelect(object sender, DirectEventArgs e)
    {
        string company = e.ExtraParams["company"].ToString();
        decimal price = Convert.ToDecimal(e.ExtraParams["price"]);
    }
</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>Simple Array Grid - Ext.NET Examples</title>
    <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        var template = '<span style="color:{0};">{1}</span>';

        var change = function (value) {
            return String.format(template, (value > 0) ? "green" : "red", value);
        };

        var pctChange = function (value) {
            return String.format(template, (value > 0) ? "green" : "red", value + "%");
        };
    </script>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <h1>
        Simple Array Grid</h1>
    <ext:GridPanel ID="GridPanel1" runat="server" StripeRows="true" Title="Array Grid"
        ActiveIndex="0" 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" />
                            <ext:RecordField Name="change" Type="Float" />
                            <ext:RecordField Name="pctChange" Type="Float" />
                            <ext:RecordField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                        </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">
                    <Renderer Format="UsMoney" />
                </ext:Column>
                <ext:Column ColumnID="Change" Header="Change" DataIndex="change">
                    <Renderer Fn="change" />
                </ext:Column>
                <ext:Column Header="Change" DataIndex="pctChange">
                    <Renderer Fn="pctChange" />
                </ext:Column>
                <ext:DateColumn Header="Last Updated" DataIndex="lastChange" />
            </Columns>
        </ColumnModel>
        <SelectionModel>
            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true">
                <DirectEvents>
                    <RowSelect OnEvent="GridPanel1_RowSelect" Success="">
                        <ExtraParams>
                            <ext:Parameter Name="company" Value="record.data['company']" Mode="Raw">
                            </ext:Parameter>
                            <ext:Parameter Name="price" Value="record.data['price']" Mode="Raw">
                            </ext:Parameter>
                        </ExtraParams>
                        <EventMask ShowMask="true" />
                    </RowSelect>
                </DirectEvents>
            </ext:RowSelectionModel>
        </SelectionModel>
        <BottomBar>
            <ext:PagingToolbar runat="server" StoreID="Store1" PageSize="10" ID="PagingToolbar1">
                <Listeners>
                    <Change Handler="if(#{Store1}.getCount()>0){
                                        var sm=#{GridPanel1}.getSelectionModel().selectRow(0);
                                     }" />
                </Listeners>
            </ext:PagingToolbar>
        </BottomBar>
    </ext:GridPanel>
</body>
</html>

**Daniil** · Jun 22, 2012, 9:16 AM

Confirm, the PagingToolbar Change event fires too many times.

I would suggest the following.

1. Use the Store Load event instead.

<Load Handler="if (records.length > 0) {
                   GridPanel1.getSelectionModel().selectRow(0);
               }" />

2. Set up

AutoLoad="false"

for the Store.

3. Set up

<Listeners>
    <ViewReady Handler="this.getStore().load();" />
</Listeners>

for the GridPanel.

The #2 and #3 to avoid double Store Load firing on initial page load.

**vadym.f** · Jun 22, 2012, 2:12 PM

Thanks much Daniil, that works great!!
Could you also suggest an approach how to preserve the current selection when the paging bar "Refresh" button is pressed?

Thanks,

Vadym

<%@ 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, 0.02, 0.03, "9/1 12:00am" },
                new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
                new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
                new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
                new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
                new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
                new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
                new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
                new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
                new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
                new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
                new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
                new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
                new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
                new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
                new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
                new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
                new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
                new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
                new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
                new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
            };
        }
    }

    protected void GridPanel1_RowSelect(object sender, DirectEventArgs e)
    {
        string company = e.ExtraParams["company"].ToString();
        decimal price = Convert.ToDecimal(e.ExtraParams["price"]);
    }

    protected void Store1_DataBound(object sender, EventArgs e)
    {
        Store store = sender as Store;
        object[] data = store.DataSource as object[];

        if (data == null)
        {
            this.Store1.DataSource = this.Data;
            this.Store1.DataBind();
        }
    }
</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>Simple Array Grid - Ext.NET Examples</title>
    <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        var template = '<span style="color:{0};">{1}</span>';

        var change = function (value) {
            return String.format(template, (value > 0) ? "green" : "red", value);
        };

        var pctChange = function (value) {
            return String.format(template, (value > 0) ? "green" : "red", value + "%");
        };
    </script>
</head>
<body>
<%--http://forums.ext.net/showthread.php?19692-RowSelectionModel-RowSelect-Handler-problem--%>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <h1>
        Simple Array Grid</h1>
    <ext:GridPanel ID="GridPanel1" runat="server" StripeRows="true" Title="Array Grid"
        ActiveIndex="0" TrackMouseOver="true" Width="600" Height="350" AutoExpandColumn="company">
        <Store>
            <ext:Store ID="Store1" runat="server" AutoLoad="false" OnDataBinding="Store1_DataBound">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="company" />
                            <ext:RecordField Name="price" Type="Float" />
                            <ext:RecordField Name="change" Type="Float" />
                            <ext:RecordField Name="pctChange" Type="Float" />
                            <ext:RecordField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
                <Listeners>
                    <Load Handler="if (records.length > 0) {
                                    GridPanel1.getSelectionModel().selectRow(0);
                                   }" />
                </Listeners>
            </ext:Store>
        </Store>
        <ColumnModel ID="ColumnModel1" runat="server">
            <Columns>
                <ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
                <ext:Column Header="Price" DataIndex="price">
                    <Renderer Format="UsMoney" />
                </ext:Column>
                <ext:Column ColumnID="Change" Header="Change" DataIndex="change">
                    <Renderer Fn="change" />
                </ext:Column>
                <ext:Column Header="Change" DataIndex="pctChange">
                    <Renderer Fn="pctChange" />
                </ext:Column>
                <ext:DateColumn Header="Last Updated" DataIndex="lastChange" />
            </Columns>
        </ColumnModel>
        <SelectionModel>
            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true">
                <DirectEvents>
                    <RowSelect OnEvent="GridPanel1_RowSelect" Success="">
                        <ExtraParams>
                            <ext:Parameter Name="company" Value="record.data['company']" Mode="Raw">
                            </ext:Parameter>
                            <ext:Parameter Name="price" Value="record.data['price']" Mode="Raw">
                            </ext:Parameter>
                        </ExtraParams>
                        <EventMask ShowMask="true" />
                    </RowSelect>
                </DirectEvents>
            </ext:RowSelectionModel>
        </SelectionModel>
        <BottomBar>
            <ext:PagingToolbar runat="server" StoreID="Store1" PageSize="10" ID="PagingToolbar1">
            </ext:PagingToolbar>
        </BottomBar>
        <Listeners>
            <ViewReady Handler="this.getStore().load();" />
            <SortChange Handler="if(this.getStore().getCount()>0){
                                    var sm=GridPanel1.getSelectionModel().selectRow(0);
                                 }" />
        </Listeners>
    </ext:GridPanel>
</body>
</html>

**Daniil** · Jun 22, 2012, 3:13 PM

There is the built-in mechanism to preserve selection after reloading.

To force it to be used you should set up IDIndex for the ArrayReader.
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.data.ArrayReader-cfg-idIndex

or IDProperty for JsonReader.
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.data.JsonReader

For example,

IDIndex="0"

in your case. In that case the companies name must be unique.

Then change the Load listener to this one:

<Load Handler="if (records.length > 0) {
                   var sm = GridPanel1.getSelectionModel();
                   if (!sm.hasSelection()) {
                       sm.selectRow(0);
                   }
               }" />

**vadym.f** · Jun 22, 2012, 3:31 PM

Originally Posted by Daniil

There is the built-in mechanism to preserve selection after reloading.

To force it to be used you should set up IDIndex for the ArrayReader.
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.data.ArrayReader-cfg-idIndex

or IDProperty for JsonReader.
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.data.JsonReader

For example,

IDIndex="0"

in your case. In that case the companies name must be unique.

Then change the Load listener to this one:

<Load Handler="if (records.length > 0) {
                   var sm = GridPanel1.getSelectionModel();
                   if (!sm.hasSelection()) {
                       sm.selectRow(0);
                   }
               }" />

Hi Daniil,

I'm probably missing something because it doesn't work:

<%@ 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[] { Guid.NewGuid(), "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                new object[] { Guid.NewGuid(),"Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                new object[] { Guid.NewGuid(),"Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                new object[] { Guid.NewGuid(),"American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                new object[] { Guid.NewGuid(),"American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                new object[] { Guid.NewGuid(),"AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                new object[] { Guid.NewGuid(),"Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                new object[] { Guid.NewGuid(),"Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                new object[] { Guid.NewGuid(),"Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                new object[] { Guid.NewGuid(),"E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
                new object[] { Guid.NewGuid(),"Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
                new object[] { Guid.NewGuid(),"General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
                new object[] { Guid.NewGuid(),"General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
                new object[] { Guid.NewGuid(),"Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
                new object[] { Guid.NewGuid(),"Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
                new object[] { Guid.NewGuid(),"Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
                new object[] { Guid.NewGuid(),"International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
                new object[] { Guid.NewGuid(),"Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
                new object[] { Guid.NewGuid(),"JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
                new object[] { Guid.NewGuid(),"McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
                new object[] { Guid.NewGuid(),"Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
                new object[] { Guid.NewGuid(),"Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
                new object[] { Guid.NewGuid(),"Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
                new object[] { Guid.NewGuid(),"The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
                new object[] { Guid.NewGuid(),"The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
                new object[] { Guid.NewGuid(),"The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
                new object[] { Guid.NewGuid(),"United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
                new object[] { Guid.NewGuid(),"Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
                new object[] { Guid.NewGuid(),"Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
            };
        }
    }

    protected void GridPanel1_RowSelect(object sender, DirectEventArgs e)
    {
        string company = e.ExtraParams["company"].ToString();
        decimal price = Convert.ToDecimal(e.ExtraParams["price"]);
    }

    protected void Store1_DataBound(object sender, EventArgs e)
    {
        Store store = sender as Store;
        object[] data = store.DataSource as object[];

        if (data == null)
        {
            this.Store1.DataSource = this.Data;
            this.Store1.DataBind();
        }
    }
</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>Simple Array Grid - Ext.NET Examples</title>
    <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        var template = '<span style="color:{0};">{1}</span>';

        var change = function (value) {
            return String.format(template, (value > 0) ? "green" : "red", value);
        };

        var pctChange = function (value) {
            return String.format(template, (value > 0) ? "green" : "red", value + "%");
        };
    </script>
</head>
<body>
    <%--http://forums.ext.net/showthread.php?19692-RowSelectionModel-RowSelect-Handler-problem--%>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <h1>
        Simple Array Grid</h1>
    <ext:GridPanel ID="GridPanel1" runat="server" StripeRows="true" Title="Array Grid"
        ActiveIndex="0" TrackMouseOver="true" Width="600" Height="350" AutoExpandColumn="company">
        <Store>
            <ext:Store ID="Store1" runat="server" AutoLoad="false" OnDataBinding="Store1_DataBound">
                <Reader>
                    <ext:ArrayReader IDIndex="0">
                        <Fields>
                            <ext:RecordField Name="rowid" />
                            <ext:RecordField Name="company" />
                            <ext:RecordField Name="price" Type="Float" />
                            <ext:RecordField Name="change" Type="Float" />
                            <ext:RecordField Name="pctChange" Type="Float" />
                            <ext:RecordField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
                <Listeners>
                    <Load Handler="if (records.length > 0) {
                                        //GridPanel1.getSelectionModel().selectRow(0);
                                        var sm = GridPanel1.getSelectionModel();
                                        if (!sm.hasSelection()) {
                                            sm.selectRow(0);
                                        }
                                   }" />
                </Listeners>
            </ext:Store>
        </Store>
        <ColumnModel ID="ColumnModel1" runat="server">
            <Columns>
                <ext:Column ColumnID="RowId" Header="" DataIndex="rowid" Hidden="true" />
                <ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
                <ext:Column Header="Price" DataIndex="price">
                    <Renderer Format="UsMoney" />
                </ext:Column>
                <ext:Column ColumnID="Change" Header="Change" DataIndex="change">
                    <Renderer Fn="change" />
                </ext:Column>
                <ext:Column Header="Change" DataIndex="pctChange">
                    <Renderer Fn="pctChange" />
                </ext:Column>
                <ext:DateColumn Header="Last Updated" DataIndex="lastChange" />
            </Columns>
        </ColumnModel>
        <SelectionModel>
            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true">
                <DirectEvents>
                    <RowSelect OnEvent="GridPanel1_RowSelect" Success="">
                        <ExtraParams>
                            <ext:Parameter Name="company" Value="record.data['company']" Mode="Raw">
                            </ext:Parameter>
                            <ext:Parameter Name="price" Value="record.data['price']" Mode="Raw">
                            </ext:Parameter>
                        </ExtraParams>
                        <EventMask ShowMask="true" />
                    </RowSelect>
                </DirectEvents>
            </ext:RowSelectionModel>
        </SelectionModel>
        <BottomBar>
            <ext:PagingToolbar runat="server" StoreID="Store1" PageSize="10" ID="PagingToolbar1">
            </ext:PagingToolbar>
        </BottomBar>
        <Listeners>
            <ViewReady Handler="this.getStore().load();" />
            <SortChange Handler="if(this.getStore().getCount()>0){
                                    var sm=GridPanel1.getSelectionModel().selectRow(0);
                                 }" />
        </Listeners>
    </ext:GridPanel>
</body>
</html>

**Daniil** · Jun 22, 2012, 3:51 PM

Please set up

SelectionMemory="Enabled"

for the GridPanel.

It's Disabled by default if there is

SingleSelect="true"

for the selection model.

Also you should provide the same ids for the records on each request.

Guid.NewGuid()

returns a new one each time, but the GridPanel tries to restore the selection by the old ids.

Thread: [CLOSED] RowSelectionModel RowSelect Handler problem

Thread Tools

Search Thread

Display

[CLOSED] RowSelectionModel RowSelect Handler problem

Similar Threads

[CLOSED] RowSelectionModel RowSelect Handler problem

[CLOSED] RowSelection - fire RowSelect direct event on Store load handler

[CLOSED] JavaScript error when RowSelect handler is fired

[CLOSED] GridPanel: RowSelect Error - Cannot Find RowSelectionModel

[CLOSED] GridPanel hyperlinks + RowSelect Handler

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] RowSelectionModel RowSelect Handler problem

[CLOSED] RowSelectionModel RowSelect Handler problem

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us