[CLOSED] Column in GridPanel as hyperlink with javascript function

  1. #1

    [CLOSED] Column in GridPanel as hyperlink with javascript function

    Hello,
    it is possible to create a column with a hyperlink that will have record.data.name as text and will call the javascript function that adds a new panel? Typical use is when you open a new window for editing the row record.

    Default.aspx - Here is tabPanel with id TabPanel1
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebSystem.Admin.Default" %>
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>WebSystem</title>
        <link href="/Admin/Skins/Skin01/Css/Skin01_main.css" rel="stylesheet" />
        <ext:XScript runat="server">
            <script>
                var addTab = function (tabPanel, id, url, menuItem, title, iconCls) {
                    var tab = tabPanel.getComponent(id);
    
                    if (!tab) {
                        tab = tabPanel.add({ 
                            id       : id, 
                            title    : title, 
                            iconCls  : iconCls,
                            closable : true,
                            
                            menuItem : menuItem,
                            loader   : {
                                url      : url,
                                renderer : "frame",
                                loadMask : {
                                    showMask : true,
                                    msg      : "Nahr?v?m:  " + url + "..."
                                }
                            }
                        });
    
                        tab.on("activate", function (tab) {
                            #{MenuPanel1}.setSelection(tab.menuItem);
                            
                        });
                    }
                
                    tabPanel.setActiveTab(tab);
                }
            </script>
        </ext:XScript>
        
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:Viewport runat="server" Layout="BorderLayout">
                <Items>
                    <ext:Panel 
                        runat="server"
                        Title="North" 
                        Region="North"
                        Split="true"
                        Height="50"
                        BodyPadding="6"
                        Html="Hlavička"
                        Collapsible="false"
                        Border="false"
                        Header="false"
                        AutoLoadingState="true" 
                        />
                    
                    <ext:Panel 
                        runat="server" 
                        Title="Menu" 
                        Width="250" 
                        Collapsible="true"
                        Split="true"
                        Header="false"
                        PaddingSpec="23 0 0 0"
                        Border="false"
                        
                        Region="West">
                        <Content>
                            <ext:Panel 
                                runat="server" 
                                Layout="Accordion" 
                                Split="true" 
                                Collapsible="true"
                                Header="false"
                                Border="false"
                               >
                                <Items>
                                    <ext:MenuPanel 
                                        runat="server" 
                                        Title="Obsah webu" 
                                        ID="MenuPanel1"
                                        
                                        Icon="Sitemap">
                                        <Menu runat="server">
                                            <Items>
                                                <ext:MenuItem runat="server" Text="Spr?va menu" Icon="SitemapColor">
                                                    <Listeners>
                                                        <Click Handler="addTab(#{TabPanel1}, 'idGgl', '/Admin/Content/AdminContentMenu/AdminContentMenu.aspx', this, 'Spr?va menu', '#SitemapColor');" />
                                                    </Listeners>
                                                </ext:MenuItem>
                                                <ext:MenuItem runat="server" Text="Spr?va obsahu" Icon="TextSignature" >
                                                    <Listeners>
                                                       <Click Handler="addTab(#{TabPanel1}, 'idGg2', '/Admin/Content/AdminContentArticles/AdmincContentArticles.aspx', this, 'Spr?va obsahu', '#TextSignature');" />
                                                    </Listeners>
                                                </ext:MenuItem>
                                                
                                                <ext:MenuItem runat="server" Text="Spr?va obr?zků" Icon="Pictures">
                                                    <Listeners>
                                                        <Click Handler="addTab(#{TabPanel1}, 'idGg3', '/Admin/Content/InProgress/InProgress.html', this, 'Spr?va obr?zků', '#Pictures');" />
                                                    </Listeners>
                                                </ext:MenuItem>
                                                <ext:MenuItem runat="server" Text="Spr?va souborů" Icon="FolderExplore">
                                                    <Listeners>
                                                        <Click Handler="addTab(#{TabPanel1}, 'idGg4', '/Admin/Content/InProgress/InProgress.html', this, 'Spr?va souborů', '#FolderExplore');" />
                                                    </Listeners>
                                                </ext:MenuItem>
                                                
                                            </Items>
                                               
                                        </Menu>                                        
                                    </ext:MenuPanel>
                                    
                                    <ext:MenuPanel 
                                        runat="server" 
                                        Title="U?ivatel" 
                                         
                                        Icon="ArrowSwitch">
                                        <Menu runat="server">
                                            <Items>
                                                <ext:MenuItem runat="server" Text="Item 1" Icon="ArrowRight" />
                                                <ext:MenuItem runat="server" Text="Item 2" Icon="ArrowRight" />
                                                <ext:MenuItem runat="server" Text="Item 3" Icon="ArrowRight" />
                                            </Items>
                                            
                                        </Menu>
                                    </ext:MenuPanel>
                                </Items>
                            </ext:Panel> 
                        </Content>
                    </ext:Panel>
    
    
    
                 
                    <ext:Panel 
                        runat="server" 
                        Title="Obsah" 
                        Header="False"
                        Layout="FitLayout"
                        Border="false"
                        Region="Center">
                        <Content>
                           <ext:TabPanel runat="server" Region="Center" ID="TabPanel1" Border="false">
                                <Items>
                                    <ext:Panel 
                                        runat="server" 
                                        Title="Home" 
                                        Border="false" 
                                        BodyPadding="6"
                                        ID="PnlCenter" 
                                        Html="<h1>V?choz? str?nka administrace</h1>"
                                        Closable="false" 
                                        Margins="0 0 0 0"
                                        Icon="House"
                                        />
                                </Items>
                            </ext:TabPanel>
                        </Content>
                    </ext:Panel>
                    
                </Items>
            </ext:Viewport>
            
        </form>
    </body>
    </html>


    AdmincContentArticles.aspx - Here is grid where i need hyperlink in column
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AdmincContentArticles.aspx.cs" Inherits="WebSystem.Admin.Content.AdminContentArticles.AdmincContentArticles" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Seznam čl?nků</title>
        <style>
            .x-grid-cell-name .x-grid-cell-inner {
                font-family : tahoma, verdana;
                display     : block;
                font-weight : normal;
                font-style  : normal;
                color       : #385F95;
                white-space : normal;
            }
            
            .x-grid-rowbody div {
                margin : 2px 5px 20px 5px !important;
                width  : 99%;
                color  : Scott;
            }
            
            .x-grid-row-expanded td.x-grid-cell{
                border-bottom-width:0px;
            }
        </style>
        <ext:XScript runat="server">
            <script>
                
                var AddNewTab = function (tabPanel, id, url, menuItem, title, iconCls)  {
                    
                    var tab = tabPanel.getComponent(id);
    
                    if (!tab) {
                        tab = tabPanel.add({ 
                            id       : id, 
                            title    : record.data.name, 
                            iconCls  : iconCls,
                            closable : true,
                            
                            menuItem : menuItem,
                            loader   : {
                                url      : '/Admin/Content/AdminContentArticlesEdit/AdminContentArticlesEdit.aspx?id='+record.data.id,
                                renderer : "frame",
                                loadMask : {
                                    showMask : true,
                                    msg      : "Nahr?v?m:  " + url + "..."
                                }
                            }
                        });
    
                        tab.on("activate", function (tab) {
                            
                            #{MenuPanel1}.setSelection(tab.menuItem);
                            
                        });
                    }
                
                    tabPanel.setActiveTab(tab);
                }
            </script>
        </ext:XScript>
       <script>
    
           
           var ActiveImage = function (value, metadata, record, rowIndex, colIndex, store) {
               img = "<img src=/icons/cross-png/ext.axd />";
               if (value) {
                   img = "<img src=/icons/accept-png/ext.axd />";
               }
               return img;
           };
    
           var refreshGrid = function (grid) {
               grid.getStore().reload();
           };
    
    
    
    
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" ID="ResourceManager1" />
            
            <asp:SqlDataSource 
                ID="SqlDataSource1" 
                runat="server" 
                ConnectionString="<%$ ConnectionStrings:RSEntities %>"
                SelectCommand="SELECT * FROM [articles]"
                />
            <ext:GridPanel 
                runat="server" 
                Title="Articles"
                Border="false"          
                AutoScroll="true"
                Animate="true"            
                Mode="Remote"
                ContainerScroll="false"
                id="GridArticles"
                >
                <Store>
                    <ext:Store runat="server" DataSourceID="SqlDataSource1" ID="Store1"   OnReadData="RefreshDataSet">
                        <Model>
                            <ext:Model runat="server" IDProperty="EmployeeID">
                                <Fields>
                                    <ext:ModelField Name="id" />
                                    <ext:ModelField Name="name" />
                                    <ext:ModelField Name="autor" />
                                    <ext:ModelField Name="date_update" Type="Date" />
                                    <ext:ModelField Name="visible" Type="Boolean" />
                                    <ext:ModelField Name="content_preview" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" DataIndex="id" Text="ID" Width="40" />
                        <ext:Column runat="server" ID="name" DataIndex="name" Text="N?zev" Width="400">
                            <%-- This column i need as hyperlink, which open new tab--%>
    
                        </ext:Column> 
                        <ext:Column runat="server" DataIndex="autor" Text="Autor" Width="40"  />
                        <ext:DateColumn runat="server" DataIndex="date_update" Text="Datum ?pravy" Width="80" Format="dd-MM-yyyy" />
                        <ext:Column runat="server" DataIndex="visible" Text="Aktivn?" Width="46">
                            <Renderer Fn="ActiveImage" />
                        </ext:Column>
                        <ext:CommandColumn runat="server" Width="50">
                            <Commands>
                                <ext:GridCommand Icon="NoteEdit" CommandName="EditArticle">
                                    <ToolTip Text="Editovat čl?nek" />
                                </ext:GridCommand>
                            </Commands>
                            <Listeners>
                                <Command Handler="#{DirectMethods}.DirectMethod(command, record.data.id)" />
                            </Listeners>
                        </ext:CommandColumn>
                    </Columns>
                </ColumnModel>
                <View>
                    <ext:GridView runat="server">
                        <GetRowClass Handler="return 'x-grid-row-expanded';" />
                        
                    </ext:GridView>
                            
                </View>
                <SelectionModel>
                    <ext:RowSelectionModel runat="server" Mode="Multi" />
                </SelectionModel>
                <Tools>
                    <ext:Tool Type="Plus">
                        <Listeners>
                            <Click Handler="App.direct.AddArticleItem();" />
                        </Listeners>
                        <ToolTips>
                            <ext:ToolTip runat="server" Html="Přidat nov? čl?nek" />
                        </ToolTips>
                    </ext:Tool>    
                    <ext:Tool Type="Refresh"  Handler="refreshGrid(#{GridArticles});" >
                        <ToolTips>
                            <ext:ToolTip runat="server" Html="Znovu nač?st menu" />
                        </ToolTips>
                    </ext:Tool>        
                </Tools>
            </ext:GridPanel>
        </form>
    </body>
    </html>

    AdmincContentArticles.aspx.cs - Only for full code example
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Ext.Net;
    using Ext.Net.Utilities;
    using System.Web.Configuration;
    using System.Data.SqlClient;
    using System.Data;
    
    
    namespace WebSystem.Admin.Content.AdminContentArticles
    {
        public partial class AdmincContentArticles : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
    
            public void RefreshDataSet(object sender, StoreReadDataEventArgs e)
            {
                Store store = this.GridArticles.GetStore();
                store.DataBind();
            }
            
            [DirectMethod]
            public void DirectMethod(string command, string record)
            {
                if (command == "EditArticle")
                {
                    
                    Window win = new Window()
                    {
                        ID = "Window2",
                        Title = "Editace čl?nku",
                        Width = Unit.Pixel(1000),
                        Height = Unit.Pixel(600),
                        Modal = true,
                        AutoRender = false,
                        Collapsible = true,
                        Maximizable = true,
                        Hidden = false,
                       
                        Loader = new ComponentLoader
                        {
                            Url = "/Admin/Content/AdminContentArticlesEdit/AdminContentArticlesEdit.aspx?id=" + record,
                            Mode = LoadMode.Frame,
                            LoadMask =
                            {
                                ShowMask = true
                            }
                        }
                       
    
                    };
                    
                    this.Form.Controls.Add(win);
                    win.Render();
                    win.Show();
            
                }
               
            }
            [DirectMethod]
            public void AddArticleItem()
            {
    
                Window win = new Window()
                {
                    ID = "Window3",
                    Title = "Přid?n? čl?nku",
                    Width = Unit.Pixel(1000),
                    Height = Unit.Pixel(600),
                    Modal = true,
                    AutoRender = false,
                    Collapsible = true,
                    Maximizable = true,
                    Hidden = false,
    
                    Loader = new ComponentLoader
                    {
                        Url = "/Admin/Content/AdminContentArticlesEdit/AdminContentArticlesEdit.aspx?id=0",
                        Mode = LoadMode.Frame,
                        LoadMask =
                        {
                            ShowMask = true
                        }
                    }
    
    
                };
    
                this.Form.Controls.Add(win);
                win.Render();
                win.Show();
                
            }
    
        }
    }
    Any ideas? Thanx for help...
    Last edited by Daniil; Nov 08, 2014 at 11:55 AM. Reason: [CLOSED]
  2. #2
    Hi,

    I don't know if it helps, but I do this frequently. The way I do it, is for the Column I use a column Renderer and set the Handler of Fn to be the JavaScript code to invoke, which will take the relevant data and return an HTML string representing my anchor link.

    I then watch for a click event and in JavaScript create an instance of Ext.window.Window and load my content in there (which might be an AJAX request to dynamically generate a component for example).

    On the JavaScript side, the renderer has a function signature something like this:

    renderer: function(value,metadata,record,rowIndex,colIndex,store,view)
    So you should have the data you need to formulate your URL.

    If you want to get fancy and avoid too many dom click event handlers on your page (especially if your grid has lots of rows) you can probably implement a live/delegation pattern to attach to a click event higher up the dom hierarchy and respond accordingly. I have done this in Ext.NET 1, and that code I aim to migrate to Ext.NET 2 next week actually so hopefully I will get some time to figure out how to port that delegation code forward.

    I hope that makes sense and helps!
    Last edited by anup; Nov 07, 2014 at 10:05 AM.
  3. #3
    Hi @Kajman,

    Welcome to the Ext.NET forums!

    Anup, thank you for your help! Actually, I just wanted to answer, but you were first:)

    Here is an example that partially demonstrates your suggestion that I vote up.

    Example
    <%@ Page Language="C#" %>
    
    <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", "Name 1" },
                    new object[] { "id2", "Name 2" },
                    new object[] { "id3", "Name 3" }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script>
            var linkRenderer = function (value, metadata, record) {
                return Ext.String.format("<a href=\"javascript:showEditWindow('{0}');\">{1}<a/>", record.getId(), value);
            };
    
            var showEditWindow = function (id) {
                alert("Show the edit window for the record with id - " + id);
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:GridPanel ID="GridPanel1" runat="server">
                <Store>
                    <ext:Store runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="id" />
                                    <ext:ModelField Name="name" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="Name" DataIndex="name">
                            <Renderer Fn="linkRenderer" />
                        </ext:Column>
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  4. #4

    Hi

    Thank you for your welcome Daniil and thank you both for your help.

    If somebody have same problem, here is finaly solution:

    JavaScript
                var linkRenderer = function (value, metadata, record) {
                    return Ext.String.format("<a href=\"javascript:addUserTab('{0}','{1}');\">{1}<a/>", record.data.id, record.data.name);
                }
    
                
                function addUserTab(id,title){
                    var tabPanel = window.parent.App.TabPanel1; //get from iframe  tabpanel located in parent window 
                    var tab = tabPanel.getComponent('user_'+id);
                    var url1 = '/Admin/Content/AdminContentArticlesEdit/AdminContentArticlesEdit.aspx?id='+id;
                    if (!tab) {
                        tab = tabPanel.add({ 
                            id       : 'user_'+id, 
                            title    : title, 
                            iconCls  : '#TextSignature',
                            closable : true,
                            //menuItem : menuItem,
                            loader   : {
                                url      : url1,
                                renderer : "frame",
                                loadMask : {
                                    showMask : true,
                                    msg      : "Nahr?v?m:  " + url1 + "..."
                                }
                            }
                        });
                        /*
                        tab.on("activate", function (tab) {
                            
                            #{MenuPanel1}.setSelection(tab.menuItem);
                            
                        });*/
                    }
                
                    tabPanel.setActiveTab(tab);
                }

    Column in grid panel
                         <ext:Column runat="server" ID="name" DataIndex="name" Text="N?zev" Width="400">
                            <Renderer Fn="linkRenderer" />
                        </ext:Column>
    Daniil, please, mark this thread as closed
    Thanx again.

Similar Threads

  1. Replies: 0
    Last Post: Nov 20, 2013, 6:51 AM
  2. [CLOSED] GridPanel column hyperlink tooltip
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Nov 07, 2012, 10:42 PM
  3. [CLOSED] GridPanel insertRecord javascript method function not found
    By Daly_AF in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 05, 2012, 3:25 PM
  4. [CLOSED] GridPanel. Force renderer function of column
    By supera in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 25, 2012, 5:45 PM
  5. Replies: 0
    Last Post: May 21, 2012, 5:16 AM

Posting Permissions