[FIXED] [#561] [3.2.1] Incorrect rendering of group header

[bogc]

Hello:

To reproduce please run the code below:

This is a screenshot of the output:



As you can see the icons in the header are not beside the group caption. The group caption is not displayed properly.

Please note the issue occurs when I bind the grid to the child store. If I were to bind it to a "normal" store it would work (I played a bit with it).

Am I doing something wrong? This worked in 2.1.1 with the disclaimer that I haven't tested this sample in 2.1.1 but the sample is based on the real app which worked in 2.1.1 and it exhibits the same behavior as the sample in 2.5.2.

Page:

 <ext:Model runat="server" Name="Parameter" IDProperty="Id">
      <Fields>
        <ext:ModelField Name="Id" Type="Int"></ext:ModelField>
        <ext:ModelField Name="DataSetId" Type="Int"></ext:ModelField>
        <ext:ModelField Name="DataSetName" Type="String"></ext:ModelField>
        <ext:ModelField Name="Name" Type="String"></ext:ModelField>
      </Fields>    
  </ext:Model>
  
  <ext:Model runat="server" IDProperty="Id" Name="DataSet">
      <Fields>
        <ext:ModelField Name="Id" Type="Int"></ext:ModelField>
        <ext:ModelField Name="Name" Type="String"></ext:ModelField>
      </Fields>
    <Associations>
      <ext:HasManyAssociation Model="Parameter" Name="parameters" AssociationKey="Parameters"></ext:HasManyAssociation>
    </Associations>    
  </ext:Model>

  <ext:Store runat="server" ID="testStore" AutoLoad="true" ModelName="DataSet" AutoDestroy="false">
    <Proxy>
      <ext:AjaxProxy Url="~/Home/GetTestData">
        <Reader>
          <ext:JsonReader TotalProperty="total" Root="data"/>
        </Reader>
      </ext:AjaxProxy>
    </Proxy>
    <Listeners>
      <Load Handler="var childStore = #{testStore}.getAt(0).parameters(); childStore.group('DataSetName', 'ASC'); #{parametersGridPanel}.reconfigure(childStore);"></Load>
    </Listeners>
  </ext:Store>
   <ext:Viewport runat="server" Layout="fit">
     <Items>
       <ext:GridPanel runat="server" ID="parametersGridPanel">
         <Store>
           <ext:Store runat="server" Model="Parameter" AutoDestroy="False"></ext:Store>
         </Store>
         <ColumnModel>
           <Columns>
              <ext:Column runat="server" DataIndex="Name" Text="Name" Width="300">
                <Editor>
                  <ext:TextField runat="server"></ext:TextField>
                </Editor>
              </ext:Column>
              <ext:CommandColumn runat="server" Hidden="True">
                <GroupCommands>
                  <ext:GridCommand Icon="TableRow">
                    
                  </ext:GridCommand>
                  <ext:GridCommand Icon="TableRow">
                    
                  </ext:GridCommand>
                </GroupCommands>
                
              </ext:CommandColumn>             
           </Columns>         
         </ColumnModel>
         <SelectionModel>
          <ext:RowSelectionModel runat="server" Mode="Single"></ext:RowSelectionModel>
         </SelectionModel>
          <View>
            <ext:GridView runat="server" TrackOver="True" StripeRows="true" />
          </View>
            <Features>
                <ext:Grouping 
                    runat="server" 
                    HideGroupedHeader="true" 
                    EnableNoGroups="False"
                    StartCollapsed="False"
                    GroupHeaderTplString='{groupValue}: {[values.children.length]} {[values.children[0].data.DataSetName]} {[values.children[0].data.Name]}' />


                <ext:RowWrap runat="server" />
            </Features> 
         <BottomBar>
           <ext:PagingToolbar runat="server"></ext:PagingToolbar>
         </BottomBar>
         <Plugins>
           <ext:CellEditing runat="server" ClicksToEdit="1"></ext:CellEditing>
         </Plugins>
       </ext:GridPanel>
     </Items>

   </ext:Viewport>

Controller action:

    public StoreResult GetTestData()
    {
      var list = Enumerable.Range(1, 5)
        .Select(i => new
                     {
                       Id = i,
                       DataSetId = 1,
                       DataSetName = "DataSet",
                       Name = String.Format("Parameter {0}", i)
                     }).ToList();
      var row = Enumerable.Range(1, 1)
        .Select(i => new
                     {
                       Id = i,
                       Name = "DataSet",
                       Parameters = list
                     })
        .ToList();
      return new StoreResult(row, row.Count);
    }
  }

[Daniil]

Hi @bogc,

I have reproduced and will investigate.

[Daniil]

I've narrowed the problem down to the following test case.

Example

<%@ Page Language="C#" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.Store1.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" }
            };
        }
    }
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:Store ID="Store1" 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>

        Click the Button and try to collapse a group => a JavaScript error occurs

        <ext:Button runat="server" Text=".reconfigure()" Handler="App.GridPanel1.reconfigure(App.Store1)" />

        <ext:GridPanel ID="GridPanel1" runat="server">
            <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 runat="server" />
            </Features>
        </ext:GridPanel>
    </form>
</body>
</html>

It turns out that a GridPanel's .reconfigure() call breaks a grouping feature.

Actually, that is a known ExtJS bug and I've created an Issue for that.
https://github.com/extnet/Ext.NET/issues/561

As a solution for the problem, I would recommend you to use this approach:
http://www.sencha.com/forum/showthre...l=1#post986019

I.e. recreate the grid entirely with a new store.

The TemplateWidget feature will help you to organize the things.
https://examples2.ext.net/#/Miscella...dget/Overview/

The issue appears to be not reproducible with the current Ext.NET v3 based on ExtJS 5.

Finally, thank you for the report!

[bogc]

Daniil, thank you so much. You guys offer the best support :-)

I used your suggestion to recreate the grid via a template widget (found one of my old posts: http://forums.ext.net/showthread.php...ring-questions) and I wired it to a store via a custom config pointing to a global variable that was set to the new store before the grid is recreated and it works as it should. Though, I am seeing another weird one, on the gridpanel context menu I have two menu items for expanding/collapsing all groups. As soon as I do it, all the +/- buttons disappear, but they re-appear as soon as I click on the group header. I can live with this but I will try to get you a sample tomorrow that reproduces this issue.

Thanks again.

[bogc]

Hi:

Here is what I did based on Daniil's suggestions (I added this page to the MVC examples in the Areas\GridPanel_ArrayGrid\Views\Simple folder) :

TestGridPanel.aspx:

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<%@ Register TagPrefix="ext" Namespace="Ext.Net" Assembly="Ext.Net, Culture=neutral, PublicKeyToken=2e12ce3d0176cd87" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
  
      <script type="text/javascript">
    
     function getGroupingFeature(gridPanel)
     {
       return getFeatureByType(gridPanel, 'grouping');
     }

    function getFeatureByType(gridPanel, ftype)
    {
      for(var i = 0; i < gridPanel.features.length; i++)
      {
        var feature = gridPanel.features[i];
        if ((feature.ftype == ftype) || feature.alias.indexOf('feature.' + ftype) >= 0)
        {
          return feature;
        }
      }
      return null;
    }

  </script>
</head>
<body>
  <ext:ResourceManager ID="ResourceManager" runat="server"  ScriptMode="Debug" SourceFormatting="true" IDMode="Static" Namespace="App"/>

  <ext:GridPanel runat="server" ID="parametersGridPanel" TemplateWidget="True" TemplateWidgetFnName="getNewParametersGridPanel">
    <CustomConfig>
      <ext:ConfigItem Name="store" Value="App.parametersStore" Mode="Raw"/>
    </CustomConfig>
    <ColumnModel>
      <Columns>
        <ext:Column runat="server" DataIndex="Name" Text="Name" Width="300">
          <Editor>
            <ext:TextField runat="server"></ext:TextField>
          </Editor>
        </ext:Column>
        <ext:CommandColumn runat="server" Hidden="True">
          <GroupCommands>
            <ext:GridCommand Icon="TableRow">
                    
            </ext:GridCommand>
            <ext:GridCommand Icon="TableRow">
                    
            </ext:GridCommand>
          </GroupCommands>
                
        </ext:CommandColumn>             
      </Columns>         
    </ColumnModel>
    <SelectionModel>
    <ext:RowSelectionModel runat="server" Mode="Single"></ext:RowSelectionModel>
    </SelectionModel>
    <View>
      <ext:GridView runat="server" TrackOver="True" StripeRows="true" />
    </View>
      <Features>
          <ext:Grouping 
              runat="server" 
              HideGroupedHeader="true" 
              EnableNoGroups="False"
              StartCollapsed="False"
              GroupHeaderTplString='{groupValue}: {[values.children.length]} {[values.children[0].data.DataSetName]} {[values.children[0].data.Name]}' />


          <ext:RowWrap runat="server" />
      </Features> 
    <BottomBar>
      <ext:PagingToolbar runat="server"></ext:PagingToolbar>
    </BottomBar>
    <Plugins>
      <ext:CellEditing runat="server" ClicksToEdit="1"></ext:CellEditing>
    </Plugins>
  </ext:GridPanel>


  <ext:Model runat="server" Name="Parameter" IDProperty="Id">
      <Fields>
        <ext:ModelField Name="Id" Type="Int"></ext:ModelField>
        <ext:ModelField Name="DataSetId" Type="Int"></ext:ModelField>
        <ext:ModelField Name="DataSetName" Type="String"></ext:ModelField>
        <ext:ModelField Name="Name" Type="String"></ext:ModelField>
      </Fields>    
  </ext:Model>
  
  <ext:Model runat="server" IDProperty="Id" Name="DataSet">
      <Fields>
        <ext:ModelField Name="Id" Type="Int"></ext:ModelField>
        <ext:ModelField Name="Name" Type="String"></ext:ModelField>
      </Fields>
    <Associations>
      <ext:HasManyAssociation Model="Parameter" Name="parameters" AssociationKey="Parameters"></ext:HasManyAssociation>
    </Associations>    
  </ext:Model>

  <ext:Store runat="server" ID="testStore" AutoLoad="false" ModelName="DataSet" AutoDestroy="false">
    <Proxy>
      <ext:AjaxProxy Url="~/GridPanel_ArrayGrid/Simple/GetTestData">
        <Reader>
          <ext:JsonReader TotalProperty="total" Root="data"/>
        </Reader>
      </ext:AjaxProxy>
    </Proxy>
    <Listeners>
      <Load Handler="var childStore = #{testStore}.getAt(0).parameters(); childStore.group('DataSetName', 'ASC'); App.parametersStore = childStore; if (#{parametersGridPanel}) #{parametersGridPanel}.destroy(); #{parametersPanel}.add(App.getNewParametersGridPanel());"></Load>
    </Listeners>
  </ext:Store>

   <ext:Viewport runat="server" Layout="fit">
     <Items>
       <ext:Panel runat="server" ID="parametersPanel" Layout="fit">
         <TopBar>
           <ext:Toolbar runat="server">
             <Items>
               <ext:Button runat="server" Text="Load Grid Data">
                 <Listeners>
                   <Click Handler="#{testStore}.load();"></Click>
                 </Listeners>
               </ext:Button>
               <ext:Button runat="server" Text="Collapse All">
                 <Listeners>
                   <Click Handler="getGroupingFeature(#{parametersGridPanel}).collapseAll();"></Click>
                 </Listeners>
               </ext:Button>
             </Items>
           </ext:Toolbar>
         </TopBar>
       </ext:Panel>
     </Items>

   </ext:Viewport>
</body>
</html>

Controller code, added to the Areas\GridPanel_ArrayGrid\Controllers\SimpleContro ller.cs:

      public ActionResult TestGridPanel()
      {
        return View();
      }

      public StoreResult GetTestData()
      {
        var list = Enumerable.Range(1, 15)
          .Select(i => new
          {
            Id = i,
            DataSetId = (i <= 5 ? 1 : (i <= 10 ? 2 : 3)),
            DataSetName = "DataSet" + (i <= 5 ? 1 : (i <= 10 ? 2 : 3)),
            Name = String.Format("Parameter {0}", i)
          }).ToList();
        var row = Enumerable.Range(1, 1)
          .Select(i => new
          {
            Id = i,
            Name = "DataSet",
            Parameters = list
          })
          .ToList();
        return new StoreResult(row, row.Count);
      }

To reproduce the issue I was mentioning in the previous message, click the Load Grid Data button, then click on the Collapse All button. When you click on the Collapse All button the buttons for expanding/collapsing groups disappear (also the separators move above the group header). Fortunately, if you click on a group header you get the button back (the one associated with that header).

As I said, I am happy that this whole thing works and if you have a fix for the buttons disappearance, that would be great. If not, I will document it for the users as a known issue.

Thank you !

[Daniil]

Thank you for the test case.

A refresh call helps:

<Click Handler="App.parametersGridPanel.groupingFeature.collapseAll(); 
                App.parametersGridPanel.getView().refresh();" />

[bogc]

Hello:

I have another issue related to this one, and it is reproducible using the code below.

To reproduce:

Edit any cell and modify the value in that cell. It is important to modify the value. When done press ENTER. The minus button of the group header the row appears under disappears, as well as the two group header command icons. If you click again on the group header, the group is collapsed and the buttons are all back.

Is there a way to fix this?

Thank you

TestGridPanel.aspx:

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<%@ Register TagPrefix="ext" Namespace="Ext.Net" Assembly="Ext.Net, Culture=neutral, PublicKeyToken=2e12ce3d0176cd87" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
  
      <script type="text/javascript">
    
     function getGroupingFeature(gridPanel)
     {
       return getFeatureByType(gridPanel, 'grouping');
     }

    function getFeatureByType(gridPanel, ftype)
    {
      for(var i = 0; i < gridPanel.features.length; i++)
      {
        var feature = gridPanel.features[i];
        // Why do I have the second condition? Because not all the f***g features have the ftype set
        if ((feature.ftype == ftype) || feature.alias.indexOf('feature.' + ftype) >= 0)
        {
          return feature;
        }
      }
      return null;
    }

  </script>
</head>
<body>
  <ext:ResourceManager ID="ResourceManager" runat="server"  ScriptMode="Debug" SourceFormatting="true" IDMode="Static" Namespace="App"/>

  <ext:GridPanel runat="server" ID="parametersGridPanel" TemplateWidget="True" TemplateWidgetFnName="getNewParametersGridPanel">
    <CustomConfig>
      <ext:ConfigItem Name="store" Value="App.parametersStore" Mode="Raw"/>
    </CustomConfig>
    <ColumnModel>
      <Columns>
        <ext:Column runat="server" DataIndex="Name" Text="Name" Width="300">
          <Editor>
            <ext:TextField runat="server"></ext:TextField>
          </Editor>
        </ext:Column>
        <ext:CommandColumn runat="server" Hidden="True">
          <GroupCommands>
            <ext:GridCommand Icon="TableRow">
                    
            </ext:GridCommand>
            <ext:GridCommand Icon="TableRow">
                    
            </ext:GridCommand>
          </GroupCommands>
                
        </ext:CommandColumn>             
      </Columns>         
    </ColumnModel>
    <SelectionModel>
    <ext:RowSelectionModel runat="server" Mode="Single"></ext:RowSelectionModel>
    </SelectionModel>
    <View>
      <ext:GridView runat="server" TrackOver="True" StripeRows="true" />
    </View>
      <Features>
          <ext:Grouping 
              runat="server" 
              HideGroupedHeader="true" 
              EnableNoGroups="False"
              StartCollapsed="False"
              GroupHeaderTplString='{groupValue}: {[values.children.length]} {[values.children[0].data.DataSetName]} {[values.children[0].data.Name]}' />


          <ext:RowWrap runat="server" />
      </Features> 
    <BottomBar>
      <ext:PagingToolbar runat="server"></ext:PagingToolbar>
    </BottomBar>
    <Plugins>
      <ext:CellEditing runat="server" ClicksToEdit="1"></ext:CellEditing>
    </Plugins>
  </ext:GridPanel>


  <ext:Model runat="server" Name="Parameter" IDProperty="Id">
      <Fields>
        <ext:ModelField Name="Id" Type="Int"></ext:ModelField>
        <ext:ModelField Name="DataSetId" Type="Int"></ext:ModelField>
        <ext:ModelField Name="DataSetName" Type="String"></ext:ModelField>
        <ext:ModelField Name="Name" Type="String"></ext:ModelField>
      </Fields>    
  </ext:Model>
  
  <ext:Model runat="server" IDProperty="Id" Name="DataSet">
      <Fields>
        <ext:ModelField Name="Id" Type="Int"></ext:ModelField>
        <ext:ModelField Name="Name" Type="String"></ext:ModelField>
      </Fields>
    <Associations>
      <ext:HasManyAssociation Model="Parameter" Name="parameters" AssociationKey="Parameters"></ext:HasManyAssociation>
    </Associations>    
  </ext:Model>

  <ext:Store runat="server" ID="testStore" AutoLoad="false" ModelName="DataSet" AutoDestroy="false">
    <Proxy>
      <ext:AjaxProxy Url="~/GridPanel_ArrayGrid/Simple/GetTestData">
        <Reader>
          <ext:JsonReader TotalProperty="total" Root="data"/>
        </Reader>
      </ext:AjaxProxy>
    </Proxy>
    <Listeners>
      <Load Handler="var childStore = #{testStore}.getAt(0).parameters(); childStore.group('DataSetName', 'ASC'); App.parametersStore = childStore; if (#{parametersGridPanel}) #{parametersGridPanel}.destroy(); #{parametersPanel}.add(App.getNewParametersGridPanel());"></Load>
    </Listeners>
  </ext:Store>

   <ext:Viewport runat="server" Layout="fit">
     <Items>
       <ext:Panel runat="server" ID="parametersPanel" Layout="fit">
         <TopBar>
           <ext:Toolbar runat="server">
             <Items>
               <ext:Button runat="server" Text="Load Grid Data">
                 <Listeners>
                   <Click Handler="#{testStore}.load();"></Click>
                 </Listeners>
               </ext:Button>
               <ext:Button runat="server" Text="Collapse All">
                 <Listeners>
                   <Click Handler="getGroupingFeature(#{parametersGridPanel}).collapseAll();"></Click>
                 </Listeners>
               </ext:Button>
             </Items>
           </ext:Toolbar>
         </TopBar>
       </ext:Panel>
     </Items>

   </ext:Viewport>
</body>
</html>

SimpleController.cs:

using System;
using System.Collections;
using System.Linq;
using System.Web.Mvc;
using Ext.Net.MVC.Examples.Areas.GridPanel_ArrayGrid.Models;

namespace Ext.Net.MVC.Examples.Areas.GridPanel_ArrayGrid.Simple.Controllers
{
    public class SimpleController : Controller
    {
        public ActionResult Index()
        {
            return View(Companies.GetAllCompanies());
        }

      public StoreResult GetData()
      {
        object[] allCompanies = Companies.GetAllCompanies();
        Array.Reverse(allCompanies);
        return this.Store(allCompanies, allCompanies.Length);
      }

      public ActionResult TestGridPanel()
      {
        return View();
      }

      public StoreResult GetTestData()
      {
        var list = Enumerable.Range(1, 15)
          .Select(i => new
          {
            Id = i,
            DataSetId = (i <= 5 ? 1 : (i <= 10 ? 2 : 3)),
            DataSetName = "DataSet" + (i <= 5 ? 1 : (i <= 10 ? 2 : 3)),
            Name = String.Format("Parameter {0}", i)
          }).ToList();
        var row = Enumerable.Range(1, 1)
          .Select(i => new
          {
            Id = i,
            Name = "DataSet",
            Parameters = list
          })
          .ToList();
        return new StoreResult(row, row.Count);
      }
    }

}

[Daniil]

A view's refresh call after editing appears to help.

<ext:CellEditing runat="server">
    <Listeners>
        <Edit Handler="e.grid.getView().refresh();" />
    </Listeners>
</ext:CellEditing>

[bogc]

Hi, Daniil:

Sorry for not mentioning this, I already tried your suggestion and calling the refresh method has this weird flashing effect on the grid which I don't like. I know it's one of those things, but if I were spending time in this area as user editing data, I would hate it if it happens every time I edit the data.

Is there anything else that I could try?

Thanks

[Daniil]

Agree.

We will try to find a better solution if any.