What's New?

[CLOSED] RowSelectionModel RowSelect Handler problem

Page 2 of 2 FirstFirst 12
  1. #11
    Jun 22, 2012, 4:05 PM
    Yes, that was it! Now, the last question on the topic (hopefully :) What if the rowid for the row selected doesn't exist any more after the Store is data bound on the server, should there be any handling for that kind of scenario?

    Thanks much,

    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[] { 1, "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                new object[] { 2,"Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                new object[] { 3,"Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                new object[] { 4,"American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                new object[] { 5,"American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                new object[] { 6,"AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                new object[] { 7,"Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                new object[] { 8,"Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                new object[] { 9,"Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                new object[] { 10,"E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
                new object[] { 11,"Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
                new object[] { 12,"General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
                new object[] { 13,"General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
                new object[] { 14,"Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
                new object[] { 15,"Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
                new object[] { 16,"Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
                new object[] { 17,"International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
                new object[] { 18,"Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
                new object[] { 19,"JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
                new object[] { 20,"McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
                new object[] { 21,"Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
                new object[] { 22,"Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
                new object[] { 23,"Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
                new object[] { 24,"The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
                new object[] { 25,"The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
                new object[] { 26,"The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
                new object[] { 27,"United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
                new object[] { 28,"Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
                new object[] { 29,"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" SelectionMemory="Enabled"
        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) {
                                        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>
        <LoadMask ShowMask="true" />
        <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>
  2. #12
    Jun 22, 2012, 4:10 PM
    Quote Originally Posted by vadym.f View Post
    What if the rowid for the row selected doesn't exist any more after the Store is data bound on the server, should there be any handling for that kind of scenario?
    Well, the old row won't be selected, because it just won't exist. No automatic way to handle this. You will need to come up with some solution how to handle it.

    Personally, I would avoid such scenario to change the ids for separate records, if you really don't need to change them. Since it has a new id, consider that record as a new one.
  3. #13
    Jun 22, 2012, 4:24 PM
    Well, I believe it's a pretty common scenario where a row with a specific ID is no longer retrieved on the server after data refresh. But in this code sample, the first row is selected in such a case, which is great for what I'm doing! Thank you very much for bearing with me step by step, you can mark this thread as resolved.

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

    private object[] Data1
    {
        get
        {
            return new object[]
            {
                new object[] { 1+1000, "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                new object[] { 2+1000,"Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                new object[] { 3+1000,"Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                new object[] { 4+1000,"American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                new object[] { 5+1000,"American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                new object[] { 6+1000,"AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                new object[] { 7+1000,"Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                new object[] { 8+1000,"Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                new object[] { 9+1000,"Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                new object[] { 10+1000,"E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
                new object[] { 11+1000,"Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
                new object[] { 12+1000,"General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
                new object[] { 13+1000,"General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
                new object[] { 14+1000,"Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
                new object[] { 15+1000,"Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
                new object[] { 16+1000,"Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
                new object[] { 17+1000,"International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
                new object[] { 18+1000,"Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
                new object[] { 19+1000,"JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
                new object[] { 20+1000,"McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
                new object[] { 21+1000,"Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
                new object[] { 22+1000,"Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
                new object[] { 23+1000,"Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
                new object[] { 24+1000,"The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
                new object[] { 25+1000,"The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
                new object[] { 26+1000,"The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
                new object[] { 27+1000,"United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
                new object[] { 28+1000,"Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
                new object[] { 29+1000,"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.Data1;
            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" SelectionMemory="Enabled"
        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>
        <LoadMask ShowMask="true" />
        <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>
  4. #14
    Jun 22, 2012, 4:36 PM
    Quote Originally Posted by vadym.f View Post
    Well, I believe it's a pretty common scenario where a row with a specific ID is no longer retrieved on the server after data refresh.
    Yes, I just thought you need to select that row with changed id again if it was selected before reloading. Never mind.
Page 2 of 2 FirstFirst 12

Similar Threads

  1. [CLOSED] RowSelectionModel RowSelect Handler problem
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jun 28, 2012, 8:52 PM
  2. [CLOSED] RowSelection - fire RowSelect direct event on Store load handler
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jun 25, 2012, 6:19 PM
  3. [CLOSED] JavaScript error when RowSelect handler is fired
    By Daly_AF in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 16, 2012, 6:15 AM
  4. [CLOSED] GridPanel: RowSelect Error - Cannot Find RowSelectionModel
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Oct 04, 2011, 9:27 AM
  5. [CLOSED] GridPanel hyperlinks + RowSelect Handler
    By Neil_Walters in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 17, 2010, 12:08 PM

Tags for this Thread

Posting Permissions