[CLOSED] [1.0] Grid Row Expander - How to remove + - on rows that can not be expanded

  1. #1

    [CLOSED] [1.0] Grid Row Expander - How to remove + - on rows that can not be expanded

    I have taken your example https://examples1.ext.net/#/GridPanel/RowExpander/Dynamic_GridPanels/
    and made a slight change to it. I have added a new field called SubCount to the store:

    code from Page_Load
            
    For i As Integer = 1 To 10
                data.Add(New With { _
                 Key .ID = "S" & i, _
                 Key .Name = "Supplier " & i, _
                 Key .SubCount = i Mod 2 _
                })
            Next
    MarkUP
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:JsonReader IDProperty="ID">
                        <Fields>
                            <ext:RecordField Name="ID" />
                            <ext:RecordField Name="Name" />
                            <ext:RecordField Name="SubCount" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
    And then I have altered the RowExpander <BeforeEvent> so that it will not execute the DirectEvent when SubCount = 0.

    RowExpander Markup for DirectEvent
    <BeforeExpand 
       OnEvent="BeforeExpand" 
       Before="if (record.data.SubCount === 0) { return false; } else { return !body.rendered; }" 
       Success="body.rendered=true;">
       <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="={GridPanel1.body}" />
       <ExtraParams>
           <ext:Parameter Name="id" Value="record.id" Mode="Raw" />
           <ext:Parameter Name="grid" Value="ext" Mode="value" />
       </ExtraParams>
    </BeforeExpand>
    Works as I expect it to. The last step is if record.data.SubCount = 0, I do not want the + - to show.

    How do I clear the background image for these records when the grid loads the rows?

    Thank You~
    Last edited by Daniil; Oct 01, 2010 at 3:39 PM. Reason: [CLOSED]
  2. #2
    Meant to include this attachment.
    Attached Thumbnails Click image for larger version. 

Name:	RowExpander Clear Background.gif 
Views:	461 
Size:	10.0 KB 
ID:	1679  
  3. #3
    Hi,

    Please look at the following example based on this
    https://examples1.ext.net/#/GridPane...ic_GridPanels/

    The key points:

    1. Added Number here:
    for (int i = 1; i <= 10; i++)
            {
                data.Add(new { ID = "S" + i, Name = "Supplier " + i, Number = i });
            }
    2. Added this thing
    <script type="text/javascript">
        Ext.grid.RowExpander.override({
            renderer: function(v, p, record) {
                if (record.get('Number') % 2 == 0) {
                    p.cellAttr = 'rowspan="2"';
                    return '<div class="x-grid3-row-expander"> </div>';
                }
                return '';
            }
        });
    </script>
    Example's full code
    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Import Namespace="ListView=Ext.Net.ListView" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (X.IsAjaxRequest)
            {
                //We do not need to DataBind on an DirectEvent
                return;
            }
    
            List<object> data = new List<object>();
    
            for (int i = 1; i <= 10; i++)
            {
                data.Add(new { ID = "S" + i, Name = "Supplier " + i, Number = i });
            }
    
            this.Store1.DataSource = data;
            this.Store1.DataBind();
        }
    
        private void RemoveFromCache(string id)
        {
            X.Js.Call("removeFromCache", id);
        }
    
        private void AddToCache(string id)
        {
            X.Js.Call("addToCache", id);
        }
    
        protected void BeforeExpand(object sender, DirectEventArgs e)
        {
            string id = e.ExtraParams["id"];
    
            Store store = new Store { ID = "StoreRow_" + id };
    
            JsonReader reader = new JsonReader();
            reader.IDProperty = "ID";
            reader.Fields.Add("ID", "Name");
            store.Reader.Add(reader);
    
            List<object> data = new List<object>();
    
            for (int i = 1; i <= 10; i++)
            {
                data.Add(new { ID = "P" + i, Name = "Product " + i });
            }
    
            store.DataSource = data;
    
            this.RemoveFromCache(store.ID);
            store.Render();
            this.AddToCache(store.ID);
    
            GridPanel grid = new GridPanel
            {
                ID = "GridPanelRow_" + id,
                StoreID = "{raw}StoreRow_" + id,
                Height = 200
            };
    
            grid.ColumnModel.Columns.Add(new Column
                                             {
                                                 Header = "Products's Name",
                                                 DataIndex = "Name"
                                             });
            grid.ColumnModel.ID = "GridPanelRowCM_" + id;
    
            grid.View.Add(new Ext.Net.GridView { ID = "GridPanelRowView_" + id, ForceFit = true });
    
            //important
            X.Get("row-" + id).SwallowEvent(new string[] { "click", "mousedown", "mouseup", "dblclick" }, true);
    
            this.RemoveFromCache(grid.ID);
            grid.Render("row-" + id, RenderMode.RenderTo);
            this.AddToCache(grid.ID);
        }
        
    </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>RowExpander with GridPanel - Ext.NET Examples</title>
        <ext:ResourcePlaceHolder runat="server" Mode="Script" />
    
    <script type="text/javascript">
        Ext.grid.RowExpander.override({
            renderer: function(v, p, record) {
                if (record.get('Number') % 2 == 0) {
                    p.cellAttr = 'rowspan="2"';
                    return '<div class="x-grid3-row-expander">&#160;</div>';
                }
                return '';
            }
        });
    </script>
    
        <script type="text/javascript">
            window.lookup = [];
    
            var clean = function() {
                if (window.lookup.length > 0) {
                    RowExpander1.collapseAll();
    
                    Ext.each(window.lookup, function(control) {
                        if (control) {
                            control.destroy();
                        }
                    });
    
                    window.lookup = [];
                }
            };
    
            var removeFromCache = function(c) {
                var c = window[c];
                window.lookup.remove(c);
    
                if (c) {
                    c.destroy();
                }
            };
    
            var addToCache = function(c) {
                window.lookup.push(window[c]);
            };
        </script>
    
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <h1>
            Row Expander Plugin with GridPanel</h1>
        <p>
            The caching is presented, GridPanel renders once only (until view refresh)</p>
        <ext:Store ID="Store1" runat="server">
            <Reader>
                <ext:JsonReader IDProperty="ID">
                    <Fields>
                        <ext:RecordField Name="ID" />
                        <ext:RecordField Name="Name" />
                        <ext:RecordField Name="Number" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store>
        <ext:GridPanel 
            ID="GridPanel1" 
            runat="server" 
            StoreID="Store1" 
            TrackMouseOver="false"
            Title="Expander Rows with ListView" 
            Collapsible="true" 
            AnimCollapse="true" 
            Icon="Table"
            Width="600" 
            Height="600">
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Supplier" DataIndex="Name" />
                </Columns>
            </ColumnModel>
            <View>
                <ext:GridView runat="server" ForceFit="true">
                    <Listeners>
                        <BeforeRefresh Fn="clean" />
                    </Listeners>
                </ext:GridView>
            </View>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" />
            </SelectionModel>
            <Plugins>
                <ext:RowExpander ID="RowExpander1" runat="server" EnableCaching="true">
                    <Template runat="server">
                        <Html>
                        <div id="row-{ID}" style="background-color: white;"></div>
                        </Html>
                    </Template>
                    <DirectEvents>
                        <BeforeExpand 
                            OnEvent="BeforeExpand" 
                            Before="return !body.rendered;" 
                            Success="body.rendered=true;">
                            <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="={GridPanel1.body}" />
                            <ExtraParams>
                                <ext:Parameter Name="id" Value="record.id" Mode="Raw" />
                            </ExtraParams>
                        </BeforeExpand>
                    </DirectEvents>
                </ext:RowExpander>
            </Plugins>
        </ext:GridPanel>
        </form>
    </body>
    </html>
  4. #4
    Perfect Thanks!
  5. #5
    It is much easier with Ext.NET v2.
    http://forums.ext.net/showthread.php?26758

Similar Threads

  1. Replies: 11
    Last Post: May 16, 2012, 6:34 PM
  2. [CLOSED] RowExpander scroll to top of grid when expanded
    By rthiney in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 30, 2011, 1:56 PM
  3. [CLOSED] Has't refresh PagingToolbar after remove rows from store.
    By ViDom in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Oct 18, 2011, 1:37 PM
  4. [CLOSED] Remove/Modifed the Group Rows in Store using Javascript
    By speedstepmem4 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 03, 2010, 9:48 AM
  5. GridPanel dynamic add and remove rows
    By OneWingedAngel in forum 1.x Help
    Replies: 0
    Last Post: Dec 06, 2008, 5:18 PM

Posting Permissions