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

Parents
  • 5513
    Verified Answer
    Offline posted

    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

Reply Children
No Data