What's New?

[CLOSED] LinkButton command column in GridPanel

  1. #1
    Oct 20, 2010, 10:04 PM

    [CLOSED] LinkButton command column in GridPanel

    Is it possible to have an command column that is just text, and the text is going to be bound to a field in the store. I would just use a TemplateColumn and generate <a> links, but I need to fire a directevent when the command is clicked.

    How would I do this?
    Last edited by Daniil; Oct 22, 2010 at 4:39 AM. Reason: [CLOSED]
  2. #2
    Oct 21, 2010, 9:52 AM
    Hi jmcantrell,

    Maybe something like this:

    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"},
                                         new object[] {"test21", "test22"},
                                         new object[] {"test31", "test32"}
                                };
            store.DataBind();
        }
    }

    protected void Command(object sender, DirectEventArgs e)
    {
        X.Msg.Alert("DirectEvent", "Hello!</br>You are clicked on " + Hidden1.Value.ToString()).Show();
    }
</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 myCommand = function(a) {
            Hidden1.setValue(a.id);
            Button1.fireEvent('click');   
        }
    </script>
</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" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Header="Test1" DataIndex="test1" />
                <ext:TemplateColumn Header="Test2" DataIndex="test2">
                    <Template>
                        <Html>
                            <a id="{test2}" href="#" onclick="myCommand(this)">{test2}</a>
                        </Html>
                    </Template>
                </ext:TemplateColumn>
            </Columns>
        </ColumnModel>
    </ext:GridPanel>
    <ext:Button ID="Button1" runat="server" Text="DirectEvent" Hidden="true">
        <DirectEvents>
            <Click OnEvent="Command" />
        </DirectEvents>
    </ext:Button>
    <ext:Hidden ID="Hidden1" runat="server" />
    </form>
</body>
</html>
  3. #3
    Oct 21, 2010, 2:08 PM
    The only problem I have with this solution is that I don't see how you would pass other record-specific parameters to the hidden button's directevent.

    EDIT: Well, I guess I could just add more hidden fields
  4. #4
    Oct 21, 2010, 2:37 PM
    I need to be able to pass two different values from the record to the direct event. How would I do that?
  5. #5
    Oct 21, 2010, 2:50 PM
    It can look something like this:

    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[] {"id1", "test11", "test12"},
                                         new object[] {"id2", "test12", "test22"},
                                         new object[] {"id3", "test31", "test32"}
                                };
            store.DataBind();
        }
    }
 
    protected void Command(object sender, DirectEventArgs e)
    {
        X.Msg.Alert("DirectEvent", "Hello!<br/>The record is " + Hidden1.Value.ToString()).Show();
    }
</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 myCommand = function(a) {
            Hidden1.setValue(Ext.encode(GridPanel1.getStore().getById(a.id).data));
            Button1.fireEvent('click');  
        }
    </script>
</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 IDProperty="id">
                        <Fields>
                            <ext:RecordField Name="id" />
                            <ext:RecordField Name="test1" />
                            <ext:RecordField Name="test2" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Header="ID" DataIndex="id" />
                <ext:Column Header="Test1" DataIndex="test1" />
                <ext:TemplateColumn Header="Test2" DataIndex="test2">
                    <Template>
                        <Html>
                            <a id="{id}" href="#" onclick="myCommand(this)">{test2}</a>
                        </Html>
                    </Template>
                </ext:TemplateColumn>
            </Columns>
        </ColumnModel>
    </ext:GridPanel>
    <ext:Button ID="Button1" runat="server" Text="DirectEvent" Hidden="true">
        <DirectEvents>
            <Click OnEvent="Command" />
        </DirectEvents>
    </ext:Button>
    <ext:Hidden ID="Hidden1" runat="server" />
    </form>
</body>
</html>
    On server side you can use the JSON.Deserialize() method.
  6. #6
    Oct 21, 2010, 8:38 PM
    This worked. Thanks.

Similar Threads

  1. How can I call a DirectEvent o a GridPanel column with a command?
    By paul-2011 in forum 1.x Help
    Replies: 7
    Last Post: Sep 02, 2016, 7:47 PM
  2. Hide gridcommand from a command column of a gridpanel
    By Vaishali in forum 1.x Help
    Replies: 7
    Last Post: Jun 17, 2014, 10:14 AM
  3. Add command column in gridpanel
    By tmducit in forum 1.x Help
    Replies: 1
    Last Post: May 27, 2011, 11:27 AM
  4. GridPanel Column Command?
    By peter.campbell in forum 1.x Help
    Replies: 1
    Last Post: Apr 08, 2011, 9:13 AM
  5. [CLOSED] GridPanel Command Column Does not Work!
    By Immobilmente in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Mar 30, 2009, 5:26 AM

Posting Permissions