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,
I am glad that you find my suggestion helpful.
Thank you for using Infragistics components.
Regards,Riva IvanovaEntry Level Software Developer
Hello Riva,That seem to have done it.. Thank you very much again.
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
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!