PDA

View Full Version : [CLOSED] Command Button not rendering in Collapsed Group in Grid



amitpareek
Apr 03, 2013, 2:04 PM
Hi,
In the following example, I have group set to startCollapsed=true and have 2 command buttons. They do not render. I have to use grid.view.refreshNode(index) to render the whole row again and then they appear. What should I do to make them render by default.



PHENAZOPYRIDINE HYDROCHLORIDE - phenazopyridine hydrochloride tablet Unit Dose Services <%@ Page Language="C#" %>

<%@ Import Namespace="System.Globalization" %>
<%@ Import Namespace="System.Collections.Generic" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
CultureInfo ci = new CultureInfo("en-US");


Store store = this.GridPanel1.GetStore();

store.DataSource = new List<Project>
{
new Project(100, "Ext Forms: Field Anchoring", 112, "Integrate 2.0 Forms with 2.0 Layouts", 6, 150, 0, DateTime.Parse("06/24/2007",ci)),
new Project(100, "Ext Forms: Field Anchoring", 113, "Implement AnchorLayout", 4, 150, 0, DateTime.Parse("06/25/2007",ci)),
new Project(100, "Ext Forms: Field Anchoring", 114, "Add support for multiple types of anchors", 4, 150, 0, DateTime.Parse("06/27/2007",ci)),
new Project(100, "Ext Forms: Field Anchoring", 115, "Testing and debugging", 8, 0, 0, DateTime.Parse("06/29/2007",ci)),
new Project(101, "Ext Grid: Single-level Grouping", 101, "Add required rendering \"hooks\" to GridView", 6, 100, 0, DateTime.Parse("07/01/2007",ci)),
new Project(101, "Ext Grid: Single-level Grouping", 102, "Extend GridView and override rendering functions", 6, 100, 0, DateTime.Parse("07/03/2007",ci)),
new Project(101, "Ext Grid: Single-level Grouping", 103, "Extend Store with grouping functionality", 4, 100, 0, DateTime.Parse("07/04/2007",ci)),
new Project(101, "Ext Grid: Single-level Grouping", 121, "Default CSS Styling", 2, 100, 0, DateTime.Parse("07/05/2007",ci)),
new Project(101, "Ext Grid: Single-level Grouping", 104, "Testing and debugging", 6, 100, 0, DateTime.Parse("07/06/2007",ci)),
new Project(102, "Ext Grid: Summary Rows", 105, "Ext Grid plugin integration", 4, 125, 0, DateTime.Parse("07/01/2007",ci)),
new Project(102, "Ext Grid: Summary Rows", 106, "Summary creation during rendering phase", 4, 125, 0, DateTime.Parse("07/02/2007",ci)),
new Project(102, "Ext Grid: Summary Rows", 107, "Dynamic summary updates in editor grids", 6, 125, 0, DateTime.Parse("07/05/2007",ci)),
new Project(102, "Ext Grid: Summary Rows", 108, "Remote summary integration", 4, 125, 0, DateTime.Parse("07/05/2007",ci)),
new Project(102, "Ext Grid: Summary Rows", 109, "Summary renderers and calculators", 4, 125, 0, DateTime.Parse("07/06/2007",ci)),
new Project(102, "Ext Grid: Summary Rows", 110, "Integrate summaries with GroupingView", 10, 125, 0, DateTime.Parse("07/11/2007",ci)),
new Project(102, "Ext Grid: Summary Rows", 111, "Testing and debugging", 8, 125, 0, DateTime.Parse("07/15/2007",ci))
};

store.DataBind();
}

public class Project
{
public Project(int projectId, string name, int taskId, string description, int estimate, double rate, double cost, DateTime due)
{
this.ProjectID = projectId;
this.Name = name;
this.TaskID = taskId;
this.Description = description;
this.Estimate = estimate;
this.Rate = rate;
this.Due = due;
}

public int ProjectID { get; set; }
public string Name { get;set; }
public int TaskID { get; set; }
public string Description { get;set; }
public int Estimate { get;set; }
public double Rate { get; set; }
public double Cost { get; set; }
public DateTime Due { get; set; }
}
</script>


<!DOCTYPE html>


<html>
<head id="Head1" runat="server">
<title>GroupingSummary Plugin with Summary row - Ext.NET Examples</title>

<link href="/resources/css/examples.css" rel="stylesheet" />

<style>

.x-grid-body .x-grid-cell-Cost {
background-color : #f1f2f4;
}

.x-grid-row-summary .x-grid-cell-Cost .x-grid-cell-inner{
background-color : #e1e2e4;
}


.task .x-grid-cell-inner {
padding-left: 15px;
}


.x-grid-row-summary .x-grid-cell-inner {
font-weight: bold;
font-size: 11px;
background-color : #f1f2f4;
}


.total-field{
background-color : #fff;
border : solid 1px silver;
padding : 0px 1px 1px 1px;
margin-right : 1px;
position: absolute;
}

.total-field .x-form-display-field{
font-weight : bold !important;
font-size : 11px;
font-family : tahoma, arial, verdana, sans-serif;
color : #000;
padding : 3px 0px 2px 5px;
}
</style>

<script>
var updateTotal = function (grid, container) {
if (!grid.view.rendered) {
return;
}


var field,
value,
width,
c,
cs = grid.headerCt.getVisibleGridColumns();


container.suspendLayout = true;
for (var i = 0; i < cs.length; i++) {
c = cs[i];
if (c.summaryType) {
value = App.Group1.getSummary(grid.store, c.summaryType, c.dataIndex);
}
else {
value = "-";
}


field = container.down('component[name="' + c.dataIndex + '"]');


container.remove(field, false);
container.insert(i, field);
width = c.getWidth();
field.setWidth(width - 1);
var r = c.summaryRenderer || simpleRenderer;
field.setValue(r(value, {}, c.dataIndex));
}


container.items.each(function (field) {
var column = grid.headerCt.down('component[dataIndex="' + field.name + '"]');
field.setVisible(column.isVisible());
});


container.suspendLayout = false;
container.doLayout();
};


var simpleRenderer = function (v) {
return v;
};


var totalCost = function (records) {
var i = 0,
length = records.length,
total = 0,
record;


for (; i < length; ++i) {
record = records[i];
total += record.get('Estimate') * record.get('Rate');
}
return total;
};
</script>

</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server"/>

<ext:GridPanel
ID="GridPanel1"
runat="server"
Frame="true"
Title="Sponsored Projects"
Icon="ApplicationViewColumns"
Width="800"
Height="450">
<Store>
<ext:Store ID="Store1" runat="server" GroupField="Name">
<Sorters>
<ext:DataSorter Property="Due" Direction="DESC" />
</Sorters>
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="TaskID">
<Fields>
<ext:ModelField Name="ProjectID" />
<ext:ModelField Name="Name" />
<ext:ModelField Name="TaskID" />
<ext:ModelField Name="Description" />
<ext:ModelField Name="Estimate" Type="Int" />
<ext:ModelField Name="Rate" Type="Float" />
<ext:ModelField Name="Due" Type="Date" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server" ClicksToEdit="1">
<Listeners>
<Edit Handler="this.view.refresh();" />
</Listeners>
</ext:CellEditing>
</Plugins>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:SummaryColumn ID="SummaryColumn1"
runat="server"
TdCls="task"
Text="Task"
Sortable="true"
DataIndex="Description"
Hideable="false"
SummaryType="Count"
Flex="1">
<SummaryRenderer Handler="return ((value === 0 || value > 1) ? '(' + value +' Tasks)' : '(1 Task)');" />
</ext:SummaryColumn>

<ext:Column ID="Column1" runat="server" Text="Project" DataIndex="Name" Width="20" />

<ext:SummaryColumn ID="SummaryColumn2"
runat="server"
Width="85"
Text="Due Date"
Sortable="true"
DataIndex="Due"
SummaryType="Max">
<Renderer Format="Date" FormatArgs="'m/d/Y'" />
<SummaryRenderer Fn="Ext.util.Format.dateRenderer('m/d/Y')" />
<Editor>
<ext:DateField ID="DateField1" runat="server" Format="MM/dd/yyyy" />
</Editor>
</ext:SummaryColumn>

<ext:SummaryColumn ID="SummaryColumn3"
runat="server"
Width="75"
Text="Estimate"
Sortable="true"
DataIndex="Estimate"
SummaryType="Sum">
<Renderer Handler="return value +' hours';" />
<SummaryRenderer Handler="return value +' hours';" />
<Editor>
<ext:NumberField ID="NumberField1" runat="server" AllowBlank="false" AllowNegative="false" StyleSpec="text-align:left" />
</Editor>
</ext:SummaryColumn>

<ext:SummaryColumn ID="SummaryColumn4"
runat="server"
Width="75"
Text="Rate"
Sortable="true"
DataIndex="Rate"
SummaryType="Average">
<Renderer Format="UsMoney" />
<SummaryRenderer Fn="Ext.util.Format.usMoney" />
<Editor>
<ext:NumberField ID="NumberField2" runat="server" AllowBlank="false" AllowNegative="false" StyleSpec="text-align:left" />
</Editor>
</ext:SummaryColumn>

<ext:SummaryColumn
runat="server"
Width="75"
ID="Cost"
Text="Cost"
Sortable="false"
Groupable="false"
DataIndex="Cost"
CustomSummaryType="totalCost">
<Renderer Handler="return Ext.util.Format.usMoney(record.data.Estimate * record.data.Rate);" />
<SummaryRenderer Fn="Ext.util.Format.usMoney" />
</ext:SummaryColumn>
<ext:CommandColumn runat="server">
<Commands>
<ext:GridCommand Text="Submit" Icon="Tick"></ext:GridCommand>
<ext:GridCommand Text="Delete" Icon="Delete"></ext:GridCommand>
</Commands>
</ext:CommandColumn>
</Columns>
</ColumnModel>
<Listeners>
<ColumnResize Handler="updateTotal(this, #{Container1});" />
<ColumnMove Handler="updateTotal(this, #{Container1});" />
<ColumnHide Handler="updateTotal(this, #{Container1});" />
</Listeners>
<View>
<ext:GridView ID="GridView1" runat="server">
<Listeners>
<Refresh Handler="updateTotal(this.panel, #{Container1});" />
</Listeners>
</ext:GridView>
</View>
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Toggle Summary" ToolTip="Toggle the visibility of summary row">
<Listeners>
<Click Handler="#{Group1}.toggleSummaryRow(!#{Group1}.showSummaryR ow);#{Group1}.view.refresh();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Features>
<ext:GroupingSummary ID="Group1" runat="server" StartCollapsed="true" GroupHeaderTplString="{name}" HideGroupedHeader="true" EnableGroupingMenu="false">
</ext:GroupingSummary>
</Features>
<DockedItems>
<ext:Container ID="Container1" runat="server" Layout="HBoxLayout" Dock="Bottom" StyleSpec="margin-top:2px;">
<Defaults>
<ext:Parameter Name="height" Value="22" />
</Defaults>
<Items>
<ext:DisplayField ID="ColumnField1" runat="server" Name="Description" Cls="total-field" Text="-" />
<ext:DisplayField ID="ColumnField2" runat="server" Name="Due" Cls="total-field" Text="-" />
<ext:DisplayField ID="ColumnField3" runat="server" Name="Estimate" Cls="total-field" Text="-" />
<ext:DisplayField ID="ColumnField4" runat="server" Name="Rate" Cls="total-field" Text="-" />
<ext:DisplayField ID="ColumnField5" runat="server" Name="Cost" Cls="total-field" Text="-" />
</Items>
</ext:Container>
</DockedItems>
</ext:GridPanel>
</form>
</body>
</html>

Daniil
Apr 03, 2013, 4:16 PM
Hi @amitpareek,

First of all, please clarify what Ext.NET version are you using?

amitpareek
Apr 03, 2013, 4:26 PM
I am using v2.1

Daniil
Apr 03, 2013, 4:32 PM
The official release?

amitpareek
Apr 03, 2013, 4:41 PM
Downloaded last week from SVN.

However, it was the same in release version too.

Daniil
Apr 03, 2013, 4:48 PM
Probably, you have updated from the branches/2.

The latest Ext.NET is here:
http://svn.ext.net/premium/trunk

Running your sample with the latest Ext.NET there are the problems, but they differs from the one which you described.

They are:

1. StartCollapsed="true" doesn't work (if I am not wrong it doesn't work with v2.1 as well...). Here is a but report to Sencha.
http://www.sencha.com/forum/showthread.php?238728

There is a workaround (I have not tested yet).

2. The updateTotal function causes a JavaScript error. We will investigate.

amitpareek
Apr 03, 2013, 4:54 PM
I cannot use trunk as it uses ExtJS 4.2

Can u just test ur case in v2.1 from branches/2.1? startCollapsed works but buttons dont appear after expand.

amitpareek
Apr 03, 2013, 4:56 PM
Also just before I load data, I set it to startCollapsed=true because after loading data, for some reason, it is again reset to false. So I have to set it to true everytime I load data. But this issue is altogether a different issue than I am mentioning.

The buttons do not render when group is collapsed by default.

geoffrey.mcgill
Apr 03, 2013, 5:30 PM
I cannot use trunk as it uses ExtJS 4.2

What is reason for not using Ext JS 4.2?

amitpareek
Apr 03, 2013, 5:47 PM
Hi Geoff,
Our app is live and hence we cannot push 4.2 until we have thoroughly tested it. We may start looking at it probably in next 10-15 days. How stable it is now? We cannot take risks of unknown bugs coming up randomly.

This issue is critical, as we have to render each row on groupClick event which slows down the UI when there are more than 200-300 items in a group and hence I am looking for an immediate fix, somekind of override which I can implement now.

Vladimir
Apr 03, 2013, 6:12 PM
The problem that toobar cannot be rendered inside hidden area because hidden area has no size (zero size) therefore the toolbar cannot determine own size correctly

I suggest the following workaround:
- set the following PrepareToolbar for command column


<PrepareToolbar Handler="if(!toolbar.getWidth()){toolbar.needUpdate=true;}" />


- set the following GroupExpand listener for the view


<GroupExpand Fn="updateToolbarsLayout" />

var updateToolbarsLayout = function (view, node, group) {
var columns = view.panel.headerCt.getVisibleGridColumns(),
commandColummn = columns[columns.length - 1];


Ext.each(this.store.getGroups(group).children, function(r){
for (var i = 0, l = commandColummn.cache.length; i < l; i++) {
var t = commandColummn.cache[i];
if (t.record && (t.record.id == r.id) && t.needUpdate) {
t.updateLayout();
delete t.needUpdate;
break;
}
}
});
};


Another solution can be using OverOnly mode for CommandColumn

amitpareek
Apr 03, 2013, 7:14 PM
Hi Vlad,
A few questions :

1) what is commandColummn.cache?

2)How effective is this v/s grid.view.refreshNode(index)

3) Is this working in Ext.net 2.2 / Extjs 4.2?

Vladimir
Apr 03, 2013, 7:22 PM
1) what is commandColummn.cache?

'cache' is array of rendered toolbars of command column



2)How effective is this v/s grid.view.refreshNode(index)

Well, in my solution, toolbar updates own layout only (without detsroying and rerendering like in refreshNode case), i guess it should be better



3) Is this working in Ext.net 2.2 / Extjs 4.2?

Do you mean my fix or your sample? I did not test your sample (and fix as well) under Ext.Net 2.2

amitpareek
Apr 03, 2013, 7:52 PM
I mean my Sample.

amitpareek
Apr 03, 2013, 8:36 PM
Hi Vlad,
I updated my code according to your sample and it works well. Just need to know if this can be fixed by default in version 2.2 so that we don't need to do this hack.

amitpareek
Apr 04, 2013, 7:40 AM
Hi Vlad,
I also have RowExpander and checkbox is not visible after groupexpand.

How do I update the checkbox column on display? There is no cache for that column.

Daniil
Apr 04, 2013, 11:06 AM
Hi Vlad,
I updated my code according to your sample and it works well. Just need to know if this can be fixed by default in version 2.2 so that we don't need to do this hack.

We are checking the problem is reproducible with v2.2 or not.


Hi Vlad,
I also have RowExpander and checkbox is not visible after groupexpand.

How do I update the checkbox column on display? There is no cache for that column.

Could you, please, provide a test case?

Daniil
Apr 04, 2013, 12:02 PM
We are checking the problem is reproducible with v2.2 or not.

Yes, it was reproducible and fixed in SVN.

amitpareek
Apr 04, 2013, 9:24 PM
Hi Daniil,
1) If it can be fixed in v2.2 then probably in 2.1 too?

2) U can just add a RowExpander in the example I provided and you will know what I am talking about.

I will be testing v2.2 on the weekend, I will update you with my findings.

Thanks for all your help.

Daniil
Apr 05, 2013, 6:47 AM
1) If it can be fixed in v2.2 then probably in 2.1 too?

I am not sure what you mean. Fixed in v2.1 release?

Does not the suggested by Vladimir workaround work for you?



2) U can just add a RowExpander in the example I provided and you will know what I am talking about.


If I just add a RowExpander, I get JavaScript errors inside the updateTotal function. I corrected the function to avoid these error, but the issue is not reproducible in IE9, FireFox and Chrome.



I will be testing v2.2 on the weekend, I will update you with my findings.


Thank you!