[CLOSED] GridView EmptyText property doesn't display the first time

  1. #1

    [CLOSED] GridView EmptyText property doesn't display the first time

    Hi,

    Please consider the code sample below. The EmptyText string doesn't show up the first time after either "Match" or "No Match" buttons are pressed. It's there the second time though. I've done some client and server side debugging and examined the page source on the client but couldn't spot the issue. Please advise what might be wrong in my setup.

    <%@ 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)
            {
    
            }
        }
    
        [DirectMethod]
        public void DoSearch(bool match)
        {
            if (match)
            {
                this.GridPanel1.HideHeaders = false;
                this.Store1.DataSource = this.Data;
                this.Store1.DataBind();
            }
            else
            {
                this.GridPanel1.GetView().EmptyText = "No match found!";
                this.GridPanel1.HideHeaders = true;
            }
        }
    
        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" }
                };
            }
        }
    </script>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title></title>
        <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 + "%");
            };
    
            var doSearch = function (match) {
                Ext.net.Mask.show();
                GridPanel1.getStore().loadData([]);
                X.DoSearch(match, {
                    eventMask: { showMask: false },
                    success: function () {
                        Ext.net.Mask.hide();
                    }
                });
            };
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" DirectMethodNamespace="X" />
        <ext:Viewport ID="ViewPort1" runat="server" Layout="FitLayout">
            <Items>
                <ext:GridPanel ID="GridPanel1" runat="server" StripeRows="true" Height="320" MinHeight="160"
                    Region="North" CollapseMode="Mini" Split="true">
                    <Store>
                        <ext:Store ID="Store1" runat="server" AutoLoad="true" WarningOnDirty="false">
                            <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>
                    <LoadMask ShowMask="false" />
                    <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>
                    <TopBar>
                        <ext:Toolbar runat="server">
                            <Items>
                                <ext:Button runat="server" Text="Match">
                                    <Listeners>
                                        <Click Handler="doSearch(1);" />
                                    </Listeners>
                                </ext:Button>
                                <ext:Button runat="server" Text="No Match">
                                    <Listeners>
                                        <Click Handler="doSearch(0);" />
                                    </Listeners>
                                </ext:Button>
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <BottomBar>
                        <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="10" DisplayInfo="true">
                            <Items>
                            </Items>
                        </ext:PagingToolbar>
                    </BottomBar>
                    <View>
                        <ext:GridView ID="GridView1" runat="server">
                        </ext:GridView>
                    </View>
                    <SelectionModel>
                        <ext:RowSelectionModel runat="server" SingleSelect="true" />
                    </SelectionModel>
                    <Listeners>
                        <ViewReady Handler="this.getStore().load();" />
                    </Listeners>
                </ext:GridPanel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
    Last edited by Daniil; Jul 30, 2013 at 3:46 AM. Reason: [CLOSED]
  2. #2
    Hi Vadym,

    An EmptyText is applied on loading, but in your scenario you first load nothing:
    GridPanel1.getStore().loadData([]);
    then the DirectMethod calls
    this.GridPanel1.GetView().EmptyText = "No match found!";
    and it is being applied.

    What about to apply the EmptyText for a GridView initially?
  3. #3
    Hi Daniil,

    That would be fine but the wording of the EmptyText property has to change depending on circumstances. It's got to be set in the DirectMethod or Direct Event context on the server after the search parameters and search results have been examined. The previous search results have to be cleared from the view before the search is performed.
  4. #4
    I think what I've had to tweak is add the call to refresh the GridView in the success handler:

    GridPanel1.getView().refresh();
    In case anyone needs the fulsome solution that works for me, it's below. You could mark this thread as closed if the workaround appears plausible.


    <%@ 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)
            {
    
            }
        }
    
        [DirectMethod]
        public void DoSearch(bool match)
        {
            if (match)
            {
                this.GridPanel1.HideHeaders = false;
                this.Store1.DataSource = this.Data;
                this.Store1.DataBind();
            }
            else
            {
                this.GridPanel1.GetView().EmptyText = String.Format("No match found @{0}!", DateTime.Now);
                this.GridPanel1.HideHeaders = true;
            }
        }
    
        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" }
                };
            }
        }
    </script>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title></title>
        <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 + "%");
            };
    
            var doSearch = function (match) {
                Ext.net.Mask.show();
                GridPanel1.getStore().loadData([]);
                X.DoSearch(match, {
                    eventMask: { showMask: false },
                    success: function () {
                        GridPanel1.getView().refresh();
                        Ext.net.Mask.hide();
                    }
                });
            };
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" DirectMethodNamespace="X" />
        <ext:Viewport ID="ViewPort1" runat="server" Layout="FitLayout">
            <Items>
                <ext:GridPanel ID="GridPanel1" runat="server" StripeRows="true" Height="320" MinHeight="160"
                    Region="North" CollapseMode="Mini" Split="true">
                    <Store>
                        <ext:Store ID="Store1" runat="server" AutoLoad="true" WarningOnDirty="false">
                            <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>
                    <LoadMask ShowMask="false" />
                    <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>
                    <TopBar>
                        <ext:Toolbar runat="server">
                            <Items>
                                <ext:Button runat="server" Text="Match">
                                    <Listeners>
                                        <Click Handler="doSearch(1);" />
                                    </Listeners>
                                </ext:Button>
                                <ext:Button runat="server" Text="No Match">
                                    <Listeners>
                                        <Click Handler="doSearch(0);" />
                                    </Listeners>
                                </ext:Button>
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <BottomBar>
                        <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="10" DisplayInfo="true">
                            <Items>
                            </Items>
                        </ext:PagingToolbar>
                    </BottomBar>
                    <View>
                        <ext:GridView ID="GridView1" runat="server">
                        </ext:GridView>
                    </View>
                    <SelectionModel>
                        <ext:RowSelectionModel runat="server" SingleSelect="true" />
                    </SelectionModel>
                    <Listeners>
                        <ViewReady Handler="this.getStore().load();" />
                    </Listeners>
                </ext:GridPanel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
  5. #5
    I think the solution is good. However, I would also consider a possibility to change EmptyText first, then clear the Store.

    By the way, for clearing a Store I would probably prefer
    GridPanel1.getStore().removeAll();
    instead of
    GridPanel1.getStore().loadData([]);
  6. #6
    Thanks again Daniil!

Similar Threads

  1. Replies: 2
    Last Post: Sep 15, 2014, 2:58 PM
  2. Replies: 4
    Last Post: Jul 30, 2012, 7:24 PM
  3. How to display components in design time?
    By Dig2010 in forum 1.x Help
    Replies: 1
    Last Post: Dec 02, 2010, 6:24 PM
  4. Replies: 8
    Last Post: Aug 04, 2010, 12:24 PM
  5. TimeField problem how to display the time
    By heysol in forum 1.x Help
    Replies: 0
    Last Post: Nov 06, 2009, 8:52 PM

Tags for this Thread

Posting Permissions