[CLOSED] GridPanel CommandColumn with command text from record in the store

  1. #1

    [CLOSED] GridPanel CommandColumn with command text from record in the store

    Here's what I would like to do. Please tell me if this is possible and how I might accomplish it.

    I want a CommandColumn in my grid with the following:
    • The text for the command needs to come from a field in the store (commandname will always be the same)
    • The icon for the command needs to be different based on a field in the store (for similar tasks, i'm using a renderer, but i don't know how to do that with a GridCommand)
    Last edited by Daniil; Aug 15, 2011 at 3:46 PM. Reason: [CLOSED]
  2. #2
    Hi,

    You should be able to implement your requirements using PrepareToolbar, please see the example.
    https://examples1.ext.net/#/GridPane...pare_Commands/
  3. #3
    This is working pretty good. I had to use the following to get it:

    
            var getIcon = function (type) {
                switch (type) {
                    case "masterhousehold":
                        return 'icon-neighbourhood';
                        break;
                    case "household":
                        return 'icon-house';
                        break;
                    case "account":
                        return 'icon-user';
                        break;
                    case "asset":
                        return 'icon-chart_line';
                        break;
                    case "transaction":
                        return 'icon-folder';
                        break;
                    default:
                        return 'icon-page_white_text';
                }
            };
    
    var prepareDescriptionCommand = function (grid, toolbar, rowIndex, record) {            toolbar.add(new Ext.Button({
                    iconCls: getIcon(record.get('type')),
                    command: "Details",
                    text: record.get('desc')
                }));
                toolbar.doLayout();
            };
    There's a few things that I need to see if I can change...
    • How can I make the button that gets added a LinkButton. I need the text to appear as a hyperlink instead of a button
    • Even though I've registered the icon, I cannot get the neighbourhood icon to display. every other one works fine
    The biggest problem I have right now is that sorting this column doesn't work anymore. Are command columns not sortable?
  4. #4
    Quote Originally Posted by jmcantrell View Post
    How can I make the button that gets added a LinkButton. I need the text to appear as a hyperlink instead of a button
    Please use Ext.net.LinkButton({...}) instead of Ext.Button({...}).

    Quote Originally Posted by jmcantrell View Post
    Even though I've registered the icon, I cannot get the neighbourhood icon to display. every other one works fine
    It appears to working for me.

    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();
    
                this.ResourceManager1.RegisterIcon(Icon.Neighbourhood);
            }
        }
    </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 prepareToolbar = function (grid, toolbar) {
                toolbar.add(new Ext.net.LinkButton({
                    text : "Test",
                    iconCls : "icon-neighbourhood"
                }));
                toolbar.doLayout();
            }
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager ID="ResourceManager1" 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" />
                        <ext:CommandColumn>
                            <PrepareToolbar Fn="prepareToolbar" />
                        </ext:CommandColumn>
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Quote Originally Posted by jmcantrell View Post
    The biggest problem I have right now is that sorting this column doesn't work anymore. Are command columns not sortable?
    Yes, CommandColumn is not sortable and have no .dataIndex.
  5. #5
    Is there any reason why an icon wouldn't be available? I'm trying to find a place to start looking.

    The source of my page shows this which is missing the Neighbourhood icon:

    icons:["UserEdit","Disk","Layout","Decline","Pencil","Bin","Wand","Reload","ChartOrganisation","User","ChartLine","PageWhiteText","Folder","Magnifier","PlayGreen","Delete","Lightning","PageLandscapeShot","UserSuitBlack","ChartCurve","Wrench","ChartPie","UserHome","FlagRed","Star","Clipboard","Printer","Cog","PageCode","PageExcel","PageAttach","Add","PackageIn","Attach","Accept","Cancel","DiskMultiple","PackageGo","Newspaper","House"]
  6. #6
    Is there any way to have a column that contains a linkbutton that is also sortable?
  7. #7
    Quote Originally Posted by jmcantrell View Post
    Is there any reason why an icon wouldn't be available? I'm trying to find a place to start looking.

    The source of my page shows this which is missing the Neighbourhood icon:

    icons:["UserEdit","Disk","Layout","Decline","Pencil","Bin","Wand","Reload","ChartOrganisation","User","ChartLine","PageWhiteText","Folder","Magnifier","PlayGreen","Delete","Lightning","PageLandscapeShot","UserSuitBlack","ChartCurve","Wrench","ChartPie","UserHome","FlagRed","Star","Clipboard","Printer","Cog","PageCode","PageExcel","PageAttach","Add","PackageIn","Attach","Accept","Cancel","DiskMultiple","PackageGo","Newspaper","House"]
    I'm not sure how you register icons and what the "icons" array you demonstrated. Please clarify.
  8. #8
    Quote Originally Posted by jmcantrell View Post
    Is there any way to have a column that contains a linkbutton that is also sortable?
    Here you are.

    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", "commandA" },
                    new object[] { "test2", "commandB" },
                    new object[] { "test3", "commandC" }
                };
                store.DataBind();
     
                this.ResourceManager1.RegisterIcon(Icon.Neighbourhood);
            }
        }
    </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 prepareToolbar = function (grid, toolbar, rowIndex, record) {
                toolbar.add(new Ext.net.LinkButton({
                    text : record.data.command,
                    iconCls : "icon-neighbourhood"
                }));
                toolbar.doLayout();
            }
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
                <Store>
                    <ext:Store runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="test" />
                                    <ext:RecordField Name="command" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test" DataIndex="test" />
                        <ext:CommandColumn Header="Commands">
                            <CustomConfig>
                                <ext:ConfigItem Name="dataIndex" Value="command" Mode="Value" />
                                <ext:ConfigItem Name="sortable" Value="true" Mode="Raw" />
                            </CustomConfig>
                            <PrepareToolbar Fn="prepareToolbar" />
                        </ext:CommandColumn>
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  9. #9
    Quote Originally Posted by Daniil View Post
    Yes, CommandColumn is not sortable and have no .dataIndex.
    Sorting is possible in some scenario:
    http://forums.ext.net/showthread.php...ll=1#post88705

Similar Threads

  1. Replies: 1
    Last Post: May 10, 2012, 9:50 PM
  2. Replies: 9
    Last Post: Apr 25, 2012, 8:03 AM
  3. Replies: 16
    Last Post: May 26, 2011, 10:23 PM
  4. [CLOSED] Adding a new Store Record - Not a Record object
    By Steve in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: May 15, 2009, 7:40 AM
  5. Replies: 2
    Last Post: Mar 04, 2009, 4:28 PM

Tags for this Thread

Posting Permissions