[CLOSED] [#550] GroupHeaderTpl not working when gridpanel has GroupCommands

[PriceRightHTML5team]

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]

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]

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]

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]

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]

I remember this post.
http://forums.ext.net/showthread.php...l=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]

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.PagingPrevious)
                                                                .NextText(PR.Resources.Common.Common.PagingNext)
                                                                .LastText(PR.Resources.Common.Common.PagingLast)
                                                                .DisplayMsg(PR.Resources.Common.Common.PagingDisplayMsg)
                                                                .BeforePageText(PR.Resources.Common.Common.PaggingBeforePageText)
                                                                .AfterPageText(PR.Resources.Common.Common.PaggingAfterPageText)
                                                                .EmptyMsg(PR.Resources.Common.Common.PaggingEmptyMsg)
    )
)

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]

I am getting a compilation error:

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

[PriceRightHTML5team]

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]

Yes, I changed that before.

There are other appearances of "PR".