What's New?

[CLOSED] Random Request

  1. #1
    Jun 09, 2011, 7:15 PM

    [CLOSED] Random Request

    Please see the attachment. I would like to add an icon to the numbered rows when you mouse over the number cell, or single click the row.Click image for larger version.  Name: numbered row.png  Views: 139  Size: 54.2 KB  ID: 2845
    Last edited by Daniil; Jun 13, 2011 at 3:58 PM. Reason: [CLOSED]
  2. #2
    Jun 10, 2011, 8:17 AM
    Hi,

    Please investigate the example.

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

    protected void ShowAcceptUrl(object sender, DirectEventArgs e)
    {
        X.Msg.Alert("Accept Url", this.ResourceManager1.GetIconUrl(Icon.Accept)).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 myNumberer = function(value, metadata, record, rowIndex) {
            var handlers = 'onmouseenter = "onMouseEnter(event)"';
            handlers += ' onmouseleave = "onMouseLeave(event)"';
            metadata.cellAttr = handlers;
            return rowIndex + 1;
        }

        var onMouseEnter = function(e) {
            var row = GridPanel1.view.findRowIndex(e.target),
                td = Ext.get(e.target);
            td.child("div").update("");
            td.addClass("my-image");
        }

        var onMouseLeave = function(e) {
            var row = GridPanel1.view.findRowIndex(e.target);
            GridPanel1.view.refreshRow(row);
        }
        
    </script>

    <style type="text/css">
        .my-grid .x-grid3-td-numberer.my-image {
            background-image: url(/icons/accept-png/ext.axd);
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:GridPanel 
        ID="GridPanel1" 
        runat="server" 
        AutoHeight="true" 
        Cls="my-grid">
        <Store>
            <ext:Store runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="test1" />
                            <ext:RecordField Name="test2" />
                            <ext:RecordField Name="test3" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:RowNumbererColumn>
                    <Renderer Fn="myNumberer" />
                </ext:RowNumbererColumn>
                <ext:Column Header="Test1" DataIndex="test1" />
                <ext:Column Header="Test2" DataIndex="test2" />
                <ext:Column Header="Test3" DataIndex="test3" />
            </Columns>
        </ColumnModel>
    </ext:GridPanel>
    <ext:Button runat="server" Text="Show Accept Url" OnDirectClick="ShowAcceptUrl" />
    </form>
</body>
</html>
    To apply it on row click please use GridPanel's Click listener.
  3. #3
    Jun 10, 2011, 2:53 PM

    Random Request

    Hi Daniil,

    I tried to run this sample, but while mouse move over grid row number column it is throwing error like "null" is not null or object at

    "td.child("div").update("");"


    Quote Originally Posted by Daniil View Post
    Hi,

    Please investigate the example.

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

    protected void ShowAcceptUrl(object sender, DirectEventArgs e)
    {
        X.Msg.Alert("Accept Url", this.ResourceManager1.GetIconUrl(Icon.Accept)).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 myNumberer = function(value, metadata, record, rowIndex) {
            var handlers = 'onmouseenter = "onMouseEnter(event)"';
            handlers += ' onmouseleave = "onMouseLeave(event)"';
            metadata.cellAttr = handlers;
            return rowIndex + 1;
        }

        var onMouseEnter = function(e) {
            var row = GridPanel1.view.findRowIndex(e.target),
                td = Ext.get(e.target);
            td.child("div").update("");
            td.addClass("my-image");
        }

        var onMouseLeave = function(e) {
            var row = GridPanel1.view.findRowIndex(e.target);
            GridPanel1.view.refreshRow(row);
        }
        
    </script>

    <style type="text/css">
        .my-grid .x-grid3-td-numberer.my-image {
            background-image: url(/icons/accept-png/ext.axd);
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:GridPanel 
        ID="GridPanel1" 
        runat="server" 
        AutoHeight="true" 
        Cls="my-grid">
        <Store>
            <ext:Store runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="test1" />
                            <ext:RecordField Name="test2" />
                            <ext:RecordField Name="test3" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:RowNumbererColumn>
                    <Renderer Fn="myNumberer" />
                </ext:RowNumbererColumn>
                <ext:Column Header="Test1" DataIndex="test1" />
                <ext:Column Header="Test2" DataIndex="test2" />
                <ext:Column Header="Test3" DataIndex="test3" />
            </Columns>
        </ColumnModel>
    </ext:GridPanel>
    <ext:Button runat="server" Text="Show Accept Url" OnDirectClick="ShowAcceptUrl" />
    </form>
</body>
</html>
    To apply it on row click please use GridPanel's Click listener.
  4. #4
    Jun 10, 2011, 5:48 PM
    What browser do you test under?
  5. #5
    Jun 13, 2011, 5:21 PM

    Random Request

    Hi Daniil,

    I am testing it in IE7.

    Quote Originally Posted by Daniil View Post
    What browser do you test under?
  6. #6
    Jun 13, 2011, 5:35 PM
    ,Here is the modified code, works fine under IE7,8,9.

    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", "test13" },
                new object[] { "test12", "test22", "test23" },
                new object[] { "test13", "test32", "test33" }
            };
            store.DataBind();
        }
    }
 
    protected void ShowAcceptUrl(object sender, DirectEventArgs e)
    {
        X.Msg.Alert("Accept Url", this.ResourceManager1.GetIconUrl(Icon.Accept)).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 myNumberer = function (value, metadata, record, rowIndex) {
            var handlers = 'onmouseenter = "onMouseEnter(event)"';
            handlers += ' onmouseleave = "onMouseLeave(event)"';
            metadata.cellAttr = handlers;
            return rowIndex + 1;
        }
 
        var onMouseEnter = function (e) {
            var target = Ext.get(e.target || Ext.EventObject.getTarget()),
                row = GridPanel1.view.findRowIndex(target);
            if (target.is("div")) {
                target.update("");
                target.parent("td").addClass("my-image");
            } else if (target.is("td")) {
                target.child("div").update("");
                target.addClass("my-image");
            }
        }
 
        var onMouseLeave = function (e) {
            var target = e.target || Ext.EventObject.getTarget(),
                row = GridPanel1.view.findRowIndex(target);
            GridPanel1.view.refreshRow(row);
        }
         
    </script>
 
    <style type="text/css">
        .my-grid .x-grid3-td-numberer.my-image {
            background-image: url(/icons/accept-png/ext.axd);
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:GridPanel
        ID="GridPanel1"
        runat="server"
        AutoHeight="true"
        Cls="my-grid">
        <Store>
            <ext:Store runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="test1" />
                            <ext:RecordField Name="test2" />
                            <ext:RecordField Name="test3" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:RowNumbererColumn>
                    <Renderer Fn="myNumberer" />
                </ext:RowNumbererColumn>
                <ext:Column Header="Test1" DataIndex="test1" />
                <ext:Column Header="Test2" DataIndex="test2" />
                <ext:Column Header="Test3" DataIndex="test3" />
            </Columns>
        </ColumnModel>
    </ext:GridPanel>
    <ext:Button runat="server" Text="Show Accept Url" OnDirectClick="ShowAcceptUrl" />
    </form>
</body>
</html>

Similar Threads

  1. Ext.Net word garbled in IIS7,Unfortunately it's random!!!
    By devil in forum 1.x Help
    Replies: 12
    Last Post: Dec 17, 2013, 3:42 AM
  2. [CLOSED] Request for SVN addresses
    By thchuong in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 03, 2012, 7:16 AM
  3. Using Ext.net 1.4 some random garbled
    By lionel in forum 1.x Help
    Replies: 1
    Last Post: Jul 12, 2012, 9:49 AM
  4. [CLOSED] Ext.net random id in querystring
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Sep 15, 2011, 10:27 AM
  5. [CLOSED] Request for a gridpanel
    By 78fede78 in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Dec 21, 2010, 9:46 AM

Tags for this Thread

Posting Permissions