Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
40
Ignite Web Grid Grouping/Group by
posted

Trying to group data in a grid by with a bool value. when I do I get some goofy data in the footer of the gird for each grouping (see red section in attached). Cant get rid of it and I only want to show the summary info for the Count column. How can this be resolved? See page razor code below and attached. I do not want to use any Java or JQuery for this... I would appreciate any help on this matter.. Thanks in advance.

@using System.Data
@using Infragistics.Web.Mvc;
@*@model System.Data.DataTable*@
@*@model eMerchant.Reports.Models.EventTicketCheckIn*@
@model IQueryable<eMerchant.Reports.Models.EventTicketCheckIn>

<div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="row">
            <div id="container1" class="col-lg-4 col-md-8 col-sm-12 col-xs-12">

                @(Html.Infragistics().Grid<eMerchant.Reports.Models.EventTicketCheckIn>()
                                .ID("uigEventTicketCheckIn01")
                                .PrimaryKey("EventGUID")
                                .AutoGenerateLayouts(true)
                                .AutoGenerateColumns(false)
                                .AutoCommit(true)
                                .Caption("Event Ticket Check-ins <br/>" + (string)ViewBag.EventName)
                                .DataSource(Model)
                                .Width("100%")
                                .RenderCheckboxes(true)

                                .Columns(column =>
                                {
                                    column.For(x => x.EventGUID).DataType("string").Width("150px").HeaderText("EventGUID").Hidden(true);
                                    column.For(x => x.EventName).DataType("string").HeaderText("Event").Width("250px").Hidden(true);
                                    column.For(x => x.TicketTypeGUID).DataType("string").Width("150px").HeaderText("TicketTypeGUID").Hidden(true);
                                    column.For(x => x.TicketTypeName).DataType("string").Width("250px").HeaderText("Type").Hidden(false);
                                    column.For(x => x.CheckInCount).DataType("number").Width("100px").HeaderText("Count").HeaderCssClass("column-header-number").ColumnCssClass("column-cell-number").Format("0:0").Hidden(false);
                                    column.For(x => x.CheckedIn).DataType("bool").Width("100px").HeaderText("Check-in").Hidden(true);
                                })


                                .Features(features =>
                                {
                                    //features.Filtering().Type(OpType.Local);
                                    //features.Paging().Type(OpType.Local);
                                    features.Resizing();
                                    features.Selection().Mode(SelectionMode.Row).MultipleSelection(false);
                                    features.Tooltips().Visibility(TooltipsVisibility.Always);


                                    features.Sorting().Type(OpType.Local).Mode(SortingMode.Multiple).ColumnSettings(settings =>
                                    {
                                        settings.ColumnSetting().ColumnKey("CheckedIn").AllowSorting(true).CurrentSortDirection("ascending").FirstSortDirection("ascending");
                                        settings.ColumnSetting().ColumnKey("CheckedIn").AllowSorting(true).CurrentSortDirection("descending").FirstSortDirection("descending");
                                        //settings.ColumnSetting().ColumnKey("TicketTypeName").AllowSorting(true).CurrentSortDirection("ascending").FirstSortDirection("ascending");
                                    });


                                    features.Responsive().EnableVerticalRendering(false).ColumnSettings(settings =>
                                    {
                                        settings.ColumnSetting().ColumnKey("EventName").Configuration(config =>
                                        {
                                            config.AddColumnModeConfiguration("desktop", c => c.Hidden(true));
                                            config.AddColumnModeConfiguration("phone", c => c.Hidden(true));
                                            config.AddColumnModeConfiguration("tablet", c => c.Hidden(false));
                                        });

                                        settings.ColumnSetting().ColumnKey("TicketTypeName").Configuration(config =>
                                        {
                                            config.AddColumnModeConfiguration("desktop", c => c.Hidden(false));
                                            config.AddColumnModeConfiguration("phone", c => c.Hidden(false));
                                            config.AddColumnModeConfiguration("tablet", c => c.Hidden(false));
                                        });

                                        settings.ColumnSetting().ColumnKey("CheckInCount").Configuration(config =>
                                        {
                                            config.AddColumnModeConfiguration("desktop", c => c.Hidden(false));
                                            config.AddColumnModeConfiguration("phone", c => c.Hidden(false));
                                            config.AddColumnModeConfiguration("tablet", c => c.Hidden(false));
                                        });

                                        settings.ColumnSetting().ColumnKey("CheckedIn").Configuration(config =>
                                        {
                                            config.AddColumnModeConfiguration("desktop", c => c.Hidden(true));
                                            config.AddColumnModeConfiguration("phone", c => c.Hidden(true));
                                            config.AddColumnModeConfiguration("tablet", c => c.Hidden(true));
                                        });
                                    });


                                    //Enable groupBy feature
                                    features.GroupBy()
                                    .Type(OpType.Local)
                                    .GroupByAreaVisibility(GroupAreaVisibility.Hidden)
                                    .FeatureChooserTextHide("")

                                    .ColumnSettings(groupedGolumn =>
                                    {
                                        //groupedGolumn.ColumnSetting()
                                        //.ColumnKey("EventGUID").IsGroupBy(false).AllowGrouping(false).GroupSummaries(false)
                                        //.ColumnKey("EventName").IsGroupBy(false).AllowGrouping(false).GroupSummaries(false)
                                        //.ColumnKey("TicketTypeGUID").IsGroupBy(false).AllowGrouping(false).GroupSummaries(false)
                                        //.ColumnKey("TicketTypeName").IsGroupBy(false).AllowGrouping(false).GroupSummaries(true)
                                        //.ColumnKey("CheckInCount").IsGroupBy(false).AllowGrouping(false).GroupSummaries(true)
                                        //.ColumnKey("CheckedIn").IsGroupBy(true).AllowGrouping(true).GroupSummaries(false);

                                        groupedGolumn.ColumnSetting().ColumnKey("EventGUID").IsGroupBy(false).AllowGrouping(false).GroupSummaries(false);
                                        groupedGolumn.ColumnSetting().ColumnKey("EventName").IsGroupBy(false).AllowGrouping(false).GroupSummaries(false);
                                        groupedGolumn.ColumnSetting().ColumnKey("TicketTypeGUID").IsGroupBy(false).AllowGrouping(false).GroupSummaries(false);
                                        groupedGolumn.ColumnSetting().ColumnKey("TicketTypeName").IsGroupBy(false).AllowGrouping(false).GroupSummaries(false);
                                        groupedGolumn.ColumnSetting().ColumnKey("CheckInCount").IsGroupBy(false).AllowGrouping(false).GroupSummaries(true);
                                        groupedGolumn.ColumnSetting().ColumnKey("CheckedIn").IsGroupBy(true).AllowGrouping(true).GroupSummaries(false);
                                    })

                                    .DefaultSortingDirection("descending")

                                    //Enable group summaries
                                    .GroupSummaries(true)
                                    .GroupSummariesPosition(GroupSummariesPositionMode.Bottom);

                                    features.Summaries().ShowSummariesButton(false).ShowDropDownButton(false).ColumnSettings(settings =>
                                    {
                                        settings.ColumnSetting().ColumnKey("EventGUID").AllowSummaries(false);
                                        settings.ColumnSetting().ColumnKey("EventName").AllowSummaries(false);
                                        settings.ColumnSetting().ColumnKey("TicketTypeGUID").AllowSummaries(false);
                                        settings.ColumnSetting().ColumnKey("TicketTypeName").AllowSummaries(false);
                                        settings.ColumnSetting().ColumnKey("CheckedIn").AllowSummaries(false);

                                        settings.ColumnSetting().ColumnKey("CheckInCount").SummaryOperands(so =>
                                        {
                                            so.SummaryOperand().Type(SummaryFunction.Sum).RowDisplayLabel("Total").Active(true);
                                        });

                                    });
                                })

                                .DataBind()
                                .Render()
                )

            </div>
        </div>

    </div>
</div>

<style>
    /* align particular summary */
    /* .ui-iggrid-summarycolumn:nth-child(5) {
        text-align: right;
    } */

    /*.ui-iggrid-summarycolumn:last-child{
        text-align: right;
    }*/

    .ui-iggrid-summarycolumn {
        text-align: right;
    }

    .ui-iggrid-summaries-footer-text-container {
        text-align: right !important;
        padding-right: 10px;
    }
</style>



<script type="text/javascript">

    //$("#uigEventTicketCheckIns").igGrid({
    //    dataBinding: function (evt, ui) {
    //        $("#uigEventTicketCheckIns_container_loading").css("display", "none");
    //    }
    //});

</script>

Parents
  • 700
    Offline posted

    Hello John,

    Thank you for posting into our community!

    I have been looking into your question and what I would suggest is enabling the GroupSummeries method for the TicketTypeName column, this will display the Count summary for the column.

    // Enable groupBy feature
    
    features.GroupBy()
        .Type(OpType.Local)
        .GroupByAreaVisibility(GroupAreaVisibility.Hidden)
        .FeatureChooserTextHide("")
        .ColumnSettings(groupedGolumn =>
        {
            ...
            groupedGolumn.ColumnSetting().ColumnKey("TicketTypeName").IsGroupBy(false).AllowGrouping(false).GroupSummaries(true);
            ...
        });

    Then, when defining the columns, the data type should be set to boolean instead of bool. Here could be found the available data types.

    .Columns(column =>
    {
        ...
        column.For(x => x.CheckedIn).DataType("boolean").Width("100px").HeaderText("Check-in").Hidden(true);
    })

    Please test this approach on your side and let me know if you need any further assistance regarding this matter.

    Looking forward to your reply.

    Sincerely,
    Riva Ivanova
    Associate Software Developer

Reply Children