[CLOSED] Rowexpander toggles on checkbox click

  1. #1

    [CLOSED] Rowexpander toggles on checkbox click

    Hi,

    I have a grid with a CheckColum and RowExpander plugin.

    If my node was expanded (content loaded from the server in), and when I click on a checkbox. The RowExpander toggles for no reason!?

    Is there any way to avoid that; the simbol remains "-" ("expanded") but the content vanish.

    Thanks in advance.
    Last edited by geoffrey.mcgill; Dec 19, 2010 at 4:54 AM. Reason: [CLOSED]
  2. #2
    Hi,

    Could you provide a simplified .aspx to reproduce? Please see Example (Very Helpful) here
    http://forums.ext.net/showthread.php...ing-New-Topics
  3. #3

    Here it is

    As you can see this is : https://examples1.ext.net/#/GridPane...ic_GridPanels/ with the very small change, like I stated above just added a CheckColum.

    <%@ 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, Selected= "True"});
            }
            
            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 id="Head1" runat="server">
        <title>RowExpander with GridPanel - Ext.NET Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
        
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="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 id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" 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" />
                        </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 ID="ColumnModel1" runat="server">
                    <Columns>
                         <ext:CheckColumn ColumnID="Select" Align="Center" Editable="true" MenuDisabled="true" Fixed="true" DataIndex="Selected">
                         </ext:CheckColumn>
                        <ext:Column Header="Supplier" DataIndex="Name" />
                    </Columns>
                </ColumnModel>
                <View>
                    <ext:GridView ID="GridView1" runat="server" ForceFit="true">
                        <Listeners>
                            <BeforeRefresh Fn="clean" />
                        </Listeners>
                    </ext:GridView>
                </View>
                <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
                </SelectionModel>
                <Plugins>
                    <ext:RowExpander ID="RowExpander1" runat="server" EnableCaching="true">
                        <Template ID="Template1" 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>
    Thanks
  4. #4
    When you click on CheckBox the .refreshRow() is called internally. It causes collapsing of row.

    So, it needs to "clean" a row.

    Please add the following listener for GridPanel.
    <ViewReady Handler="this.view.on('beforerowupdate', cleanRow);" />
    cleanRow function
    var cleanRow = function(view, rowIndex, record){
        RowExpander1.collapseRow(rowIndex);
        var store = window["StoreRow_"+record.id];
        if(store){
            store.destroy();
        }
       
        var grid = window["GridPanelRow_"+record.id];
        if(grid){
            grid.destroy();
        }
    };
  5. #5

    Hmmm

    Okay now expander is in a consistent state ("+" and content is not rendered) but I'm affraid this is not what I expected.


    I need that expander stays in the state as it was prior to CheckColumn click, so if it is expanded with cached content stay so, if not expanded keep it as it is, didn't want to destroy content at all.


    how about that?
  6. #6
    Hi,

    Editing row raises row refereshing, it means that row will be rerendered, all previous content which you added to row expander will be lost
    Therefore you have to rerender the grid inside expander (for example, expand row again)

    <%@ 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, Selected= "True"});
            }
             
            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 id="Head1" runat="server">
        <title>RowExpander with GridPanel - Ext.NET Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
         
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="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]);
            };
            
            var rerenderNestedGrid = function(view, rowIndex, record){
                var expanded = RowExpander1.isExpanded(rowIndex);
                RowExpander1.collapseRow(rowIndex);
                var store = window["StoreRow_"+record.id];
                if(store){
                    store.destroy();
                }
                
                var grid = window["GridPanelRow_"+record.id];
                if(grid){
                    grid.destroy();
                }
                
                if(expanded){
                    view.on("rowupdated", function(){
                        RowExpander1.expandRow(rowIndex);
                    }, view, {single:true});
                }
            };
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" 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" />
                        </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 ID="ColumnModel1" runat="server">
                    <Columns>
                         <ext:CheckColumn ColumnID="Select" Align="Center" Editable="true" MenuDisabled="true" Fixed="true" DataIndex="Selected">
                         </ext:CheckColumn>
                        <ext:Column Header="Supplier" DataIndex="Name" />
                    </Columns>
                </ColumnModel>
                <View>
                    <ext:GridView ID="GridView1" runat="server" ForceFit="true">
                        <Listeners>
                            <BeforeRefresh Fn="clean" />                        
                        </Listeners>
                    </ext:GridView>
                </View>
                <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
                </SelectionModel>
                <Plugins>
                    <ext:RowExpander ID="RowExpander1" runat="server" EnableCaching="true">
                        <Template ID="Template1" 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>
                <Listeners>
                    <ViewReady Handler="this.view.on('beforerowupdate', rerenderNestedGrid);" />
                </Listeners>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  7. #7
    Ok, mark this one as resolved please, and thank you both.
  8. #8
    Vladimir, just tried your example and it seems that handler added prevents checkbox to be edited :-). When clicked on nothing happens.
  9. #9
    RowExpander1.isExpanded is not a function
  10. #10
    Hi,

    Vladimir, just tried your example and it seems that handler added prevents checkbox to be edited :-). When clicked on nothing happens.
    I cannot reproduce it

    RowExpander1.isExpanded is not a function
    I guess it explains previous issue. It seems that you use old version of toolkit, latest code contains that method

    Here is update version doesn't require isExpanded method and doesn't need to rerender the grid
    <%@ 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, Selected= "True"});
            }
             
            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 id="Head1" runat="server">
        <title>RowExpander with GridPanel - Ext.NET Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
         
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="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]);
            };
            
            var rerenderNestedGrid = function(view, rowIndex, record){    
                var grid = window["GridPanelRow_"+record.id];
                if(grid && !grid.moved){
                    var ce = Ext.get(grid.getPositionEl()), 
                        el = Ext.net.ResourceMgr.getAspForm() || Ext.getBody();                    
                        
                    ce.addClass("x-hidden");
                    
                    el.dom.appendChild(ce.dom);
                    grid.moved = true;
            
                    view.on("rowupdated", function(){
                        if(!grid.moved){
                            return;
                        }
                        var row = view.getRow(rowIndex),              
                            body = Ext.DomQuery.selectNode(RowExpander1.rowBodySelector, row);                
                    
                        Ext.fly("row-"+record.id).appendChild(ce.dom);
                        ce.removeClass("x-hidden");  
                        grid.moved = false;       
                        body.rendered = true;   
                        body.expanderRendered = true;        
                    }, view, {single:true});
                }
            };
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" 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" />
                        </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 ID="ColumnModel1" runat="server">
                    <Columns>
                         <ext:CheckColumn ColumnID="Select" Align="Center" Editable="true" MenuDisabled="true" Fixed="true" DataIndex="Selected">
                         </ext:CheckColumn>
                        <ext:Column Header="Supplier" DataIndex="Name" />
                    </Columns>
                </ColumnModel>
                <View>
                    <ext:GridView ID="GridView1" runat="server" ForceFit="true">
                        <Listeners>
                            <BeforeRefresh Fn="clean" />                        
                        </Listeners>
                    </ext:GridView>
                </View>
                <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
                </SelectionModel>
                <Plugins>
                    <ext:RowExpander ID="RowExpander1" runat="server" EnableCaching="true">
                        <Template ID="Template1" 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>
                <Listeners>
                    <ViewReady Handler="this.view.on('beforerowupdate', rerenderNestedGrid);" />
                </Listeners>
            </ext:GridPanel>
        </form>
    </body>
    </html>

Similar Threads

  1. Replies: 1
    Last Post: Jun 05, 2012, 1:54 PM
  2. RowExpander and Checkbox Selection Rendering Issue
    By amitpareek in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 22, 2010, 4:48 AM
  3. Replies: 2
    Last Post: May 31, 2010, 5:27 AM
  4. [CLOSED] checkbox value via fieldlabel click
    By maras54 in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Oct 20, 2009, 11:23 AM
  5. Replies: 1
    Last Post: Aug 13, 2009, 9:37 AM

Tags for this Thread

Posting Permissions