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
275
Responsive Vertical Rendering: First column not properly generating when vertical (possible bug?)
posted

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 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.js
https://code.jquery.com/ui/1.10.3/jquery-ui.min.js

Bootstrap (v 2.3.2)

Infragistics 2013.2.2055