What's New?

[CLOSED] Need help with gridpanel

  1. #1
    Nov 16, 2010, 12:58 PM

    [CLOSED] Need help with gridpanel

    I have a gridpanel in which the rows have 1 to N child records related to them. There is column in this gridpanel in which, if the row has only one child related, i show the description of this child, and if it has more than one, i show a "warning" icon and when user hovers this icon with the mouse i show another little grid above the icon with detailed description of the childs.
    In our application that we are migrating to coolite, we used gridview, rowdatabound event and some javascript to accomplish this. How do you suggest me to do at least something similar to this with coolite? I browsed the examples to get some ideas but found nothing similar...

    Here are some pictures to help you understand what i want:

    Click image for larger version.  Name: Main.jpg  Views: 160  Size: 38.5 KB  ID: 1898 Click image for larger version.  Name: Detail.jpg  Views: 163  Size: 36.2 KB  ID: 1899

    In the example, all rows, except the one with date 05/02/10 have only one child. Then i show this "!" icon in the 05/02/10 row and in mouse hover of this icon i show the little grid in the second picture listing the datails.
    Last edited by Daniil; Nov 17, 2010 at 10:42 AM. Reason: [CLOSED]
  2. #2
    Nov 16, 2010, 2:51 PM
    Hi Pablo,

    I would suggest you to use a custom renderer and ToolTip for GridPanel's cells.

    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[] {"name1", "['child1', 'child2']" },
                                        new object[] {"name2", "['child1']", "child1" },
                                        new object[] {"name3", "[]" },
                                        new object[] {"name4", "['child1', 'child2', 'child3']" }
                                    };
            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 childrenRenderer = function(value, metadata, record) {
            var numberOfchildren = record.get('numberOfchildren');
            if (numberOfchildren > 1) {
                metadata.css = "myClass";
                value = "Give me mouse"    
            } else if (numberOfchildren == 1) {
                value = Ext.decode(value)[0];    
            } else {
                value = 'no children'; 
            }
            return value;
        };
         
        var beforeShowTip = function () {
            var rowIndex = GridPanel1.getView().findRowIndex(this.triggerElement),
                record = GridPanel1.getStore().getAt(rowIndex), 
                cellIndex = GridPanel1.getView().findCellIndex(this.triggerElement),
                fieldName = GridPanel1.getColumnModel().getDataIndex(cellIndex);
            if (fieldName != "children" || record.get("numberOfchildren") <= 1) {
                return false;
            } else {
                this.record = record;    
            }    
        };
         
        var showTip = function () {
            this.body.dom.innerHTML = this.record.get("children");
        };
    </script>
 
    <style type="text/css">
        .myClass {
            background: url(/icons/information-png/ext.axd) no-repeat right;
        }
    </style>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server">
            <Listeners>
                <DocumentReady Handler="CellTip.render(Ext.getBody());" />
            </Listeners>
        </ext:ResourceManager>
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="name" />
                                <ext:RecordField Name="children" />
                                <ext:RecordField Name="numberOfchildren">
                                    <Convert Handler="var children = Ext.decode(record[1]); return children.length;" />
                                </ext:RecordField>
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Name" DataIndex="name" />
                    <ext:Column Header="Children" DataIndex="children">
                        <Renderer Fn="childrenRenderer"/>
                    </ext:Column>
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
        <ext:ToolTip
            ID="CellTip"
            runat="server"
            Target="={GridPanel1.getView().mainBody}"
            Delegate=".x-grid3-cell"
            TrackMouse="true">
            <Listeners>
                <BeforeShow Fn="beforeShowTip"/>
            </Listeners>
            <Listeners>
                <Show Fn="showTip" />
            </Listeners>
        </ext:ToolTip>
    </form>
</body>
</html>
    Last edited by Daniil; Nov 15, 2011 at 5:48 PM.
  3. #3
    Nov 16, 2010, 4:46 PM
    Almost perfect Daniil, that was exactly what i needed. Only one problem with your example: if, the first time you load the page, you mouse hover a childless column, you'll get a javascript error ('this.body' is null or not an object). After you mouse hover one column with children at least once everything functions normally.
  4. #4
    Nov 16, 2010, 5:01 PM
    Oh, I forgot about this. Seems I have already reported about this bug to ExtJS team...not sure.

    Please use the following workaround.

    Workaround
    <ext:ResourceManager runat="server">
    <Listeners>
        <DocumentReady Handler="CellTip.render(Ext.getBody());" />
    </Listeners>
</ext:ResourceManager>
  5. #5
    Nov 17, 2010, 9:49 AM
    Thank you very much Daniil. Solved. Best regards.

Tags for this Thread

Posting Permissions