@(Html.Infragistics() .Grid<User>() .ID("grid") .Width("100%") .Height("100%") .Caption("Users") .ShowHeader(true) .PrimaryKey("UserRecordID") .AutoGenerateColumns(false) .DefaultColumnWidth("5%") .Columns(column => { column.For(x => x.UserRecordID).HeaderText("Record ID").Width("8%"); column.For(x => x.FirstName).HeaderText("First Name").Width("10%"); column.For(x => x.LastName).HeaderText("Last Name").Width("10%"); column.For(x => x.UserName).HeaderText("User Name").Width("10%"); column.For(x => x.EmailAddress).HeaderText("Email Address").Width("20%"); column.For(x => x.Active).HeaderText("Active").Width("5%"); }) .Features(feature => { feature.Responsive() .EnableVerticalRendering(false) .ReactOnContainerWidthChanges(true) .ForceResponsiveGridWidth(true) .ColumnSettings(cs => { cs.ColumnSetting().ColumnKey("UserRecordID").Classes("ui-hidden-phone hidden-phone"); cs.ColumnSetting().ColumnKey("FirstName").Classes(""); cs.ColumnSetting().ColumnKey("LastName").Classes(""); cs.ColumnSetting().ColumnKey("UserName").Classes(""); cs.ColumnSetting().ColumnKey("EmailAddress").Classes("ui-hidden-phone hidden-phone"); cs.ColumnSetting().ColumnKey("Password").Classes("ui-hidden-phone hidden-phone"); cs.ColumnSetting().ColumnKey("Active").Classes("ui-hidden-phone hidden-phone"); }); }) .Features(features => { features.Sorting().Type(OpType.Remote).Mode(SortingMode.Single); features.Filtering().Mode(FilterMode.Simple); features.Selection().MultipleSelection(false).Mode(SelectionMode.Row); }) .DataSourceUrl(Url.Action("UsersBinding")) .DataBind() .Render() )
Hello Foremost,
If I understood you right, you want to hide certain columns in the grid. Is that right? If this is the case why don't you use "Hidden" property of the columns? I believe that you can't achieve hidden column only using css. Could you share the css that you're using for this? Waiting for your reply.
Regards,
Tsanna
I do not want to hide the column all the time, just when the grid is being viewed on a small device. Infragistics has provided a css class called ui-hidden-phone which according to their documentation should hide iggrid columns when the grid is viewed on a phone. Unfortunately, this class does not appear to be working.
infragistics.css shows the following:
@media(max-width:767px){.ui-hidden-desktop{display:inherit!important} .ui-visible-desktop{display:none!important} .ui-visible-phone{display:inherit!important} .ui-hidden-phone{display:none!important} }
See examples provided by infragistics:
http://www.infragistics.com/community/blogs/anarain/archive/2013/08/23/responsive-web-design-and-ignite-ui.aspx
http://help.infragistics.com/jQuery/2014.2/ui.iggridresponsive
Please check your current responsive mode using getCurrentResponsiveMode option in order to confirm that the responsive mode is "mobile" and the css media queries are applied properly and check also whether your page has the following meta tag <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> You can check also the following sample, which is with similar scenario to yours: http://igniteui.com/grid/datatable-binding If you have any further questions, please let me know.
Please let us know if you need any further assistance with this matter.