Grid in Mobile Tabstrip and 2 mobile grids on 1 page

2 posts, 1 answers
  1. Arthur
    Arthur avatar
    2 posts
    Member since:
    Dec 2013

    Posted 11 Dec 2013 Link to this post

    In trying to develop a website using the MVCwrappers I am having 2 issues related to the grid.
    - When 2 mobile grids are on a page the bottom grid covers half of the top grid.
    - I have a grid in a mobile tabstrip, but the grid will not display if the Mobile property is set to "PHONE". However, it does show up when set to "AUTO".
  2. Answer
    Arthur
    Arthur avatar
    2 posts
    Member since:
    Dec 2013

    Posted 11 Dec 2013 Link to this post

    Answered in a support ticket.

    For the mutliple grids on one page they suggested I set the position to be relative with a fixed height.
    <div style="position: relative; height: 500px;">
    @(Html.Kendo().Grid(Model.Parts).Name("parts")
        .DataSource(d => d
        .Ajax()
      
        .Model(m =>  m.Id(p => p.PartsId))
        .Update(update => update.Action("PartUpdate", "Home"))
        .Destroy(del => del.Action("PartDelete", "Home"))
        .Create("PartAdd","Home")
        )
              
        .Columns(c =>
        {
            c.Bound(p => p.PartNumber);
            c.Bound(p => p.Description);
            c.Bound(p => p.Qty);
            c.Command(cmd => cmd.Edit());
        })
        .Mobile(MobileMode.Phone)
        .Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("Part"))      
    )
    </div>

    For the grid in tablist not showing up, the grid height was 0 because the parent containers height was 0. So i had to use set the .Stretch property to true.
    @(Html.Kendo().MobileView()
        .Name("tabstrip-settings")
        .Layout("mobile-tabstrip")
        .Title("Settings")      
        .Stretch(true)
        .Content(
            Html.Kendo().Grid(Model.Parts).Name("parts")
            .DataSource(d => d
                .Ajax()           
                .ServerOperation(false)
                .Model(m => m.Id(p => p.PartsId))
                .Update(update => update.Action("PartUpdate", "Home"))
                .Destroy(del => del.Action("PartDelete", "Home"))
                .Create("PartAdd","Home")
            )
            .Columns(c =>
            {
                c.Bound(p => p.PartNumber);
                c.Bound(p => p.Description);
                c.Bound(p => p.Qty);
                c.Command(cmd => cmd.Edit());
            })
            .Mobile(MobileMode.Phone)
            .Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("Part"))       
            .ToHtmlString()
        )       
    )
Back to Top