[CLOSED] Mapping Columns to different DataIndexes

  1. #1

    [CLOSED] Mapping Columns to different DataIndexes

    I have a GridPanel that shows several columns that contain codes. For the experienced user this is fine and saves a lot of space for each row because the codes are shorter in length compared to their descriptions. But for new users they are not use to the codes yet.

    My tought was to initially show the gridpanel with codes in the columns, but allow for a "Display Option" menu that a user could decide to switch from codes to descriptions. So here are some thoughts:

    • Have hidden columns for the descriptions and through javascript show the description columns, hide the code columns and refresh the grid panel.
    • An alternate way might be to remap the columns DataIndex property to a different ModelField and refresh the grid panel.


    Any thoughts or suggestions? What would be the javascript command to refresh the grid panel after performing either one of the above options.

    <%@ 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[] { "3m Co", 71.72, 0.02, 0.03, "AB", "Decription 1", "9/1 12:00am" },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "XY", "Decription 2", "9/1 12:00am" },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "AB", "Decription 1", "9/1 12:00am" }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Code vs Description - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />    
    
        <style type="text/css">
            .x-grid-row-over .x-grid-cell-inner {
                font-weight : bold;
            }
        </style>
    
        <script type="text/javascript">
            var template = '<span style="color:{0};">{1}</span>';
    
            var change = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value);
            };
    
            var pctChange = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        
        <h1>Simple Array Grid</h1>
        
        <ext:GridPanel 
            ID="GridPanel1"
            runat="server" 
            Title="Array Grid" 
            Width="600" 
            Height="350">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="company" />
                                <ext:ModelField Name="price" Type="Float" />
                                <ext:ModelField Name="change" Type="Float" />
                                <ext:ModelField Name="pctChange" Type="Float" />
                                <ext:ModelField Name="code" Type="String" />
                                <ext:ModelFiled Name="description" Type="String" />
                                <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel>
                <Columns>
                    <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
                    <ext:Column runat="server" Text="Price" DataIndex="price">                  
                        <Renderer Format="UsMoney" />
                    </ext:Column>
                    <ext:Column runat="server" Text="Change" DataIndex="change">
                        <Renderer Fn="change" />
                    </ext:Column>
                    <ext:Column runat="server" Text="Change" DataIndex="pctChange">
                        <Renderer Fn="pctChange" />
                    </ext:Column>
                    <ext:Column runat="server" Text="Blah 1" DataIndex="code" />
                    <ext:Column runat="server" Text="Blah 2" DataIndex="description" hidden="true" />
                    <ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" />
                </Columns>            
            </ColumnModel>       
            <SelectionModel>
                <ext:RowSelectionModel runat="server" />
            </SelectionModel>
        </ext:GridPanel>
    </body>
    </html>
    Last edited by Daniil; Jun 26, 2012 at 10:21 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Quote Originally Posted by cwolcott View Post

    • Have hidden columns for the descriptions and through javascript show the description columns, hide the code columns and refresh the grid panel.
    Good approach. Though it possibly can fan the GridPanel with not used Columns. But it is not problem if you just want to use a few hidden columns.

    You will need to configure them with
    Hideable="false"
    and then you show them setting up
    column.hideable = true;
    To show/hide columns just call its show and hide methods. A column is also a common component now in Ext.NET v2.

    I think you won't need to apply any additional actions like grid refreshing.

    Quote Originally Posted by cwolcott View Post

    • An alternate way might be to remap the columns DataIndex property to a different ModelField and refresh the grid panel.
    I think it's possible to set up dataIndex for a column on the fly, though it's not documented and, respectively, there can be issues. Though no obvious ones for me.
    column.dataIndex = "newDataIndex";
    Then you will need to refresh the grid:
    grid.getView().refresh();
    I would try that option first.
  3. #3
    Quote Originally Posted by Daniil View Post
    I think it's possible to set up dataIndex for a column on the fly, though it's not documented and, respectively, there can be issues. Though no obvious ones for me.
    column.dataIndex = "newDataIndex";
    Then you will need to refresh the grid:
    grid.getView().refresh();
    I would try that option first.
    I like the reassignment of the dataIndex the best I think. After setting it up I thought of one more option to help a new user learn the codes, would be to combine the code and descripton together.

    Code Only - "PR"
    Description Only - "Procurment"
    Combo - "[PR] Procurment"

    Is there a way for a column to be associated with two dataIndexes?
  4. #4
    Quote Originally Posted by cwolcott View Post
    Is there a way for a column to be associated with two dataIndexes?
    I think no.
  5. #5
    Wasn't sure if you code assign it to no DataIndex and use the renderer to use various ModelFields for the given row. Just an odd thought.
  6. #6
    Quote Originally Posted by cwolcott View Post
    to no DataIndex
    The dataIndex config option is marked as Required.
    http://docs.sencha.com/ext-js/4-1/#!...-cfg-dataIndex

    So, I would set up that.

    Quote Originally Posted by cwolcott View Post
    use the renderer to use various ModelFields for the given row.
    Yes, you can return from Render everything you wish. But you should be ready for possible inconsistency. For example, after sorting clicking on a column header. Sorting occurs on the records level.

Similar Threads

  1. Problem of Field Mapping
    By howardyin in forum 2.x Help
    Replies: 1
    Last Post: Jul 20, 2012, 3:46 AM
  2. ListFilter_Remote with Mapping
    By howardyin in forum 2.x Help
    Replies: 0
    Last Post: Apr 28, 2012, 5:03 AM
  3. [CLOSED] Bug in Store Mapping
    By ljcorreia in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 30, 2011, 12:05 PM
  4. [CLOSED] getRecordsValues now uses Mapping instead of Name
    By wazige in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 07, 2011, 2:54 PM
  5. Datatable and Store columns mapping
    By QualityCode in forum 1.x Help
    Replies: 0
    Last Post: Dec 16, 2010, 9:45 PM

Posting Permissions