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>