What's New?

[CLOSED] How to turn a Grid column text into a hyperlink on the client?

  1. #1
    Feb 22, 2012, 3:03 PM

    [CLOSED] How to turn a Grid column text into a hyperlink on the client?

    Hi,

    Is there any way to transform a GridPanel column text into a hyperlink on clicking a GridCommand button? Say, I have a Grid Column named "FileName" and a CommandColumn named "Enable". When clicking the "Enable" command button, I need the FileName column text to turn into a hyperlink.

    Also, in a similar fashion, if it's possible to disable or remove the column hyperlink on a command button click.

    Thanks,

    Vadym
    Last edited by Daniil; Feb 22, 2012 at 6:19 PM. Reason: [CLOSED]
  2. #2
    Feb 22, 2012, 3:28 PM
    Hi,

    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[] { "some link 1" },
                new object[] { "some link 2" },
            };
            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 testRenderer = function (value, metadata, record) {
            if (record.get("enabled")) {
                value = String.format('<a href="{0}">{0}</a>', value);
            }
            return value;
        };
    </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="test" />
                                <ext:RecordField Name="enabled" Type="Boolean" DefaultValue="false" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test" DataIndex="test">
                        <Renderer Fn="testRenderer" />
                    </ext:Column>
                    <ext:ImageCommandColumn>
                        <Commands>
                            <ext:ImageCommand CommandName="enable" Icon="Accept" />
                        </Commands>
                    </ext:ImageCommandColumn>
                </Columns>
            </ColumnModel>
            <Listeners>
                <Command Handler="if (command === 'enable') {
                                      record.set('enabled', true);
                                  }" />
            </Listeners>
        </ext:GridPanel>
    </form>
</body>
</html>
  3. #3
    Feb 22, 2012, 4:23 PM
    Thank you, that helped me a lot! I've got to change my initial design a little bit since there's a fresh requirement to cut back on the screen real estate usage. The row command buttons are now being moved to the Grid TopBar Toolbar. 

     
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="test" />
                                <ext:RecordField Name="enabled" Type="Boolean" DefaultValue="false" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test" DataIndex="test">
                        <Renderer Fn="linkRenderer" />
                    </ext:Column>
                </Columns>
            </ColumnModel>
<TopBar>
                    <ext:Toolbar ID="Toolbar1" runat="server">
                        <Items>
                            <ext:Button ID="ButtonEnable" runat="server" Text="Enable Link" Width="100" Icon="PageEdit">
                                <Listeners>
                                    <Click Handler="onEnable();" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
</TopBar>
        </ext:GridPanel>
    The linkRenderer function renderer still works well as it is. I'm providing button Click listeners as follows:

    <script type="text/javascript">
        var onEnable = function () {
            var grid = Ext.getCmp("GridPanel1");
            var record = grid.getSelectionModel().getSelected();
            record.set("enabled", true);
        };

        var linkRenderer = function (value, metadata, record) {
            if (record.get("enabled")) {
                value = String.format('<a href="{0}"><b>{0}</b></a>', value);
            }
            return value;
        };
</script>
    So far, so good :). Hopefully, I'm on the right track with this approach.

    Thanks,

    Vadym
  4. #4
    Feb 22, 2012, 4:30 PM
    Hi Daniil,

    I've just realized that clicking on such a hyperlink to retrieve a server resource (Word document) produces a JS error:

    Line: 7
Error: Invalid calling object
    The document can then be opened normally in MS Office.

    Any idea what might be wrong?

    Thanks,

    Vadym
  5. #5
    Feb 22, 2012, 4:38 PM
    You could replace
    var grid = Ext.getCmp("GridPanel1");
var record = grid.getSelectionModel().getSelected();
    with just:
    var record = GridPanel1.getSelectionModel().getSelected();
  6. #6
    Feb 22, 2012, 4:40 PM
    Quote Originally Posted by vadym.f View Post
    I've just realized that clicking on such a hyperlink to retrieve a server resource (Word document) produces a JS error:

    Line: 7
Error: Invalid calling object
    The document can then be opened normally in MS Office.

    Any idea what might be wrong?
    I think it would be best to start a new forum thread for that issue. I guess it's not related to GridPanel at all.
  7. #7
    Feb 22, 2012, 5:43 PM
    OK, opening up a new thread.

    Thanks,

    Vadym

Similar Threads

  1. [CLOSED] how to change the grid column width in client side?
    By leon_tang in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 07, 2012, 7:36 PM
  2. [CLOSED] Grid column hyperlink throws a JS error when clicked
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Feb 23, 2012, 1:52 PM
  3. [CLOSED] Grid Checkbox Is Being Checked When User Clicks Hyperlink in a Column
    By garrisrd in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 14, 2011, 6:12 PM
  4. How can i show all text inside a column in the grid panel?
    By Tanielian in forum 1.x Help
    Replies: 2
    Last Post: Nov 11, 2010, 4:43 PM
  5. grid column text wrapping
    By [WP]joju in forum 1.x Help
    Replies: 0
    Last Post: Nov 18, 2009, 3:32 AM

Posting Permissions