What's New?

[CLOSED] No selected row you can display a message centered on the tabs

  1. #1
    Jun 10, 2011, 11:57 AM

    [CLOSED] No selected row you can display a message centered on the tabs

    I have a grid on top and a panel and several tabs at the bottom with multiple controls inside.

    How best to you guys to show me that when I have no selected row that I enter with a centralized display the tabs there is no selected row, as the image attached.
    Last edited by Daniil; Jun 13, 2011 at 3:59 PM. Reason: [CLOSED]
  2. #2
    Jun 10, 2011, 1:39 PM
    Hi,

    Please investigate the example.

    Example
    <%@ 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)
        {
            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();
        }
    }
</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 runat="server">
    <title>Ext.Net Example</title>

    <script type="text/javascript">
        var addMessage = function(panel, grid) {
            if (!grid.getSelectionModel().hasSelection()) {
                panel.body.addClass('center');
                panel.body.update('Empty');
            } else {
                panel.body.removeClass('center');
                panel.body.update(Ext.encode(grid.getSelectionModel().getSelected().data));
            }
        }
    </script>

    <style type="text/css">
        .center {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
    </style>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="test1" />
                                <ext:RecordField Name="test2" />
                                <ext:RecordField Name="test3" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test1" DataIndex="test1" />
                    <ext:Column Header="Test2" DataIndex="test2" />
                    <ext:Column Header="Test3" DataIndex="test3" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" SingleSelect="true">
                    <Listeners>
                        <SelectionChange Handler="addMessage(Panel1, this.grid);" />
                    </Listeners>
                </ext:RowSelectionModel>
            </SelectionModel>
        </ext:GridPanel>
        <ext:Panel ID="Panel1" runat="server" Height="200" Width="400">
            <Listeners>
                <AfterRender Handler="addMessage(this, GridPanel1);" />
            </Listeners>
        </ext:Panel>
    </form>
</body>
</html>
  3. #3
    Jun 22, 2011, 6:36 PM
    Quote Originally Posted by Daniil View Post
    Hi,

    Please investigate the example.

    Example
    <%@ 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)
        {
            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();
        }
    }
</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 runat="server">
    <title>Ext.Net Example</title>

    <script type="text/javascript">
        var addMessage = function(panel, grid) {
            if (!grid.getSelectionModel().hasSelection()) {
                panel.body.addClass('center');
                panel.body.update('Empty');
            } else {
                panel.body.removeClass('center');
                panel.body.update(Ext.encode(grid.getSelectionModel().getSelected().data));
            }
        }
    </script>

    <style type="text/css">
        .center {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
    </style>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="test1" />
                                <ext:RecordField Name="test2" />
                                <ext:RecordField Name="test3" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test1" DataIndex="test1" />
                    <ext:Column Header="Test2" DataIndex="test2" />
                    <ext:Column Header="Test3" DataIndex="test3" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" SingleSelect="true">
                    <Listeners>
                        <SelectionChange Handler="addMessage(Panel1, this.grid);" />
                    </Listeners>
                </ext:RowSelectionModel>
            </SelectionModel>
        </ext:GridPanel>
        <ext:Panel ID="Panel1" runat="server" Height="200" Width="400">
            <Listeners>
                <AfterRender Handler="addMessage(this, GridPanel1);" />
            </Listeners>
        </ext:Panel>
    </form>
</body>
</html>
    In this example
    When you select a row in the grid.
    Is there a way to make a loop of the controls that exist in the tab and hides them via javascript?
  4. #4
    Jun 22, 2011, 7:37 PM
    Please start a new thread.

Similar Threads

  1. [CLOSED] not contain any records you can display a message centered on the grid
    By majunior in forum 1.x Legacy Premium Help
    Replies: 49
    Last Post: Dec 04, 2012, 12:25 PM
  2. [CLOSED] [1.0] pagingtoolbar.add adds to the right of the display message instead of the left
    By jchau in forum 1.x Legacy Premium Help
    Replies: 10
    Last Post: May 13, 2011, 2:30 PM
  3. Cannot Display a Message from the .ashx Handler....
    By RonaldR in forum 1.x Help
    Replies: 0
    Last Post: Mar 21, 2011, 3:55 PM
  4. [CLOSED] [1.0] How to display the messages into several lines in Message Box.
    By Hari_CSC in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 07, 2010, 8:00 AM
  5. [CLOSED] dynamic tabs do not display content
    By alexp in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: May 07, 2009, 1:05 AM

Posting Permissions