[CLOSED] RowBody -> GetAdditionalData

  1. #1

    [CLOSED] RowBody -> GetAdditionalData

    Is possible to show additional info above data row using ext:RowBody ?
    Or, at least, to make a border around data row + additional info ?

    <ext:RowBody runat="server" >
        <GetAdditionalData Fn="getAdditionalData"  />
    </ext:RowBody>
    Thanks
    Last edited by Daniil; Sep 12, 2012 at 12:13 PM. Reason: [CLOSED]
  2. #2
    Hi @watteeuw,

    Quote Originally Posted by watteeuw View Post
    Is possible to show additional info above data row using ext:RowBody ?
    There is no such built-in option, but it is possible if override the mutateMetaRowTpl function of the RowBody.

    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[] { "test1" },
                    new object[] { "test2" },
                    new object[] { "test3" }
                };
                store.DataBind();
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script type="text/javascript">
            var mutateMetaRowTpl = function(metaRowTpl) {
                //metaRowTpl.push('{[this.getRowBody(values)]}');
                metaRowTpl.unshift('{[this.getRowBody(values)]}');
            };
    
            var getAdditionalData = function () {
                var o = Ext.grid.feature.RowBody.prototype.getAdditionalData.apply(this, arguments);
    
                return Ext.apply(o, {
                    rowBody: '<b>Some row body</b>'
                });
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
    
        <ext:GridPanel ID="GridPanel1" runat="server">
            <Store>
                <ext:Store runat="server" PageSize="3">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="test" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Test" DataIndex="test" />
                </Columns>
            </ColumnModel>
            <Features>
                <ext:RowBody runat="server">
                    <CustomConfig>
                        <ext:ConfigItem Name="mutateMetaRowTpl" Value="mutateMetaRowTpl" Mode="Raw" />
                    </CustomConfig>
                    <GetAdditionalData Fn="getAdditionalData" />
                </ext:RowBody>
            </Features>
        </ext:GridPanel>
    </body>
    </html>
    Quote Originally Posted by watteeuw View Post
    Or, at least, to make a border around data row + additional info ?
    Please use rowBodyCls.

    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[] { "test1" },
                    new object[] { "test2" },
                    new object[] { "test3" }
                };
                store.DataBind();
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <style type="text/css">
            .my-row-body .x-grid-cell-rowbody {
                border: 2px solid;
            }
        </style>
    
        <script type="text/javascript">
            var getAdditionalData = function () {
                var o = Ext.grid.feature.RowBody.prototype.getAdditionalData.apply(this, arguments);
    
                return Ext.apply(o, {
                    rowBody: '<b>Some row body</b>',
                    rowBodyCls: 'my-row-body'
                });
            };
        </script>    
    </head>
    <body>
        <ext:ResourceManager runat="server" />
    
        <ext:GridPanel ID="GridPanel1" runat="server">
            <Store>
                <ext:Store runat="server" PageSize="3">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="test" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Test" DataIndex="test" />
                </Columns>
            </ColumnModel>
            <Features>
                <ext:RowBody runat="server">
                    <GetAdditionalData Fn="getAdditionalData" />
                </ext:RowBody>
            </Features>
        </ext:GridPanel>
    </body>
    </html>
  3. #3
    mutateMetaRowTpl works great
    rowBodyCls makes border to additional data, only. I needed to be in same box Data row+ additional row.
    But mutateMetaRowTpl is enough for me.

    Thanks for fast solutions!

    Daniil;90529]Hi @watteeuw,
  4. #4
    It is also possible.

    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[] { "test", "test" },
                    new object[] { "test", "test" },
                    new object[] { "test", "test" }
                };
                store.DataBind();
            }
        }
    </script>
     
    <!DOCTYPE html>
     
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
     
        <style type="text/css">
            .my-row-body .x-grid-cell-rowbody {
                border-style: solid;
                border-width: 0px 2px 2px;
            }
            
            .my-grid .x-grid-cell {
                border-style: solid;
                border-width: 2px 0px 0px;
                border-color: Black;
            }
            
            .my-grid .x-grid-cell-first {
                border-left-width: 2px;
                border-color: Black;
            }
            
            .my-grid .x-grid-cell-last {
                border-right-width: 2px;
                border-color: Black;
            }
        </style>
     
        <script type="text/javascript">
            var getAdditionalData = function () {
                var o = Ext.grid.feature.RowBody.prototype.getAdditionalData.apply(this, arguments);
     
                return Ext.apply(o, {
                    rowBody: '<b>Some row body</b>',
                    rowBodyCls: 'my-row-body'
                });
            };
        </script>    
    </head>
    <body>
        <ext:ResourceManager runat="server" />
     
        <ext:GridPanel ID="GridPanel1" runat="server" Cls="my-grid">
            <Store>
                <ext:Store runat="server" PageSize="3">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="test1" />
                                <ext:ModelField Name="test2" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Test 1" DataIndex="test1" />
                    <ext:Column runat="server" Text="Test 2" DataIndex="test2" />
                </Columns>
            </ColumnModel>
            <Features>
                <ext:RowBody runat="server">
                    <GetAdditionalData Fn="getAdditionalData" />
                </ext:RowBody>
            </Features>
        </ext:GridPanel>
    </body>
    </html>
  5. #5
    Thanks Daniil !

    Works, but it's a small issue:
    First cell and last cell are not always first & last visible if First/Last columns are hidden.

    But is more then ok.

    Quote Originally Posted by Daniil View Post
    It is also possible.
  6. #6
    Quote Originally Posted by watteeuw View Post
    First cell and last cell are not always first & last visible if First/Last columns are hidden.
    Interesting. Then, maybe, it would be better to just avoid right and left borders.

Similar Threads

  1. Conditional RowBody Expand - Not working in 2.0?
    By Tbaseflug in forum 2.x Help
    Replies: 3
    Last Post: May 22, 2012, 9:42 PM
  2. Hide RowBody on GP Edit
    By Tbaseflug in forum 1.x Help
    Replies: 5
    Last Post: Dec 30, 2008, 1:12 PM

Tags for this Thread

Posting Permissions