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() )
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
Hi Riva,I do have one more question/request. I would like to enableVerticalRendering only on small displays. Is that possible to do?Thank you again.
Hello Riva,
Thank you for the quick response.
That was exactly what I was looking for! Did not realize that was a feature of the grid.Wonder what else I have overlooked on the grid.
Thanks!