The grid pager doesn't show correctly sometimes
5 Replies
Hello,
You can reproduce in the sample if you configure the grids as Responsive: .IsResponsive(true).
Hi Manuel,
Thanks for your update.
We can reproduce the issue while enabling the “Responsive” property of Grid. We suggest you to render the Grid in the 2nd tab dynamically (or any tab other than the initially active tab) by following the below steps,
- In below code example, we have rendered Grid in one tab alone. (which is the active tab at initial rendering)
- Then in the “Create” event of the tab, we have added new tab item to the tab control using the method, “addItem” by passing the ID of element in which we are going to render Grid (in this case it’s “Grid2” – ID of 2nd grid to be rendered
- When we change the tab item, “ItemActive” event will be triggered. In that event, we have checked the active tab’s index value and we have rendered Grid component with Id “Grid2” (id which we passed to addItem method)
- Thus the Grid will be properly rendered without having any pager issue.
|
<div class="row">
<div style="width: 550px">
@{Html.EJ().Tab("dish")
.ClientSideEvents(e => { e.ItemActive("itemActive").Create("create"); })
.Items(data =>
{
data.Add().ID("grid1").Text("Grid 1")
.ContentTemplate(@<div>
@(Html.EJ().Grid<Object>("Grid1")
.Datasource((IEnumerable<Object>)ViewBag.datasource1).AllowPaging()
.PageSettings(page => page.PageSize(4).PageCount(3))
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true)
.TextAlign(TextAlign.Right).Width(75).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add();
}))
</div>
);
}).ShowCloseButton(true).Render();}
</div>
</div>
<script>
function create(args) { //tab's create event
var tabObj = $(".e-tab").data("ejTab"); // tab instance
tabObj.addItem("#new", "Grid", 1, "myClass", "Grid2"); //adding new tab at index 1
}
function itemActive(args) { //tab's itemactive event
if (args.activeIndex == 1) { // if tab of index 1 is active
$("#Grid2").ejGrid({ // rendering grid inside tab of index 1
dataSource: data1,
allowPaging: true,
isResponsive: true,
pageSettings: { pageSize: 2 },
-----------
});
}
}
</script>
|
Please check the below screenshot,
Kindly check the below API help documentations,
Kindly get back to us for further assistance.
Regards,
Padmavathy Kamalanathan
SIGN IN To post a reply.
