When using a FlexGrid in a popup or modal, to render the FlexGrid data completely, the FlexGrid's invalidate() method can be called after the data is returned or as the popup gets opened.
This can be verified by calling the grid.invalidate() method from the console window where grid is the FlexGrid instance. The grid can be targeted by its id.
var grid = wijmo.Control.getControl("#id");<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
@(Html.C1().FlexGrid<Person>()
.Id("editGrid")
.Bind(
ib => ib.Bind(Url.Action("RemoteBind_Read"))
//Action Url for updating an item in the grid.
.Update(Url.Action("GridUpdateCategory"))
// Action Url for adding a new item to the grid.
.Create(Url.Action("GridCreate"))
// Action Url for deleting an item from the grid.
.Delete(Url.Action("GridDelete"))
//.OnClientQueryData("queryData")
)
.AutoGenerateColumns(false)
.Columns(columns =>
{
columns.Add(column => column.Binding("ID").IsReadOnly(true));
columns.Add(column => column.Binding("First"));
columns.Add(column => column.Binding("Last"));
columns.Add(column => column.Binding("Hired"));
})
.CssStyle("height", "400px")
)
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>