Paging not visible in modal without resizing the window

[Einkauf]

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 })
    )
)

[Anton Mironov]

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

[Salman]

The same problem I am facing in Kendo grid for Jquery, can anybody give code resolution in Kendo grid for jquery ?

[Anton Mironov]

Hi Salman,

In order to achieve the same behavior with Kendo UI jQuery, I would recommend using the "pageable.responsive" configuration of the Grid.

Here is a dojo example of the approach:

• https://dojo.telerik.com/@anton.mironov/iZUciQOR

I hope this information helps. Let me know if further information or assistance is needed.

 

Kind Regards,
Anton Mironov