Paging not visible in modal without resizing the window

2 posts, 1 answers
  1. Einkauf
    Einkauf avatar
    2 posts
    Member since:
    Oct 2013

    Posted 06 May 2020 Link to this post

    The kendo grid is not displaying the paging footer correctly if the grid is part of a modal dialog (Bootstrap Modal). It only shows one page with the possibility to move to the next one (that's working). As you can see in the attached screenshot kendo_grid_paging_wrong.png.

    After a resizing event of the browser - e.g. change browser window size or show developer tool bar (F12), ... - the grid becomes displayed correctly. As you can see in the attached screenshot kendo_grid_paging_right.png.

    Is this a kind of an incompatibility or bug? We use this kind of code snipped all the time outsite of modals and they do not experience this behaviour.

    The associated code to display this grid is as follows:

    @(Html.Kendo().Grid<AccountModel>()
        .Name("accountGrid")
        .ToolBar(tlb => {
            tlb.Search();
     
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .FullCrud("AccountCrud")
            .PageSize(5)
        )
        .Selectable(sel => sel.Enabled(true).Type(GridSelectionType.Row))
        .Columns(columns =>
        {
            columns.Bound(i => i.Id).Width(100);
            columns.Bound(b => b.Name);
            columns.Bound(b => b.LoginName);
            columns.Bound(b => b.Description);
        })
        .DefaultOverview(StringLocalizer)
        .Search(search =>
        {
            search.Field(f => f.Name);
            search.Field(f => f.LoginName);
            search.Field(f => f.Description);
        })
        .Pageable(p => p
            .PageSizes(new[] { 5, 10, 25 })
        )
    )
  2. Answer
    Anton Mironov
    Admin
    Anton Mironov avatar
    168 posts

    Posted 08 May 2020 Link to this post

    Hi,

    Thank you for the code snippet.

    As this forum post is a duplicate to a support ticket I already replied to it will be closed. However, I am reposting the answer here so others can benefit from it.

    As of the R1 2019 release, the responsive page number for the SASS themes feature is available out of the box. The pager's responsibility depends on the parent element. А width less than 1024px. will render the dropdown pager.  

    To avoid the responsive behavior use below functionality:

    .Pageable(p => p
              .PageSizes(new[] { 5, 10, 25 })
              .Responsive(false))

    Please do not hesitate to contact us if you have any additional questions.

    Regards,
    Anton Mironov
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top