There is something weird going on with the first column in my iGrid when in the vertical state. The first row's height becomes much too high and the first column is placing the column header text into the second <td>, but you can see the the data value for the column when you hover over and look at the tag; it looks normal when wide. Originally the grid was paired with an igTileManager, but moving the grid out of the igTileManageror or even to a view all to itself produced the same result. I have not modified any theming CSS, nor do I have any Javascript acting on the grid other than what the wrapper itself produces.
Any help as to what is going on, would be appreciated.
I am using the latest version, 2013.2.2055.
Example Vertical:
Example Wide:
Html Wrapper & partial view
@using Infragistics.Web.Mvc;@model IQueryable<EntityNoteRecordViewModel>
@( Html.Infragistics() .Grid(Model) .ID("igridTest") .Height("300px") .Width("100%") .PrimaryKey("EntityNoteShortID") .RenderCheckboxes(true) .Columns( column => { column.For(x => x.Note).HeaderText("Note").DataType("string").Width("300px"); column.For(x => x.NoteType).HeaderText("Note Type").DataType("string"); column.For(x => x.NoteScopeType).HeaderText("Scope").DataType("string"); column.For(x => x.CreatedBy).HeaderText("Created By").DataType("string"); column.For(x => x.CreatedOn).HeaderText("Created On").DataType("date").Format("date"); column.For(x => x.ModifiedBy).HeaderText("Modified By").DataType("string"); column.For(x => x.ModifiedOn).HeaderText("Modified On").DataType("date").Format("date"); } ) .Features( features => { features.Sorting().Type(OpType.Local).Mode(SortingMode.Single); features.Filtering().Type(OpType.Local); features.Hiding(); features.Selection().Mode(SelectionMode.Row).MultipleSelection(false); features.RowSelectors(); features.Resizing(); features.Responsive().EnableVerticalRendering(true).ValuesColumnWidth("200px").PropertiesColumnWidth("120px");
features.Tooltips().Visibility(TooltipsVisibility.Always); features.Paging().PageSize(10); } ) .DataSourceUrl(Url.Action("GetMemberEntityNotes")) .Render() )
Model:
public class EntityNoteRecordViewModel {
#region - Scalar Properties -
public System.Guid EntityNoteGUID { get; set; } public string EntityNoteShortID { get; set; } public System.Guid SynagogueGUID { get; set; } public System.Nullable<System.Guid> AssociatedEntityGUID { get; set; } public System.Nullable<System.Guid> NoteTypeGUID { get; set; } public System.Nullable<System.Guid> NoteScopeTypeGUID { get; set; } public string Note { get; set; } public System.DateTime CreatedOn { get; set; } public string CreatedBy { get; set; } public System.Nullable<System.DateTime> ModifiedOn { get; set; } public string ModifiedBy { get; set; } public bool IsDirty { get; set; }
public string NoteType { get { return Constants.NoteTypes.GetName(this.NoteTypeGUID.Value); } set {} } public string NoteScopeType { get { return Constants.NoteScopeTypes.GetName(this.NoteScopeTypeGUID.Value); } set {} }
#endregion
} // end of 'public partial class EntityNoteRecordViewModel'
Relevent Libraries used:
https://code.jquery.com/jquery-1.9.1.min.jshttps://code.jquery.com/ui/1.10.3/jquery-ui.min.js
Bootstrap (v 2.3.2)
Infragistics 2013.2.2055
Thank you, Stamen. The culprit was indeed the RowSelector feature. for the UI glitch. That topic article was also very helpful; wish I'd actually read that before crying on the forums.
Thanks again,
Kris
Hello Kristopher,
Vertical rendering was not meant to replace the default one in cases of more complex grids with a lot of features enabled simultaneously. This has been described in some details on the vertical rendering topic you can find here. I think the culprit in your case is RowSelectors which is not compatible with vertical rendering as mentioned in the topic but there could be other issues as well. For example Tooltips will not show the correct information and much of the UI for other features will be unusable.
What I can suggest in your case is to detect which mode the grid will be rendered in based on your preferences and then if it's going to be in vertical, initialize it without the features vertical rendering is incompatible with.
I hope this helps! Please let me know if you have any other questions and/or concerns.
Best regards,
Stamen Stoychev