What's New?

[CLOSED] Get Column Element from Grid Panel

  1. #1
    Oct 18, 2011, 2:16 PM

    [CLOSED] Get Column Element from Grid Panel

    I'd like to be able to MASK an entire column in a grid panel. How can I obtain the column element?
    Last edited by Daniil; Oct 21, 2011 at 4:42 PM. Reason: [CLOSED]
  2. #2
    Oct 18, 2011, 2:26 PM
    Hi,

    Well, it's not a single html element, there are <td>-s elements of different <tr>-s elements of different <table>-s elements.

    So, there is no possibility to mask it using Ext.net.Mask.

    You could use a custom Renderer for an <ext:Column> to achieve your requirement.
  3. #3
    Oct 18, 2011, 3:15 PM
    Any suggestion on how one would do that?
  4. #4
    Oct 18, 2011, 3:27 PM
    I would implement it this way.

    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)
        {
            this.Store1.DataSource = new object[] 
            { 
                new object[] { "test1", "test2", "test3" },
                new object[] { "test4", "test5", "test6" },
                new object[] { "test7", "test8", "test9" },
            };
            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 runat="server">
    <title>Ext.Net Example</title>

    <script type="text/javascript">
        var showMask = function (grid, dataIndex) {
            var colModel = grid.getColumnModel(),
                colIndex = colModel.findColumnIndex(dataIndex);
            
            colModel.setRenderer(colIndex, maskRenderer);
            grid.getView().refresh();
        };

        var hideMask = function (grid, dataIndex) {
            var colModel = grid.getColumnModel(),
                colIndex = colModel.findColumnIndex(dataIndex);
            
            colModel.setRenderer(colIndex, function (value) { return value; });
            grid.getView().refresh();
        };

        var maskRenderer = function (value, metaData, record, rowIndex, colIndex, store) {
            metaData.css = "mask-column";
            return value;
        };
    </script>

    <style type="text/css">
        .mask-column {
            back: gray;
        }
    </style>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store ID="Store1" 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>
        </ext:GridPanel>
        <ext:Button runat="server" Text="Show mask">
            <Listeners>
                <Click Handler="showMask(GridPanel1, 'test2')" />
            </Listeners>
        </ext:Button>
        <ext:Button runat="server" Text="Hide mask">
            <Listeners>
                <Click Handler="hideMask(GridPanel1, 'test2')" />
            </Listeners>
        </ext:Button>
    </form>
</body>
</html>

Similar Threads

  1. [CLOSED] Enable/disable checkbox column in grid panel (grid using editablegrid plugin)
    By AnulekhaK in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Dec 26, 2011, 5:39 AM
  2. [CLOSED] switch column data within a grid panel using grid header filters
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 16
    Last Post: Feb 23, 2011, 10:03 AM
  3. [CLOSED] Panel + Toolbar + Element Resize
    By state in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: May 04, 2009, 6:26 PM
  4. [INVALID] Viewport: Element 'Tab/Panel/TabPanel' is not a known element.
    By t0ny in forum Bugs
    Replies: 8
    Last Post: Jun 11, 2008, 9:58 AM

Tags for this Thread

Posting Permissions