What's New?

[CLOSED] GridPanel column hyperlink tooltip

  1. #1
    Feb 24, 2012, 7:40 PM

    [CLOSED] GridPanel column hyperlink tooltip

    Hi,

    I have the code below. I'd like to present a little tooltip on mouse hovering over the link. Putting the <b>title</b> attribute in the anchor element didn't work for some reason. Please recommend a good approach.

    Thanks,

    Vadym

    <script type="text/javascript">
var linkRenderer = function (value, metadata, record) {
    value = String.format('<a href="#" onClick="Ext.net.DirectMethods.ViewDocument(1, {isUpload: true});" target="_top">{0}</a>', value);
    return value;
 };
</script>
    <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
    <Store>
        <ext:Store ID="Store1" runat="server">
            <Reader>
                <ext:JsonReader>
                    <Fields>
                        <ext:RecordField Name="Id" />
                        <ext:RecordField Name="DocName" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store>
    </Store>
    <ColumnModel runat="server">
        <Columns>
            <ext:Column ColumnID="Id" Header="Id" DataIndex="Id" Hidden="true" />
            <ext:Column ColumnID="DocName" Header="Document" DataIndex="DocName">
                <Renderer Fn="linkRenderer" />
            </ext:Column>
        </Columns>
    </ColumnModel>
</ext:GridPanel>
    Last edited by Daniil; Feb 27, 2012 at 1:56 PM. Reason: [CLOSED]
  2. #2
    Feb 24, 2012, 8:27 PM
    Setting the .title attribute seems to work ok in the following sample.

    Example

    <%@ Page Language="C#" %>

<%@ Import Namespace="System.Collections.Generic" %>
<%@ Import Namespace="Newtonsoft.Json" %>


<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        var projects = new List<Project>();


        projects.AddRange(new Project[] { 
            new Project { 
                ID = 1,
                Name = "Project A"
            },
            new Project {
                ID = 2,
                Name = "Project B"
            },
            new Project {
                ID = 3,
                Name = "Project C"
            }
        });


        this.strProjects.DataSource = projects;
        this.strProjects.DataBind();
    }


    public class Project
    {
        public int ID { get; set; }
        public string Name { get; set; }
    }
</script>
<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET Example</title>


    <script type="text/javascript">
        var nameRenderer = function (value) {
            return String.format('<a href="/people/{0}" title="Name : {0}">{0}</a>', value);
        };
    </script>
</head>
<body>
<form runat="server">
    <ext:ResourceManager runat="server" />
    
    <ext:GridPanel 
        runat="server" 
        Title="Example" 
        Height="350" 
        Width="500"
        AutoExpandColumn="Name">
        <Store>
            <ext:Store ID="strProjects" runat="server">
                <Reader>
                    <ext:JsonReader IDProperty="ID">
                        <Fields>
                            <ext:RecordField Name="ID" Type="Int" />
                            <ext:RecordField Name="Name" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Header="ID" DataIndex="ID" />
                <ext:Column Header="Name" DataIndex="Name">
                    <Renderer Fn="nameRenderer" />
                </ext:Column>
            </Columns>
        </ColumnModel>
    </ext:GridPanel>
</form>
</body>
</html>
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Feb 27, 2012, 1:21 PM
    Thanks Geoffrey!

    Your example works fine. I will try to check what's the difference in my setup to make it work. You can close this thread.

    Vadym
  4. #4
    Nov 07, 2012, 7:30 AM

    Is this possible the give tooltip for Header

    Quote Originally Posted by geoffrey.mcgill View Post
    Setting the .title attribute seems to work ok in the following sample.

    Example
    Know in the current code i change 
<ColumnModel runat="server">
            <Columns>
                <ext:Column runat="server" Header="ID" DataIndex="ID" >               
                </ext:Column>
                <ext:Column runat="server" Header="Name" DataIndex="Name">
                    <Renderer Fn="nameRenderer" />
                </ext:Column>
                <ext:Column ID="Column1" runat="server" Header="Testing for tooltip on the Header." DataIndex="ID" >               
                </ext:Column>
            </Columns>
 </ColumnModel>
    The Third Column header is big, so i want tooltip on the.
    Help me
    Last edited by nikhilbh85; Nov 07, 2012 at 7:34 AM.
  5. #5
    Nov 07, 2012, 1:47 PM
    Quote Originally Posted by nikhilbh85 View Post
    The Third Column header is big, so i want tooltip on the.
    Help me
    Hi @nikhilbh85,

    Welcome the Ext.NET forums!

    Please start a new forum thread for your question.
  6. #6
    Nov 07, 2012, 2:45 PM

    Tell me how to create new Forum therad.

    Quote Originally Posted by Daniil View Post
    Hi @nikhilbh85,

    Welcome the Ext.NET forums!

    Please start a new forum thread for your question.
    hey Daniil,
    thanks for reply, but can you help me where i can get option the create new forum thread .
  7. #7
    Nov 07, 2012, 2:48 PM

    Is this possible the give tooltip for Header.

    remove this code
    Last edited by nikhilbh85; Nov 07, 2012 at 2:49 PM. Reason: Wrong Code
  8. #8
    Nov 07, 2012, 9:19 PM
    Quote Originally Posted by nikhilbh85 View Post
    hey Daniil,
    thanks for reply, but can you help me where i can get option the create new forum thread .
    Sure. A green "+ Post New Thread" button at the top on the left of any Community or General forum.

    Please note that only Premium Support Subscription owners can start new threads in the Premium forums.
  9. #9
    Nov 07, 2012, 10:42 PM
    Quote Originally Posted by nikhilbh85 View Post
    hey Daniil,
    thanks for reply, but can you help me where i can get option the create new forum thread .
    Quote Originally Posted by Daniil View Post
    Sure. A green "+ Post New Thread" button at the top on the left of any Community or General forum.

    Please note that only Premium Support Subscription owners can start new threads in the Premium forums.
    Thanks Daniil.........
    i post two new Thread
    http://forums.ext.net/showthread.php...r-of-gridpanel and
    http://forums.ext.net/showthread.php...-CommandColumn
    please help me in that. as soon as possible.

Similar Threads

  1. How to add hyperlink to all the cells in single column in gridpanel
    By Binai in forum 1.x Help
    Replies: 0
    Last Post: May 21, 2012, 5:16 AM
  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] How to turn a Grid column text into a hyperlink on the client?
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Feb 22, 2012, 5:43 PM
  4. [CLOSED] GridPanel Column Tooltip
    By sadaf in forum 1.x Legacy Premium Help
    Replies: 10
    Last Post: Feb 02, 2011, 10:34 AM
  5. Show tooltip in gridpanel if column is too small
    By apre in forum 1.x Help
    Replies: 0
    Last Post: Oct 27, 2009, 11:47 AM

Posting Permissions