PDA

View Full Version : [CLOSED] [#550] GroupHeaderTpl not working when gridpanel has GroupCommands



PriceRightHTML5team
Aug 28, 2014, 12:53 PM
Hi,

Mine is an Asp.Net MVC razor view application.

I have a gridpanel to which I have GroupCommands (see below markup)


Html.X().ImageCommandColumn()
.Hidden(true)
.GroupCommands(
Html.X().GroupImageCommand()
.CommandName("viewNotes")
.Icon(Icon.ApplicationViewDetail)
.RightAlign(true)
.Text(Master.ViewNotes)

)
.Listeners(ls =>
ls.GroupCommand.Fn = "onGroupCommand"
)

Further I need to use GroupHeaderTpl (see below markup)


Html.X().Grouping()
.HideGroupedHeader(false)
.GroupHeaderTpl(
Html.X().XTemplate()
.Functions(fs => fs.Add(new JFunction() { Name = "fun1", Fn = "fun1"}))
.Html(@"<div <tpl if=""!this.SetClass123(groupValue, children)"">class=""false""</tpl>>
Group: {name}
</div>")
)

The fun1() function is not called when the above mentioned group command is added to gridpanel.

Kindly provide your inputs

Daniil
Aug 29, 2014, 4:57 AM
Hi @PriceRightHTML5team,

I think that a GroupHeaderTpl has no relation to GroupCommands and otherwise.

Also I don't see any call of the fun1 function. So, I don't quite understand why it should be executed ever.

PriceRightHTML5team
Sep 01, 2014, 6:43 AM
Hi Daniil,

There was a mistake in the function call statement in the markup i posted. Below is the updated markup. The issue still persists.


Html.X().Grouping()
.HideGroupedHeader(false)
.GroupHeaderTpl(
Html.X().XTemplate()
.Functions(fs => fs.Add(new JFunction() { Name = "fun1", Fn = "fun1"}))
.Html(@"<div <tpl if=""!this.fun1(groupValue, children)"">class=""false""</tpl>>
Group: {name}
</div>")
)

Daniil
Sep 01, 2014, 12:49 PM
The issue still persists.

Probably, because of that:


I think that a GroupHeaderTpl has no relation to GroupCommands and otherwise.

Maybe, I misunderstand something.

PriceRightHTML5team
Sep 01, 2014, 12:56 PM
Hi Daniil,

The issue i posted is not resolved.

In my initial post there was a mistake, in place of "fun1()" i had written "SetClass123()".
This i rectified on my second post.

Kindly provide your inputs.

Daniil
Sep 02, 2014, 12:27 PM
I remember this post.
http://forums.ext.net/showthread.php?26745&p=118799&viewfull=1#post118799

And this phrase

For all future posts in these forums, you must provide a runnable sample that accurately demonstrates how to reproduce the problem

PriceRightHTML5team
Sep 08, 2014, 7:52 AM
Hi Daniil,

Following is the testcase Model, Controller and view respectively;



public class ReimbursementDTO
{
public int PACK_CD { get; set; }
public int REIMBURSEMENT_CD { get; set; }
}







public ActionResult Test()
{
List<ReimbursementDTO> lstR = new List<ReimbursementDTO>();
lstR.Add(new ReimbursementDTO {REIMBURSEMENT_CD = 1, PACK_CD = 100 });
lstR.Add(new ReimbursementDTO { REIMBURSEMENT_CD =2, PACK_CD = 101 });
lstR.Add(new ReimbursementDTO { REIMBURSEMENT_CD = 3, PACK_CD = 102 });
lstR.Add(new ReimbursementDTO { REIMBURSEMENT_CD = 4, PACK_CD = 103 });
return View(lstR);
}





@model List<PR.DTO.ReimbursementDTO>

@{
ViewBag.Title = "Test";
}

<h2>Test</h2>

<style>
.past-row .x-grid-cell {
background-color: #FCE4D6 !important;
}

.past-row{
background-color: #FCE4D6 !important;
}

.current-row .x-grid-cell {
background-color: #fff4b6 !important;
}
</style>

<script>
var onGroupCommand = function (column, command, group) {

};

var isX = function (groupValue, records) {
var i;
var flag = false;
@*for (i = 0; i < records.length; i++) {
if (records[i].data.CURRENT_IND == 1 || records[i].data.DATE_STATUS != -1) {
flag = true;
break;
}
}*@
return flag;
};

function setHeader() {
if (document.all && document.querySelector && !document.addEventListener) { @*IF IE 8 we use different way to select the class name*@
var elements = getElementsByClassName1('false');@*we use another way to get element by class name*@
}
else {
var elements = document.getElementsByClassName('false');
}
for (var i = 0; i < elements.length; i++) {
elements[i].parentNode.parentNode.className += ' past-row';
}
}

var getRowClass = function (record) {

return "current-row";
};
</script>

@Html.X().ResourceManager().CleanResourceUrl(false )

@(
Html.X().GridPanel()
.ID("grdPackReimbursement")
.Scroll(ScrollMode.Both)
.OverflowX(Overflow.Auto)
.EnableColumnHide(false)
.ColumnLines(true)
.ForceFit(false)
.EmptyText("No rows to display")
.Store(
Html.X().Store()
//.Listeners(ls => ls.Load.Handler = "App.StorePackIndication.load();setGridWidth();")
.RemotePaging(false)
.ID("grdStorePackReimbursement")
.GroupField("REIMBURSEMENT_CD")
.Model(
Html.X().Model()
.ID("grdModelPackReimbursement")
.Fields(
new ModelField("REIMBURSEMENT_CD")
,new ModelField("PACK_CD")
)
)
.DataSource(Model)
)
.ColumnModel(
Html.X().Column().DataIndex("REIMBURSEMENT_CD").Text("REIMBURSEMENT_CD").Groupable(true).Flex(1),
Html.X().Column().Text("PACK_CD").DataIndex("PACK_CD").Groupable(true).Flex(1)
//,
//Html.X().ImageCommandColumn()
//.Hidden(true)
//.GroupCommands(
// Html.X().GroupImageCommand()
// .CommandName("viewNotes")
// .Icon(Icon.ApplicationViewDetail)
// .RightAlign(true)
// .Text("Notes")

//)



//.Listeners(ls =>
// ls.GroupCommand.Fn = "onGroupCommand"
//)
,
Html.X().CommandColumn().Text("ToolBars")
.Width(100)
.Align(Alignment.Left)
.Commands(
Html.X().GridCommand()
.Icon(Icon.NoteEdit)
.CommandName("Edit")
.Text("Edit")
)
.Sortable(false)
//.Listeners(ls => ls.Command.Fn = "editReimbursement")
//.PrepareToolbar("prepare")
)

.Features(
Html.X().Grouping()
.HideGroupedHeader(false)
.GroupHeaderTpl(
Html.X().XTemplate()
.Functions(fs => fs.Add(new JFunction() { Name = "isX", Fn = "isX" }))
.Html(@"<div <tpl if=""!this.isX(groupValue, children)"">class=""false""</tpl>>
Group: {name}
</div>")
)
)
.Listeners(ls => { ls.CellClick.Fn = "setHeader"; ls.SelectionChange.Fn = "setHeader"; ls.GroupClick.Fn = "setHeader"; })
.View(
Html.X().GridView().GetRowClass(grc => grc.Fn = "getRowClass").LoadMask(true).LoadingText("Loading...")
//.Listeners(events => { events.Refresh.Handler = "setHeader();"; })
)
.BottomBar(
Html.X().PagingToolbar()
.HideRefresh(true)
.ID("PageBar")
.FirstText(PR.Resources.Common.Common.PagingFirst)
.PrevText(PR.Resources.Common.Common.PagingPreviou s)
.NextText(PR.Resources.Common.Common.PagingNext)
.LastText(PR.Resources.Common.Common.PagingLast)
.DisplayMsg(PR.Resources.Common.Common.PagingDispl ayMsg)
.BeforePageText(PR.Resources.Common.Common.Pagging BeforePageText)
.AfterPageText(PR.Resources.Common.Common.PaggingA fterPageText)
.EmptyMsg(PR.Resources.Common.Common.PaggingEmptyM sg)
)
)


Issue:
Currently i have commented the ImageCommandColumn. So, isX() javascript function written in GroupHeaderTpl gets called.
But when i uncomment ImageCommandColumn isX() not gets called. I have business logic in isX() function to set group header string.

Daniil
Sep 08, 2014, 10:35 AM
I am getting a compilation error:

The name 'PR' does not exist in the current context

PriceRightHTML5team
Sep 08, 2014, 10:46 AM
Kindly replace the first line in view
@model List<PR.DTO.ReimbursementDTO>

with
@model List<ReimbursementDTO>

It's nothing but the name of the model class.

Daniil
Sep 08, 2014, 10:56 AM
Yes, I changed that before.

There are other appearances of "PR".

PriceRightHTML5team
Sep 08, 2014, 11:12 AM
Kindly comment the bottom bar section.

Daniil
Sep 08, 2014, 11:21 AM
Please edit your post with the test case. Otherwise, anyone who wants to run the test case will need to comment it out.

PriceRightHTML5team
Sep 08, 2014, 11:40 AM
Below is the updated testcase

Model

public class ReimbursementDTO
{
public int PACK_CD { get; set; }
public int REIMBURSEMENT_CD { get; set; }
}

Controller's Action Method


public ActionResult Test()
{
List<ReimbursementDTO> lstR = new List<ReimbursementDTO>();
lstR.Add(new ReimbursementDTO {REIMBURSEMENT_CD = 1, PACK_CD = 100 });
lstR.Add(new ReimbursementDTO { REIMBURSEMENT_CD =2, PACK_CD = 101 });
lstR.Add(new ReimbursementDTO { REIMBURSEMENT_CD = 3, PACK_CD = 102 });
lstR.Add(new ReimbursementDTO { REIMBURSEMENT_CD = 4, PACK_CD = 103 });
return View(lstR);
}



View

@model List<ReimbursementDTO>

@{
ViewBag.Title = "Test";
}

<h2>Test</h2>

<style>
.past-row .x-grid-cell {
background-color: #FCE4D6 !important;
}

.past-row{
background-color: #FCE4D6 !important;
}

.current-row .x-grid-cell {
background-color: #fff4b6 !important;
}
</style>

<script>

var onGroupCommand = function (column, command, group) {

};

var isX = function (groupValue, records) {
var i;
var flag = false;
@*for (i = 0; i < records.length; i++) {
if (records[i].data.CURRENT_IND == 1 || records[i].data.DATE_STATUS != -1) {
flag = true;
break;
}
}*@
return flag;
};

function setHeader() {
if (document.all && document.querySelector && !document.addEventListener) { @*IF IE 8 we use different way to select the class name*@
var elements = getElementsByClassName1('false');@*we use another way to get element by class name*@
}
else {
var elements = document.getElementsByClassName('false');
}
for (var i = 0; i < elements.length; i++) {
elements[i].parentNode.parentNode.className += ' past-row';
}
}

var getRowClass = function (record) {
@* if (record.data.DATE_STATUS.toString() == "-1") {
return "past-row";
}
else if (record.data.DATE_STATUS.toString() == "0") {
return "current-row";
}*@
};
</script>

@Html.X().ResourceManager().CleanResourceUrl(false )

@(
Html.X().GridPanel()
.ID("grdPackReimbursement")
.Scroll(ScrollMode.Both)
.OverflowX(Overflow.Auto)
.EnableColumnHide(false)
.ColumnLines(true)
.ForceFit(false)
.EmptyText("No rows to display")
.Store(
Html.X().Store()
//.Listeners(ls => ls.Load.Handler = "App.StorePackIndication.load();setGridWidth();")
.RemotePaging(false)
.ID("grdStorePackReimbursement")
.GroupField("INDICATION_DESC")
.Model(
Html.X().Model()
.ID("grdModelPackReimbursement")
.Fields(
new ModelField("REIMBURSEMENT_CD")
,new ModelField("PACK_CD")
)
)
.DataSource(Model)
)
.ColumnModel(
Html.X().Column().DataIndex("REIMBURSEMENT_CD").Text("REIMBURSEMENT_CD").Groupable(true).Flex(1),
Html.X().Column().Text("PACK_CD").DataIndex("PACK_CD").Groupable(true).Flex(1),
Html.X().ImageCommandColumn()
.Hidden(true)
.GroupCommands(
Html.X().GroupImageCommand()
.CommandName("viewNotes")
.Icon(Icon.ApplicationViewDetail)
.RightAlign(true)
.Text("Notes")

)
.Listeners(ls =>
ls.GroupCommand.Fn = "onGroupCommand"
)
,
Html.X().CommandColumn().Text("ToolBars")
.Width(100)
.Align(Alignment.Left)
.Commands(
Html.X().GridCommand()
.Icon(Icon.NoteEdit)
.CommandName("Edit")
.Text("Edit")
)
.Sortable(false)
//.Listeners(ls => ls.Command.Fn = "editReimbursement")
//.PrepareToolbar("prepare")
)

.Features(
Html.X().Grouping()
.HideGroupedHeader(false)
.GroupHeaderTpl(
Html.X().XTemplate()
.Functions(fs => fs.Add(new JFunction() { Name = "isX", Fn = "isX"}))
.Html(@"<div <tpl if=""!this.isX(groupValue, children)"">class=""false""</tpl>>
Group: {name}
</div>")
)
)
.Listeners(ls => { ls.CellClick.Fn = "setHeader"; ls.SelectionChange.Fn = "setHeader"; ls.GroupClick.Fn = "setHeader"; })
.View(
Html.X().GridView().GetRowClass(grc => grc.Fn = "getRowClass").LoadMask(true).LoadingText("Loading...")
//.Listeners(events => { events.Refresh.Handler = "setHeader();"; })
)
)

PriceRightHTML5team
Sep 09, 2014, 11:14 AM
Any Updates on this ?

Daniil
Sep 09, 2014, 12:43 PM
Please try this fix.

Ext.grid.column.ImageCommand.override({
initRenderData: function () {
var me = this;
me.grid = me.up('tablepanel');
me.grid.addCls("x-grid-group-imagecommand");
var groupFeature = me.getGroupingFeature(me.grid);

if (me.groupCommands && groupFeature) {
me.grid.view.on('groupclick', me.onGroupClick, me);

me.grid.view.on('containerclick', me.onClick, me);

if (Ext.isString(groupFeature.groupHeaderTpl)) {
groupFeature.groupHeaderTpl = '<div class="group-row-imagecommand-cell">' + groupFeature.groupHeaderTpl + '</div>' + this.groupCommandTemplate;
} else if (groupFeature.groupHeaderTpl && groupFeature.groupHeaderTpl.html) {
groupFeature.groupHeaderTpl.html = '<div class="group-row-imagecommand-cell">' + groupFeature.groupHeaderTpl.html + '</div>' + this.groupCommandTemplate;
}

groupFeature.commandColumn = me;
groupFeature.setupRowData = Ext.Function.createSequence(groupFeature.setupRowD ata, this.getGroupData, this);
}

return Ext.grid.column.ImageCommand.superclass.initRender Data.apply(this, arguments);
}
});

Daniil
Sep 16, 2014, 10:53 AM
Please clarify does it work for you?

I am thinking about adding that to SVN.

PriceRightHTML5team
Sep 16, 2014, 11:06 AM
The issue i posted got resolved after adding the given fix.

Daniil
Sep 16, 2014, 5:58 PM
Thank you for the confirmation.

Created an Issue:
https://github.com/extnet/Ext.NET/issues/550

The fix has been added to the SVN trunk in the revision #5976. It will go to the v2.5.3 release.

Thank you for the report!