Grid group template - apply only for specific column

1 Answer 60 Views
Grid
Kevin
Top achievements
Rank 2
Iron
Iron
Iron
Kevin asked on 09 Mar 2022, 02:08 PM

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"))
    )
    )

1 Answer, 1 is accepted

Sort by
1
Accepted
Yanislav
Telerik team
answered on 14 Mar 2022, 11:42 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Kevin
Top achievements
Rank 2
Iron
Iron
Iron
commented on 22 Mar 2022, 02:55 PM

That worked perfectly.  Thanks Yanislav!
Tags
Grid
Asked by
Kevin
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Yanislav
Telerik team
Share this question
or