Grid group template - apply only for specific column

[Kevin]

I have a grid that I would like to be groupable by several columns.

In the example below, it is Pattern and State.  Looking at the pattern for SMTWTFS you can see I have a button for both PA and SMTWTFS when I'd like to only have the button show for Pattern (SMTWTFS)

 

I think I only have the template on my Pattern column, so not sure why it is showing by state as well.  Is there any way I can stop it applying at the State group line too?  I've tried giving it its own group template, but with and without does not work.

 

    @(Html.Kendo().Grid<WM_SupplyChainPortal.Models.Schedule.Views.ChangeScheduleStorePattern>
    ()
    .Name("storepattern")
    .Columns(columns =>
    {
    columns.Bound(s => s.Store).Filterable(ftb => ftb.Multi(true)).Groupable(false);
    columns.Bound(s => s.StoreName).Filterable(ftb => ftb.Multi(false)).Groupable(false);
    columns.Bound(s => s.State).Filterable(ftb => ftb.Multi(true)).Groupable(true).ClientGroupFooterTemplate("");
    columns.Bound(s => s.Region).Filterable(ftb => ftb.Multi(true)).Groupable(true);
    columns.Bound(s => s.District).Filterable(ftb => ftb.Multi(true)).Groupable(true);
    columns.Bound(p => p.Pattern).Filterable(ftb => ftb.Multi(true)).ClientGroupFooterTemplate("#=value# <button class='myButton' onclick='confirmGroup(\"#=value#\")'>Edit</button>");
    })
    .Sortable()
    .PersistSelection()
    .Scrollable(s => s.Height("465px"))
    .Groupable()
    .Filterable()
    .HtmlAttributes(new { style = "height:600px;" })
    .Resizable(r => r.Columns(true))
    .Reorderable(reorder => reorder.Columns(true))
    .DataSource(dataSource => dataSource
    .Ajax()
    .Model(model => model.Id(p => p))
    .Read(read => read.Action("ChangeStorePatterns", "Schedule"))
    )
    )

[Yanislav]

Hello Kevin,

In order to display the footer template only when the data is grouped by the column, the template is specified to, I recommend you the following approach. Please review the snippet below :

<script>
    $(document).ready(function () {
        var grid = $("#grid").data('kendoGrid');
        var options = grid.getOptions();

        var groupTemplate = function (e) {
            console.log(e)
            if(e.field == "ShipCity"){
                return `${e.value} <button class='myButton'>Edit</button> `;

            }
            return ""
        }
        var column = options.columns.find(x => {
            return x.field === "ShipCity"
        })
        column.groupFooterTemplate = groupTemplate;
        grid.setOptions(options)
    })
</script>

Since this is not the default behavior of the functionality, a changing of the options of the Grid is required. As you can see, by using the setOptions() you can change the footer template of a column to be equal to the result of a function. This way only if the Grid is being grouped by the specified field the template would be rendered. In any other way, the template for the column will be an empty string.

I hope this helps!

Regards,
Yanislav
Progress Telerik

[Kevin]

That worked perfectly.  Thanks Yanislav!