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

[PriceRightHTML5team]

Kindly comment the bottom bar section.

[Daniil]

Please edit your post with the test case. Otherwise, anyone who wants to run the test case will need to comment it out.

[PriceRightHTML5team]

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]

Any Updates on this ?

[Daniil]

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.setupRowData, this.getGroupData, this);
        }

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

[Daniil]

Please clarify does it work for you?

I am thinking about adding that to SVN.

[PriceRightHTML5team]

The issue i posted got resolved after adding the given fix.

[Daniil]

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!