[CLOSED] Strange update problem row expander

**78fede78** · Nov 17, 2010, 2:20 PM

Happens when I update the grid a strange problem

the selected row quits
need to do these steps
1)select a row from the main grid
2)Expand the selected row
3)update the selected row
4) the selected row is close????why??????(Figure 1)

See the following code:

<%@ Page Language="C#" %>
<%@ Import Namespace="Ext.Net.Examples"%>
<%@ Import Namespace="Ext.Net.Examples.Northwind" %>
<%@ 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;
        }       
    }
    [DirectMethod]
    public void RowChildSelect()
    {
        FormPanel1.Hide();
    }
    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 });
        Ext.Net.RowSelectionModel rw = new RowSelectionModel { SingleSelect = true };
        rw.Listeners.RowSelect.Handler = "Ext.net.DirectMethods.RowChildSelect();";
        grid.SelectionModel.Add(rw);
        //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);
    }    
    protected void RowSelect(object sender, DirectEventArgs e)
    {
        string employeeID = e.ExtraParams["EmployeeID"];
        Employee empl = Employee.GetEmployee(int.Parse(employeeID));
        this.FormPanel1.SetValues(new {
            empl.EmployeeID,
            empl.FirstName,                          
            empl.LastName,
            empl.Title,
            ReportsTo = empl.ReportsTo.HasValue ? (Employee.GetEmployee(empl.ReportsTo.Value).LastName) : "",
            empl.HireDate,
            empl.Extension,
            empl.Address,
            empl.City,
            empl.PostalCode,
            empl.HomePhone,
            empl.TitleOfCourtesy,
            empl.BirthDate,
            empl.Region,
            empl.Country,
            empl.Notes
        });
    }
    protected void Store1_Refresh(object sender, StoreRefreshDataEventArgs e)
    {
        this.Store1.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>GridPanel with Form Details - Ext.NET Examples</title>
    <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />    
    <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 updateRecord = function(form, grid, button, icon) {
            if (!form.getForm().isValid()) {
                Ext.net.Notification.show({
                    iconCls: "icon-exclamation",
                    html: "Form is invalid",
                    title: "Error"
                });
                return false;
            }            
            form.getForm().updateRecord(grid.getSelectionModel().getSelected());
            grid.getSelectionModel().unlock();
            grid.setIconClass(icon);
            button.show();
        }        
        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" />        
        <asp:LinqDataSource 
            ID="LinqDataSource1" 
            runat="server" 
            ContextTypeName="Ext.Net.Examples.Northwind.NorthwindDataContext"
            Select="new (EmployeeID, LastName, FirstName)" 
            TableName="Employees"/>            
        <ext:Viewport runat="server" Layout="border">
            <Items>
                <ext:Panel 
                    runat="server" 
                    Region="North"
                    Margins="5 5 5 5"
                    Title="Description" 
                    Height="100" 
                    Padding="5"
                    Frame="true" 
                    Icon="Information">
                    <Content>
                        <b>GridPanel with Form Details</b>
                        <p>Click on any record with the GridPanel and the record details will be loaded into the Details Form.</p>
                    </Content>
                </ext:Panel>
                <ext:GridPanel 
                    ID="GridPanel1"
                    runat="server" 
                    Title="Employees"
                    Margins="0 0 5 5"
                    Icon="UserSuit"
                    Region="Center"
                    AutoExpandColumn="LastName" 
                    Frame="true">
                    <Store>
                        <ext:Store 
                            ID="Store1" 
                            runat="server" 
                            DataSourceID="LinqDataSource1" 
                            OnRefreshData="Store1_Refresh">
                            <Reader>
                                <ext:JsonReader IDProperty="EmployeeID">
                                    <Fields>
                                        <ext:RecordField Name="ID" Mapping="EmployeeID" />
                                        <ext:RecordField Name="LastName" />
                                        <ext:RecordField Name="FirstName" />
                                    </Fields>
                                </ext:JsonReader>
                            </Reader>
                        </ext:Store>
                    </Store>
                    <ColumnModel runat="server">
                        <Columns>
                            <ext:Column ColumnID="LastName" DataIndex="LastName" Header="Last Name" />
                            <ext:Column DataIndex="FirstName" Header="First Name" Width="150" />
                        </Columns>
                    </ColumnModel>
                    <SelectionModel>
                        <ext:RowSelectionModel runat="server" SingleSelect="true">
                            <DirectEvents>
                                <RowSelect OnEvent="RowSelect" Buffer="100">
                                    <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="#{FormPanel1}" />
                                    <ExtraParams>
                                        <%-- or can use params[2].id as value --%>
                                        <ext:Parameter Name="EmployeeID" Value="this.getSelected().id" Mode="Raw" />
                                    </ExtraParams>
                                </RowSelect>
                            </DirectEvents>
                        </ext:RowSelectionModel>
                    </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>
            <BottomBar>
                <ext:PagingToolbar runat="server" />
            </BottomBar>
            <LoadMask ShowMask="true" />
         </ext:GridPanel>
                <ext:FormPanel 
                    ID="FormPanelGeneral" 
                    runat="server" 
                    Region="East"
                    MonitorPoll="200" 
                    MonitorValid="true"
                    Split="true"
                    Margins="0 5 5 5"
                    Frame="true" 
                    Title="Employee Details" 
                    Width="280"
                    Icon="User"
                    DefaultAnchor="-20">          
                    <Defaults>
                        <ext:Parameter Name="AllowBlank" Value="true" Mode="Raw" />                       
                        <ext:Parameter Name="MsgTarget" Value="side" />  
                    </Defaults>          
                    <Items>    
                    <ext:FormPanel ID="FormPanel1" runat="server" DefaultAnchor="100%">
                    <Items>
                        <ext:TextField ID="TextField1" runat="server" FieldLabel="Employee ID" DataIndex="EmployeeID" AllowBlank="false" EmptyText="Employee ID missing" />
                        <ext:TextField ID="TextField2" runat="server" FieldLabel="First Name" DataIndex="FirstName" AllowBlank="false" />
                        <ext:TextField ID="TextField3" runat="server" FieldLabel="Last Name" DataIndex="LastName" />
                        <ext:TextField ID="TextField4" runat="server" FieldLabel="Title" DataIndex="Title" />
                        <ext:TextField ID="TextField5" runat="server" FieldLabel="Reports to" DataIndex="ReportsTo" />
                        <ext:DateField ID="DateField1" runat="server" FieldLabel="Hire date" Format="yyyy-MM-dd" DataIndex="HireDate" />
                        <ext:TextField ID="TextField6" runat="server" FieldLabel="Extension" DataIndex="Extension" />
                        <ext:TextField ID="TextField7" runat="server" FieldLabel="Address" DataIndex="Address" />
                        <ext:TextField ID="TextField8" runat="server" FieldLabel="City" DataIndex="City" />
                        <ext:TextField ID="TextField9" runat="server" FieldLabel="Post Code" DataIndex="PostalCode" />
                        <ext:TextField ID="TextField10" runat="server" FieldLabel="Home Phone" DataIndex="HomePhone" />
                        <ext:TextField ID="TextField11" runat="server" FieldLabel="Title Of Courtesy" DataIndex="TitleOfCourtesy" />
                        <ext:DateField ID="DateField2" runat="server" FieldLabel="Birth date" Format="yyyy-MM-dd" DataIndex="BirthDate" />
                        <ext:TextField ID="TextField12" runat="server" FieldLabel="Region" DataIndex="Region" />
                        <ext:TextField ID="TextField13" runat="server" FieldLabel="Country" DataIndex="Country" />
                        <ext:TextArea ID="TextArea1" runat="server" FieldLabel="Note" Height="50" DataIndex="Notes" />
                    </Items>
                    </ext:FormPanel>            
                    </Items>                    
                    <BottomBar>
                        <ext:StatusBar ID="FormStatusBar" runat="server" DefaultText="" Height="27">
                         <Plugins>
                            <ext:ValidationStatus ID="ValidationStatus1" 
                                runat = "server" 
                                ValidIconCls="myEmptyClass"
                                FormPanelID="FormPanel1" 
                                ShowText="Errori di compilazione"
                                ErrorIcon="Exclamation"/>
                                </Plugins>
                            <Items>                   
                               <ext:Button ID="ButtonSalva" 
                                runat="server"
                                Text="updateRecord"
                                Width="80"
                                Icon="Disk">  
                                    <Listeners>
                                    <Click Handler="updateRecord(#{FormPanel1},#{GridPanel1},#{ButtonSalva},'icon-folder');" />
                                    </Listeners>                                                                   
                            </ext:Button>                  
                            </Items>
                        </ext:StatusBar>
                    </BottomBar>
                </ext:FormPanel>
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>

**Daniil** · Nov 17, 2010, 5:37 PM

Hi,

The solution is here.
https://examples1.ext.net/#/GridPane...ic_GridPanels/

Please add the following <View> to GridPanel.

Example

<View>
    <ext:GridView runat="server" ForceFit="true">
        <Listeners>
            <BeforeRefresh Fn="clean" />
        </Listeners>
    </ext:GridView>
</View>

**78fede78** · Nov 18, 2010, 9:08 AM

Hello daniil
I'm sorry
after doing

form.getForm (). updateRecord (grid.getSelectionModel (). GetSelected ());

the updated row is collapsed.

**Daniil** · Nov 18, 2010, 9:51 AM

Hi,

I can't reproduce it. Please provide exact steps to reproduce.

**Daniil** · Nov 18, 2010, 11:02 AM

Reproduced.

It needs to collapse updated row's RowExpander and remove its controls, see the clean() method's code.

To collapse a particular row please use the collapseRow(rowIndex) method.

**78fede78** · Nov 18, 2010, 12:20 PM

There is a method collapseRow (rowIndex)?
I have not found

**Daniil** · Nov 18, 2010, 12:25 PM

It's the RowExpander's method.

Example

RowExpander1.collapseRow(3);

**78fede78** · Nov 18, 2010, 1:23 PM

Ok I may have found the solution.

I have to expand only if it has already expanded

after I upgraded my line I have to expand it with the method

RowExpander1.expandRow(index);

there is a method that tells me if a row is expanded or not?

RowExpander1.isExpanded(index);

I have not found anything on api sencha

the class is this?

http://dev.sencha.com/deploy/dev/doc...upingView.html

**Daniil** · Nov 18, 2010, 2:23 PM

Hi,

It's not core ExtJS, this class is extension. The code of RowExpander you can find in the toolkit's sources.

...\Ext.Net\Build\Ext.Net\extnet\data\RowExpander.js

Please use the following code.

Example

var isCollapsed = function(grid, rowIndex) {
    var row = grid.getView().getRow(rowIndex);
    return Ext.fly(row).hasClass("x-grid3-row-collapsed");
}

var isExpanded = function(grid, rowIndex) {
    var row = grid.getView().getRow(rowIndex);
    return Ext.fly(row).hasClass("x-grid3-row-expanded");
}

isCollapsed(GridPanel1, 0);

isExpanded(GridPanel1, 0);

**Daniil** · Nov 18, 2010, 4:55 PM

Hi,

Added new RowExpander's methods (Revision #3332):
1. isCollapsed(rowIndex or row as parameter)
2. isExpanded(rowIndex or row as parameter)

Ticket
https://extnet.lighthouseapp.com/pro...ds#ticket-54-2

Example of usage

RowExpander1.isCollapsed(0);
RowExpander1.isCollapsed(GridPanel1.getView().getRow(0));

RowExpander1.isExpanded(0);
RowExpander1.isExpanded(GridPanel1.getView().getRow(0));

Thread: [CLOSED] Strange update problem row expander

Thread Tools

Search Thread

Display

[CLOSED] Strange update problem row expander

Similar Threads

[CLOSED] Strange error after compile last svn update

[CLOSED] Problem with Dynamic columns with row expander

[CLOSED] row expander - problem grid child width

Very strange problem...

[CLOSED] Strange problem with changing row color

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Strange update problem row expander

[CLOSED] Strange update problem row expander

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us