PDA

View Full Version : [CLOSED] [#88] How to expand/collapse a grid group in client side



feanor91
Apr 30, 2012, 1:20 PM
Hello

In my first application version in Ext.NET 1.3 I have this code to toggle one of the group of my grids :



var toggleGroupByValue = function ( gridName, groupValue )
{
var grid;
var store;
var view;
var groupField;
var index;
try
{

grid = Ext.getCmp( gridName );
store = grid.getStore();
view = grid.getView();
groupField = store.groupField;
store.each( function ( record, i )
{
if ( record.data[groupField] == groupValue )
{
index = i;
return false;
}
} );
grid.toggleRowIndex( index, true );
}
catch ( Error )
{
}
};


Problem is that this code didn't work since Ext.JS 4.0 because toggleRowIndex has disapeared.

I found the expand and collapse method on the Ext.grid.feature.Grouping, but I didn't found how to get the feature from the grid (in fact I found this: myGrid.features[0] but I did not kow if this is the good object and can't call collapse or expand with it)

I start all my group collapsed and I want to expand the one chosen.

In the function, all works well, expet the toggleRowIndex (of course)

Daniil
Apr 30, 2012, 3:11 PM
Hi,

This is how I would achieve the requirement in Ext.NET v2.

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[] { "group1", "1", "1" },
new object[] { "group1", "11", "11" },
new object[] { "group1", "111", "111" },
new object[] { "group2", "2", "2" },
new object[] { "group2", "22", "22" },
new object[] { "group2", "222", "222" }
};
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 v2 Example</title>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
<Store>
<ext:Store runat="server" GroupField="groupId">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="groupId" />
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="GroupId" DataIndex="groupId" />
<ext:Column runat="server" Text="Test1" DataIndex="test1" />
<ext:Column runat="server" Text="Test2" DataIndex="test2" />
</Columns>
</ColumnModel>
<Features>
<ext:Grouping ID="Grouping1" runat="server" StartCollapsed="true" />
</Features>
<Listeners>
<%--Workaround--%>
<ViewReady Handler="this.features[0].collapseAll();" />
</Listeners>
</ext:GridPanel>

<ext:Button
runat="server"
Text="Expand the first group">
<Listeners>
<Click Handler="#{Grouping1}.expand('group1');" />
</Listeners>
</ext:Button>

<ext:Button
runat="server"
Text="Expand the second group">
<Listeners>
<Click Handler="#{GridPanel1}.features[0].expand('group2');" />
</Listeners>
</ext:Button>
</body>
</html>


Please note that the Viewready listener is marked "Workaround", because there is a bug (I think it's a bug), which I have reported to ExtJS.
http://www.sencha.com/forum/showthread.php?199925

feanor91
Apr 30, 2012, 3:46 PM
Thanks, I will dig in and report

Daniil
May 01, 2012, 4:05 PM
The ExtJS team has opened the bug.

When it will be fixed you can remove the workaround with the ViewReady listener.

I will notify updating the current thread.

feanor91
May 02, 2012, 12:32 PM
It works perfectly

Thanks

feanor91
May 02, 2012, 1:49 PM
Hello

I think it is another problem with the
StartCollapsed="true" feature, because, when I use it and I want to ad datat to my grid, the data is added collapsed and the editor is not opened. If I use your workaround code, it works normally.

Daniil
May 02, 2012, 2:01 PM
Yes, I think these problems has the same root and should be fixed together.

feanor91
May 02, 2012, 2:02 PM
OK, just wait

feanor91
May 04, 2012, 8:51 AM
Hello

each time I change panel to show grid, I execute this function :
grid.features[0].expand( groupValue ); and I have the error message :

Uncaught TypeError: undefined is not a function

If I run it by hand in javascript console, it executes but it answer undefined:

"4195"

The javascript function called :


var toggleGroupByValue = function ( grid, groupValue )
{
var grid = Ext.getCmp( grid ); ;

grid.features[0].expand( groupValue );

};


it is called from code behind when I change panel :



Private Sub RefreshGrid(ByVal STR_Grid As String, ByVal STR_EntityName As String)
Ext.Net.X.Call("toggleGroupByValue('" + STR_Grid + "','" + STR_EntityName + "')")
End Sub

Daniil
May 04, 2012, 12:12 PM
Could you provide a full sample to reproduce?

Is the "STR_Grid" client id of the GridPanel?

feanor91
May 04, 2012, 12:19 PM
Could you provide a full sample to reproduce?

Is the "STR_Grid" client id of the GridPanel?

It will be very difficult to provide a sample, because in that case, all is very intricated into my code.

STR_GRID is the grid panel name, and groupvalue the group to expand.

function works exept I have ther error returned and it is ennoying because IE show the message "error in page" below the page.

The example you fulfilled above did not generate error, but I made the call from code behind, perhaps something went wrong in that way.

Besides tha, it give me some idea, let's go more test...

feanor91
May 04, 2012, 12:43 PM
this :



var gridFeature = Ext.getCmp( FeatureName );


did not return the feature of the grid but undifined. Is a way to get the feature from a grid exept that :
grid.features[0]

feanor91
May 04, 2012, 12:47 PM
If I try to use directly my feature name like that :



featureName.expand(...)


this object is not known from my javascript include file

feanor91
May 04, 2012, 1:00 PM
Yes!

I manage to change your example code for my needs and the problem is present:



<%@ 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[] { "group1", "1", "1" },
new object[] { "group1", "11", "11" },
new object[] { "group1", "111", "111" },
new object[] { "group2", "2", "2" },
new object[] { "group2", "22", "22" },
new object[] { "group2", "222", "222" }
};
store.DataBind();
}
}

protected void toggle1(object sender, EventArgs e)
{
Ext.Net.X.Call("toggleGroupByValue('GridPanel1','group1')");
}

protected void toggle2(object sender, EventArgs e)
{
Ext.Net.X.Call("toggleGroupByValue('GridPanel1','group2')");
}
</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>Ext.NET v2 Example</title>

<script type="text/javascript">
var toggleGroupByValue = function ( gridName, groupValue )
{
var grid = Ext.getCmp( gridName );
grid.features[0].expand( groupValue );
};

</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
<Store>
<ext:Store ID="Store1" runat="server" GroupField="groupId">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="groupId" />
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" Text="GroupId" DataIndex="groupId" />
<ext:Column ID="Column2" runat="server" Text="Test1" DataIndex="test1" />
<ext:Column ID="Column3" runat="server" Text="Test2" DataIndex="test2" />
</Columns>
</ColumnModel>
<Features>
<ext:Grouping ID="Grouping1" runat="server" StartCollapsed="true" />
</Features>
<Listeners>
<%--Workaround--%>
<ViewReady Handler="this.features[0].collapseAll();" />
</Listeners>
</ext:GridPanel>

<ext:Button ID="Button1"
runat="server"
Text="Expand the first group">
<DirectEvents>
<Click OnEvent="toggle1"></Click>
</DirectEvents>
<Listeners>
<Click Handler="#{Grouping1}.expand('group1');" />
</Listeners>
</ext:Button>

<ext:Button ID="Button2"
runat="server"
Text="Expand the second group">
<DirectEvents>
<Click OnEvent="toggle2"></Click>
</DirectEvents>
</ext:Button>
</body>
</html>

Daniil
May 04, 2012, 1:21 PM
Please use:

Ext.Net.X.Call("toggleGroupByValue", "GridPanel1", "group1");
or

Ext.Net.X.AddScript("toggleGroupByValue('GridPanel1','group2');");

Daniil
May 04, 2012, 1:22 PM
this :



var gridFeature = Ext.getCmp( FeatureName );


did not return the feature of the grid but undifined. Is a way to get the feature from a grid exept that :
grid.features[0]

You can access it directly:

App.Grouping1

Example

Ext.Net.X.Call("toggleGroupByValue", new JRawValue(this.Grouping1.ClientID), "group1");

var toggleGroupByValue = function (grouping, groupValue) {
grouping.expand(groupValue);
};

feanor91
May 04, 2012, 2:42 PM
Hello

The last solution (with grouping) works well, I have no error message.

Thanks

Daniil
Dec 26, 2012, 2:25 PM
Opened an issue to track this defect.
https://github.com/extnet/Ext.NET/issues/88

zeus
Jan 08, 2013, 7:24 AM
Opened an issue to track this defect.
https://github.com/extnet/Ext.NET/issues/88
However if store is configured by proxy the proposed workaround will not work .Here we need to attach the workaround function on load event of the STORE

Daniil
Jan 08, 2013, 8:34 AM
Hi @zeus,

Thank you for the information. Good to know!

Daniil
Jun 03, 2013, 3:52 PM
The issue appears to be fixed in the SVN trunk. The fix will go to the next release (v2.2.1 or v2.3).