Forums Ignite UI for ASP.NET MVC
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
Close
Richard Tamouzian
135
Hiding Grid Columns on Small Displays
posted

Hello,

Hello I have a question regarding the igGrid in an ASP.NET MVC using razor website including Bootstrap.

I want to create a view that hides certain columns, summary bars, fillers and headers and everything else that is related to the column on small displays. I tried adding bootstrap class to the HeaderCssClass and ColumnCssClass properties but that seemed like a disaster and did not work well or at all. The filter bar and summary row still displayed on small displays. Below is my grid that works well but now i want to change it so it only displays a few columns when using a small display.

Thanks

                @(Html.Infragistics().Grid<eMerchant.Reports.Models.EventSummary>()
                                                    .ID("uigOrderSummary")
                                                    .PrimaryKey("OrderGUID")
                                                    .AutoGenerateLayouts(true)
                                                    .AutoGenerateColumns(false)
                                                    .AutoCommit(true)
                                                    .DataSource(Model)
                                                    .Width("100%")
                                                    .RenderCheckboxes(true)

                                                    .Columns(column =>
                                                    {
                                                        column.Unbound("orders").HeaderText("").Width("60px").HeaderCssClass("").ColumnCssClass("").Template("<a class='link' href='" + Url.Action("OrderList", "Orders", new { area = "Reports" }) + "?EventGUID=${EventGUID}&ProductGUID=${ProductGUID}&FromDate=" + HttpContext.Current.Server.UrlEncode(ViewBag.CriteriaFromDate) + "&ToDate=" + HttpContext.Current.Server.UrlEncode(ViewBag.CriteriaToDate) + "&ShowFailedOrders=" + ViewBag.ShowFailedOrders + "&DisplayListInGet=true&UrlSource=EventSummary'" + " target='_blank'>Orders</a>").Hidden(false);
                                                        column.For(x => x.EventGUID).DataType("string").HeaderText("EventGUID").Hidden(true);
                                                        column.For(x => x.EventName).DataType("string").HeaderText("Event").Width("150px").HeaderCssClass("").ColumnCssClass("").Hidden(false);
                                                        column.For(x => x.ProductTypeName).DataType("string").HeaderText("Type").HeaderCssClass("").ColumnCssClass("").Hidden(false);
                                                        column.For(x => x.ProductGUID).DataType("string").HeaderText("ProductGUID").Hidden(true);
                                                        column.For(x => x.ProductName).DataType("string").Width("200px").HeaderText("Product").Hidden(false);
                                                        column.For(x => x.ProductSKU).DataType("string").Width("100px").HeaderText("SKU").HeaderCssClass("").ColumnCssClass("").Hidden(false);
                                                        column.For(x => x.EventProductGUID).DataType("string").HeaderText("EventProductGUID").Hidden(true);
                                                        column.For(x => x.EventProducts_ProductSKU).DataType("string").HeaderText("SKU").Hidden(true);
                                                        column.For(x => x.EventProducts_ProductName).DataType("string").HeaderText("Product").Hidden(true);
                                                        column.For(x => x.NoOfOrders).DataType("number").Width("100px").HeaderText("Orders").Format("0:0").Hidden(false);
                                                        column.For(x => x.NoOfItems).DataType("number").HeaderText("Items").Format("0:0").Hidden(true);
                                                        column.For(x => x.Quantity).DataType("number").Width("100px").HeaderText("Quantity").Format("0:0").Hidden(false);
                                                        column.For(x => x.ItemUnitPrice).DataType("number").Width("150px").HeaderText("Price").Format("0:$0.00").HeaderCssClass("").ColumnCssClass("").Hidden(false);
                                                        column.For(x => x.SubTotal).DataType("number").Width("150px").HeaderText("Subtotal").Format("0:$0.00").HeaderCssClass("").ColumnCssClass("").Hidden(false);
                                                        column.For(x => x.SalesTax).DataType("number").Width("150px").HeaderText("Sales Tax").Format("0:$0.00").HeaderCssClass("").ColumnCssClass("").Hidden(false);
                                                        column.For(x => x.ProcessngFees).DataType("number").Width("150px").HeaderText("Processiing Fees").Format("0:$0.00").HeaderCssClass("").ColumnCssClass("").Hidden(false);
                                                        column.For(x => x.Total).DataType("number").Width("150px").HeaderText("Total").Format("0:$0.00").HeaderCssClass("").ColumnCssClass("").Hidden(false);
                                                    })

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

                                                        features.Summaries().ShowSummariesButton(false).ShowDropDownButton(false).ColumnSettings(settings =>
                                                        {
                                                            settings.ColumnSetting().ColumnKey("EventGUID").AllowSummaries(false);
                                                            settings.ColumnSetting().ColumnKey("EventName").AllowSummaries(false);
                                                            settings.ColumnSetting().ColumnKey("ProductTypeName").AllowSummaries(false);
                                                            settings.ColumnSetting().ColumnKey("ProductName").AllowSummaries(false);
                                                            settings.ColumnSetting().ColumnKey("ProductSKU").AllowSummaries(false);
                                                            settings.ColumnSetting().ColumnKey("EventProducts_ProductSKU").AllowSummaries(false);
                                                            settings.ColumnSetting().ColumnKey("EventProducts_ProductName").AllowSummaries(false);
                                                            settings.ColumnSetting().ColumnKey("ItemUnitPrice").AllowSummaries(false);
                                                            settings.ColumnSetting().ColumnKey("NoOfOrders").AllowSummaries(false);
                                                            settings.ColumnSetting().ColumnKey("NoOfItems").AllowSummaries(false);


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

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

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

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

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

Parents
  • 700
    Offline posted

    Hello Richard,

    Thank you for posting into our community!

    I have been looking into your question and an approach I could suggest, in order to display fewer columns when using a smaller display, is configuring the igGridResponsive feature. Additionally, what I believe that you will find quite helpful is our Configuring Column Hiding topic here as well as this example that demonstrates how columns could be hidden for different display modes.

    Additionally, please make sure that the enableVerticalRendering option is set to false as the default value is true and the igGrid will render the data in two columns as demonstrated in our Responsive Vertical Rendering sample here.

    This could be achieved as follows:

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

    Additionally, regarding hiding the filtering and summaries rows what I could suggest is getting a reference to the respective element and setting its display style to none.

    The igGrid’s rendered event could be used for setting the display style when the grid is initially displayed. This could look as follows:

    $("#grid").on("iggridrendered", function (evt, ui) {
    var filterRow = document.getElementsByClassName('ui-iggrid-filterrow ui-widget')[0];
    var summariesRow = document.getElementById('grid_footer_container');
    var mode = $("#grid").igGridResponsive("getCurrentResponsiveMode");

    if (mode !== 'desktop') {
        filterRow.style.display = "none";
        summariesRow.style.display = "none";
     } else {
         filterRow.style.display = "";
        summariesRow.style.display = "";
    }
});

    However, in case these rows should be hidden/shown when the responsive mode is changed, i.e., the display is resized, what I could suggest is using the igGridResponsive feature’s responsiveModeChanged event.

    This could look similar to the following:

    $("#grid").on("iggridresponsiveresponsivemodechanged", function (evt, ui) {
    var filterRow = document.getElementsByClassName('ui-iggrid-filterrow ui-widget')[0];
    var summariesRow = document.getElementById('grid_footer_container');
 
    if (ui.mode !== 'desktop') {
        filterRow.style.display = "none";
        summariesRow.style.display = "none";
    } else {
        filterRow.style.display = "";
        summariesRow.style.display = "";
    }
});

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

    Looking forward to your reply.

    Sincerely,
    Riva Ivanova
    Entry Level Software Developer

  • 700
    Offline posted in reply to Richard Tamouzian

    Hello Richard,

    Thank you for following up!

    I have been looking into your additional question and what I could suggest is using the following lines of code in the rendered and responsiveModeChanged events:

    $("#grid").igGridResponsive("option", "enableVerticalRendering", true);

$("#grid").igGridResponsive("option", "enableVerticalRendering", false);
     

    The following lines of code demonstrate how the vertical rendering could be enabled when the responsive mode is either tablet or phone:

    // when the igGrid is initially rendered

$("#grid").on("iggridrendered", function (evt, ui) {
    var mode = $("#grid").igGridResponsive("getCurrentResponsiveMode");
    
    if (mode !== 'desktop') {
        $("#grid").igGridResponsive("option", "enableVerticalRendering", true);
    } else {
        $("#grid").igGridResponsive("option", "enableVerticalRendering", false);
    }
});
     

    // when the responsive mode is changed, i.e., the display is resized

$("#grid").on("iggridresponsiveresponsivemodechanged", function (evt, ui) {

    if (ui.mode !== 'desktop') {
        $("#grid").igGridResponsive("option", "enableVerticalRendering", true);
    } else {
        $("#grid").igGridResponsive("option", "enableVerticalRendering", false);
    }
});

    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
    Entry Level Software Developer

Reply Children
No Data