[CLOSED] not contain any records you can display a message centered on the grid

Page 5 of 5 FirstFirst ... 345
  1. #41
    Please provide a sample to reproduce.
  2. #42
    Quote Originally Posted by Daniil View Post
    Please provide a sample to reproduce.
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!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 onLoadGrid = function (store, records, grid) {
                if (records.length === 0) {
                    grid.view.scroller.addClass("DisplayTextNoRecordsGrid");
                    grid.view.mainBody.update('Sem registros para exibir');
                } else {
                    grid.view.scroller.removeClass("DisplayTextNoRecordsGrid");
                }
            }
        </script>
        <ext:XScript ID="XScript1" runat="server">
            <script type="text/javascript">
                var applyFilter = function (field) {
                    var v = field.el.dom.value;
                    
                    if(field){
                        var id = field.id,
                            task = new Ext.util.DelayedTask(function(){
                                var f = Ext.getCmp(id);
                                f.focus();
                                f.el.dom.value = f.el.dom.value;
                            });
                        task.delay(100);
                    }
                    #{GridPanel1}.getStore().filterBy(getRecordFilter());                                
                };
                
                var clearFilter = function () {
                    #{Filtertest1}.reset();
                    #{Filtertest2}.reset();
                    #{Filtertest3}.reset();
    
                    #{GridPanel1}.getStore().clearFilter();
                }
    
                var filterString = function (value, dataIndex, record) {
                    var val = record.get(dataIndex);
                    if (typeof val != "string") {
                        return value.length == 0;
                    }
                    return val.toLowerCase().indexOf(value.toLowerCase()) > -1;
                };
     
                var filterDate = function (value, dataIndex, record) {
                    var val = record.get(dataIndex).clearTime(true).getTime();
     
                    if (!Ext.isEmpty(value, false) && val != value.clearTime(true).getTime()) {
                        return false;
                    }
                    return true;
                };
     
                var filterNumber = function (value, dataIndex, record) {
                    var val = record.get(dataIndex);                
     
                    if (!Ext.isEmpty(value, false) && val != value) {
                        return false;
                    }
                    return true;
                };
     
                var getRecordFilter = function () {
                    var f = [];
     
                    f.push({
                        filter: function (record) {                         
                            return filterString(#{Filtertest1}.getValue(), 'test1', record);
                        }
                    });
                     
                    f.push({
                        filter: function (record) {                         
                            return filterString(#{Filtertest2}.getValue(), 'test1', record);
                        }
                    });
    
                    f.push({
                        filter: function (record) {                         
                            return filterString(#{Filtertest3}.getValue(), 'test1', record);
                        }
                    });
    
                    var len = f.length;
                     
                    return function (record) {
                        for (var i = 0; i < len; i++) {
                            if (!f[i].filter(record)) {
                                return false;
                            }
                        }
                        return true;
                    };  
                };
            </script>
        </ext:XScript>
        <style type="text/css">
            .DisplayTextNoRecordsGrid
            {
                vertical-align: middle;
                display: table-cell;
                text-align: center;
                font: Tahoma;
                font-size: 12pt;
            }
        </style>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Viewport ID="Viewport" runat="server">
            <Items>
                <ext:Panel ID="pnlLayoutMaster" runat="server" Border="true" Frame="false" Layout="VBoxLayout"
                            MinHeight="29px" Split="True" Height="226">
                            <LayoutConfig>
                                <ext:VBoxLayoutConfig Align="Stretch" />
                            </LayoutConfig>
                            <Items>
                                <ext:Panel ID="pnlSUtToolbarMaster" runat="server" Border="true" EnableViewState="true"
                                    Height="28">
                                </ext:Panel>
    
    
                           
                                <ext:GridPanel ID="GridPanel1" runat="server" StripeRows="true" TrackMouseOver="true"
                                    Flex="1">
                                    <Store>
                                        <ext:Store ID="Store1" runat="server" AutoLoad="false">
                                            <Reader>
                                                <ext:ArrayReader>
                                                    <Fields>
                                                        <ext:RecordField Name="test1" />
                                                        <ext:RecordField Name="test2" />
                                                        <ext:RecordField Name="test3" />
                                                    </Fields>
                                                </ext:ArrayReader>
                                            </Reader>
                                            <Listeners>
                                                <Load Handler="var grid = #{GridPanel1};
                                                                if (grid.rendered) {
                                                                    onLoadGrid(store, records, grid);
                                                                }" Delay="10" />
                                                <DataChanged Handler="onLoadGrid(store, this.getRange()||[], #{GridPanel1});" />
                                            </Listeners>
                                        </ext:Store>
                                    </Store>
                                    <ColumnModel ID="ColumnModel1" runat="server">
                                        <Columns>
                                            <ext:Column Header="Test1" DataIndex="test1" />
                                            <ext:Column Header="Test2" DataIndex="test2" />
                                            <ext:Column Header="Test3" DataIndex="test3" />
                                        </Columns>
                                    </ColumnModel>
                                    <View>
                                        <ext:GridView ID="GridView1" runat="server">
                                            <HeaderRows>
                                                <ext:HeaderRow>
                                                    <Columns>
                                                        <ext:HeaderColumn Cls="x-small-editor">
                                                            <Component>
                                                                <ext:TextField ID="Filtertest1" runat="server" EnableKeyEvents="true">
                                                                    <Listeners>
                                                                        <KeyUp Handler="applyFilter(this);" Buffer="250" />
                                                                    </Listeners>
                                                                </ext:TextField>
                                                            </Component>
                                                        </ext:HeaderColumn>
                                                        <ext:HeaderColumn Cls="x-small-editor">
                                                            <Component>
                                                                <ext:TextField ID="Filtertest2" runat="server" EnableKeyEvents="true">
                                                                    <Listeners>
                                                                        <KeyUp Handler="applyFilter(this);" Buffer="250" />
                                                                    </Listeners>
                                                                </ext:TextField>
                                                            </Component>
                                                        </ext:HeaderColumn>
                                                        <ext:HeaderColumn Cls="x-small-editor">
                                                            <Component>
                                                                <ext:TextField ID="Filtertest3" runat="server" EnableKeyEvents="true">
                                                                    <Listeners>
                                                                        <KeyUp Handler="applyFilter(this);" Buffer="250" />
                                                                    </Listeners>
                                                                </ext:TextField>
                                                            </Component>
                                                        </ext:HeaderColumn>
                                                    </Columns>
                                                </ext:HeaderRow>
                                            </HeaderRows>
                                        </ext:GridView>
                                    </View>
                                </ext:GridPanel>
                                <ext:Button ID="Button1" runat="server" Text="Load data" OnDirectClick="LoadData" />
                                <ext:Button ID="Button2" runat="server" Text="Load nothing" OnDirectClick="LoadNothing" />
                            </Items>
                            <Listeners>
                                <Activate Handler="#{GridPanel1}.store.load();" Single="true" />
                            </Listeners>
                        </ext:Panel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Ext.Net;
    
    namespace WebApplication1
    {
        public partial class WebForm1 : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
    
            protected void LoadData(object sender, DirectEventArgs e)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
            { 
                new object[] { "test11", "test12", "test13" },
                new object[] { "test12", "test22", "test23" },
                new object[] { "test13", "test32", "test33" }
            };
                store.DataBind();
    
                
            }
    
            protected void LoadNothing(object sender, DirectEventArgs e)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataBind();
            }
    
    
        }
    }
  3. #43
    When are you getting the error? After filtering?
  4. #44
    Quote Originally Posted by Daniil View Post
    When are you getting the error? After filtering?
    There is no error.
    Not only displays the message "No records to display" when I apply a filter on gridview.
    See picture attached.
    Image1 contain the records.
    Image2 to run a filter
  5. #45
    Please add Delay="100"
    <DataChanged Handler="onLoadGrid(store, this.getRange()||[], #{GridPanel1});" Delay="100" />
  6. #46
    Quote Originally Posted by Daniil View Post
    Please add Delay="100"
    <DataChanged Handler="onLoadGrid(store, this.getRange()||[], #{GridPanel1});" Delay="100" />
    Ok, thanks.
    It worked perfectly.
  7. #47
    Quote Originally Posted by majunior View Post
    Ok, thanks.
    It worked perfectly.
    I'm using the example below

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!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 onLoadGrid = function (store, records, grid) {
                if (records.length === 0) {
                    grid.view.scroller.addClass("DisplayTextNoRecordsGrid");
                    grid.view.mainBody.update('Sem registros para exibir');
                } else {
                    grid.view.scroller.removeClass("DisplayTextNoRecordsGrid");
                }
            }
        </script>
        <ext:XScript ID="XScript1" runat="server">
            <script type="text/javascript">
                var applyFilter = function (field) {
                    var v = field.el.dom.value;
                     
                    if(field){
                        var id = field.id,
                            task = new Ext.util.DelayedTask(function(){
                                var f = Ext.getCmp(id);
                                f.focus();
                                f.el.dom.value = f.el.dom.value;
                            });
                        task.delay(100);
                    }
                    #{GridPanel1}.getStore().filterBy(getRecordFilter());                                
                };
                 
                var clearFilter = function () {
                    #{Filtertest1}.reset();
                    #{Filtertest2}.reset();
                    #{Filtertest3}.reset();
     
                    #{GridPanel1}.getStore().clearFilter();
                }
     
                var filterString = function (value, dataIndex, record) {
                    var val = record.get(dataIndex);
                    if (typeof val != "string") {
                        return value.length == 0;
                    }
                    return val.toLowerCase().indexOf(value.toLowerCase()) > -1;
                };
      
                var filterDate = function (value, dataIndex, record) {
                    var val = record.get(dataIndex).clearTime(true).getTime();
      
                    if (!Ext.isEmpty(value, false) && val != value.clearTime(true).getTime()) {
                        return false;
                    }
                    return true;
                };
      
                var filterNumber = function (value, dataIndex, record) {
                    var val = record.get(dataIndex);                
      
                    if (!Ext.isEmpty(value, false) && val != value) {
                        return false;
                    }
                    return true;
                };
      
                var getRecordFilter = function () {
                    var f = [];
      
                    f.push({
                        filter: function (record) {                         
                            return filterString(#{Filtertest1}.getValue(), 'test1', record);
                        }
                    });
                      
                    f.push({
                        filter: function (record) {                         
                            return filterString(#{Filtertest2}.getValue(), 'test1', record);
                        }
                    });
     
                    f.push({
                        filter: function (record) {                         
                            return filterString(#{Filtertest3}.getValue(), 'test1', record);
                        }
                    });
     
                    var len = f.length;
                      
                    return function (record) {
                        for (var i = 0; i < len; i++) {
                            if (!f[i].filter(record)) {
                                return false;
                            }
                        }
                        return true;
                    };  
                };
            </script>
        </ext:XScript>
        <style type="text/css">
            .DisplayTextNoRecordsGrid
            {
                vertical-align: middle;
                display: table-cell;
                text-align: center;
                font: Tahoma;
                font-size: 12pt;
            }
        </style>
    </head>
    <body>
        <form id="Form2" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Viewport ID="Viewport" runat="server">
            <Items>
                <ext:Panel ID="pnlLayoutMaster" runat="server" Border="true" Frame="false" Layout="VBoxLayout"
                    MinHeight="29px" Split="True" Height="226">
                    <LayoutConfig>
                        <ext:VBoxLayoutConfig Align="Stretch" />
                    </LayoutConfig>
                    <Items>
                        <ext:Panel ID="pnlSUtToolbarMaster" runat="server" Border="true" EnableViewState="true"
                            Height="28">
                        </ext:Panel>
                        <ext:GridPanel ID="GridPanel1" runat="server" StripeRows="true" TrackMouseOver="true"
                            Flex="1">
                            <Store>
                                <ext:Store ID="Store1" runat="server" AutoLoad="false">
                                    <Reader>
                                        <ext:ArrayReader>
                                            <Fields>
                                                <ext:RecordField Name="test1" />
                                                <ext:RecordField Name="test2" />
                                                <ext:RecordField Name="test3" />
                                            </Fields>
                                        </ext:ArrayReader>
                                    </Reader>
                                    <Listeners>
                                        <Load Handler="var grid = #{GridPanel1};
                                                                if (grid.rendered) {
                                                                    onLoadGrid(store, records, grid);
                                                                }" Delay="10" />
                                        <DataChanged Handler="onLoadGrid(store, this.getRange()||[], #{GridPanel1});" />
                                    </Listeners>
                                </ext:Store>
                            </Store>
                            <ColumnModel ID="ColumnModel1" runat="server">
                                <Columns>
                                    <ext:Column Header="Test1" DataIndex="test1" />
                                    <ext:Column Header="Test2" DataIndex="test2" />
                                    <ext:Column Header="Test3" DataIndex="test3" />
    
                                    <ext:Column Width="28" DataIndex="company" Sortable="false" MenuDisabled="true" Header="&nbsp;" Fixed="true">
                        </ext:Column>
                                </Columns>
                            </ColumnModel>
                            <View>
                                <ext:GridView ID="GridView1" runat="server">
                                    <HeaderRows>
                                        <ext:HeaderRow>
                                            <Columns>
                                                <ext:HeaderColumn Cls="x-small-editor">
                                                    <Component>
                                                        <ext:TextField ID="Filtertest1" runat="server" EnableKeyEvents="true">
                                                        </ext:TextField>
                                                    </Component>
                                                </ext:HeaderColumn>
                                                <ext:HeaderColumn Cls="x-small-editor">
                                                    <Component>
                                                        <ext:TextField ID="Filtertest2" runat="server" EnableKeyEvents="true">
                                                        </ext:TextField>
                                                    </Component>
                                                </ext:HeaderColumn>
                                                <ext:HeaderColumn Cls="x-small-editor">
                                                    <Component>
                                                        <ext:TextField ID="Filtertest3" runat="server" EnableKeyEvents="true">
                                                        </ext:TextField>
                                                    </Component>
                                                </ext:HeaderColumn>
                                                <ext:HeaderColumn AutoWidthElement="false">
                                                    <Component>
                                                        <ext:Button ID="ClearFilterButton" runat="server" Icon="Cancel" OnDirectClick="LoadNothing">
                                                            
                                                        </ext:Button>
                                                    </Component>
                                                </ext:HeaderColumn>
                                            </Columns>
                                        </ext:HeaderRow>
                                    </HeaderRows>
                                </ext:GridView>
                            </View>
                        </ext:GridPanel>
                        <ext:Button ID="Button1" runat="server" Text="Load data" OnDirectClick="LoadData" />
                    </Items>
                    <Listeners>
                        <Activate Handler="#{GridPanel1}.store.load();" Single="true" />
                    </Listeners>
                </ext:Panel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Ext.Net;
    
    namespace WebApplication1
    {
        public partial class _Default : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
    
            protected void LoadData(object sender, DirectEventArgs e)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
            { 
                new object[] { "test11", "test12", "test13" },
                new object[] { "test12", "test22", "test23" },
                new object[] { "test13", "test32", "test33" }
            };
                store.DataBind();
    
    
            }
    
            protected void LoadNothing(object sender, DirectEventArgs e)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataBind();
            }
        }
    }
    I click the Load button date after reduziro the screen size enough to hide the cancel button.
    The scroll bar is displayed correctly.
    If you pull the scroll bar to the right and click the cancel button is displayed the message but I want the scroll bar disappears.
    I believe the problem is in css property on display

    .DisplayTextNoRecordsGrid
            {
                vertical-align: middle;
                display: table-cell;
                text-align: center;
                font: Tahoma;
                font-size: 12pt;
            }
  8. #48
    Hi @majunior,

    A scrollbar disappears for me. Is the problem specific to any browser?

    I test with FireFox and IE9.
  9. #49
    Quote Originally Posted by Daniil View Post
    Hi @majunior,

    A scrollbar disappears for me. Is the problem specific to any browser?

    I test with FireFox and IE9.
    This problem happens with any browser.
  10. #50
    The discussion is continued here.
    http://forums.ext.net/showthread.php?22493
Page 5 of 5 FirstFirst ... 345

Similar Threads

  1. Replies: 3
    Last Post: Jun 22, 2011, 7:37 PM
  2. Replies: 10
    Last Post: May 13, 2011, 2:30 PM
  3. Replies: 0
    Last Post: Mar 21, 2011, 3:55 PM
  4. Replies: 1
    Last Post: Jul 07, 2010, 8:00 AM
  5. Replies: 6
    Last Post: Feb 22, 2010, 1:18 AM

Tags for this Thread

Posting Permissions