What's New?

[CLOSED] Center GridPanel cell column content

  1. #1
    Apr 04, 2012, 9:09 AM

    [CLOSED] Center GridPanel cell column content

    Hello this is what I have:

     var linkRenderEngagement = function(value, metadata, record, row) {
               return (record.data.ReqId == 269627) ? '' :  String.format('<a href="javascript:selectItem(\'/8000/EngagementAdmin.aspx?cand_id={0}&org_ID={1}&wf=0{2}\')">{3}</a>', record.data.CandidateId, record.data.OrgId, addUrlText(), record.data.EngagementID);
              // return String.format('<a href="javascript:selectItem(\'/8000/EngagementAdmin.aspx?cand_id={0}&org_ID={1}&wf=0{2}\')">{3}</a>', record.data.CandidateId, record.data.OrgId, addUrlText(), record.data.EngagementID);
            };

        var prepareExtensions = function(grid, command, record, row) {
                if ( command.command == 'mnuExtensions' && record.data.ReqId == 269627) {
                    command.hidden = false;
                    command.hideMode = 'visibility'; //you can try 'display' also 
                    command.qtext = PageStrings("multiple_engagement_records_exist");                
                }

            };


    <ext:Column ColumnID="EngagementID" Sortable="true" DataIndex="EngagementID" Align="Center" >
                                            <Renderer Fn="linkRenderEngagement" />
                                             <Commands>
                                                <ext:ImageCommand IconCls="cand_action_eng_sep_rec_icon"  CommandName="mnuExtensions" Hidden="true"/>
                                            </Commands>
                                            <PrepareCommand Fn="prepareExtensions" />
                                        </ext:Column>
    In short sometimes I render a cell as a link and other time I render it as an image command, everything works fine, anyway I want my content to be centered since I'm getting the link on the left and the icon on the right.


    Thanks
    Last edited by geoffrey.mcgill; Apr 12, 2012 at 1:14 AM. Reason: [CLOSED]
  2. #2
    Apr 04, 2012, 10:07 AM
    Hi,

    I was unable to reproduce. Please provide your full test case.

    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[] { "test1" },
                new object[] { "test2" },
                new object[] { "test3" }
            };
            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 myRenderer = function (value) {
            return String.format("<a href='{0}'>{0}</a>", value);
        };
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" />
    <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
        <Store>
            <ext:Store runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="test" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Header="Test" DataIndex="test" Align="Center">
                    <Renderer Fn="myRenderer" />
                </ext:Column>
            </Columns>
        </ColumnModel>
    </ext:GridPanel>
</body>
</html>
  3. #3
    Apr 04, 2012, 10:11 AM
    Well actually you have everything needed to reproduce, if you take a look you'll see both Renderer and ImageCommand working together to display a link once and an icon other time



    <ext:Column ColumnID="EngagementID" Sortable="true" DataIndex="EngagementID" Align="Center" >
                                            <Renderer Fn="linkRenderEngagement" />
                                             <Commands>
                                                <ext:ImageCommand IconCls="cand_action_eng_sep_rec_icon"  CommandName="mnuExtensions" Hidden="true"/>
                                            </Commands>
                                            <PrepareCommand Fn="prepareExtensions" />
                                        </ext:Column>
  4. #4
    Apr 04, 2012, 10:16 AM
    Anyway this is the solution, use CommandColumn instead of a regular one, and GridCommand instead of ImageCommand, here it is:

       <ext:CommandColumn ColumnID="EngagementID" ButtonAlign="Center" Align="Center">
                                             <Commands>
                                                <ext:CommandText  />
                                                <ext:GridCommand IconCls="cand_action_eng_sep_rec_icon"  CommandName="mnuExtensions" />
                                            </Commands>
                                        <PrepareToolbar Fn="prepareExtensions" />
    So everything done in prepareCommand - no need for Rendered function:

    var prepareExtensions = function (grid, toolbar, rowIndex, record) {
                if (record.data.ReqId == 269627) { 
                    toolbar.items.get(0).hide();
                  
                    toolbar.items.get(1).show();
                    toolbar.items.get(1).setTooltip(PageStrings("multiple_engagement_records_exist"));  
                }
                else {
                     toolbar.items.get(0).setText(String.format('<a href="javascript:selectItem(\'/8000/EngagementAdmin.aspx?cand_id={0}&org_ID={1}&wf=0{2}\')">{3}</a>', record.data.CandidateId, record.data.OrgId, addUrlText(), record.data.EngagementID));
                    toolbar.items.get(0).show();
                    toolbar.items.get(1).hide();  

                }
            };
  5. #5
    Apr 04, 2012, 10:22 AM
    I can suggest the following solution for the ImageCommand.

    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[] { "test1" },
                new object[] { "test2" },
                new object[] { "test3" }
            };
            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 myRenderer = function (value) {
            return String.format("<a href='{0}'>{0}</a>", value);
        };
    </script>

    <style type="text/css">
        .x-grid3-col-MyColumn .cell-imagecommand-value {
            text-align: center;
            width: 75%;
        }
    </style>
</head>
<body>
    <ext:ResourceManager runat="server" />
    <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
        <Store>
            <ext:Store runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="test" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column ColumnID="MyColumn" Header="Test" DataIndex="test">
                    <Renderer Fn="myRenderer" />
                    <Commands>
                        <ext:ImageCommand Icon="Accept" CommandName="command" />
                    </Commands>
                </ext:Column>
            </Columns>
        </ColumnModel>
    </ext:GridPanel>
</body>
</html>
  6. #6
    Apr 04, 2012, 10:24 AM
    Quote Originally Posted by deejayns View Post
    Anyway this is the solution, use CommandColumn instead of a regular one, and GridCommand instead of ImageCommand, here it is:
    I would recommend to still use ImageCommands since it's much more lightweight thing that CommandColumn + GridCommands.

Similar Threads

  1. Gridpanel Column width based on column content?
    By Uziel in forum 1.x Help
    Replies: 1
    Last Post: Nov 04, 2011, 8:51 AM
  2. How can I customize a GridPanel column cell's content using server-side code? (OnDataBinding)
    By paul-2011 in forum 1.x Help
    Replies: 12
    Last Post: Jun 05, 2011, 8:08 PM
  3. [CLOSED] Reload a tab content in a center region IFrame
    By ljcorreia in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Jan 22, 2010, 11:45 AM
  4. Center Align Image in Grid cell
    By bsnezw in forum 1.x Help
    Replies: 0
    Last Post: Aug 25, 2009, 12:25 PM
  5. [CLOSED] GridPanel: modify cell-content from listener (script)
    By andreas.seitz in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 21, 2009, 12:00 PM

Tags for this Thread

Posting Permissions