We use setDimension() to set grid size when parent container's size changes (So that we don't need to redraw grid and lose the user's current selection and grouping settings etc). The problem is that after setDimension(), the width of grid lines doesn't change to fit to the new dimension (see screenshot attached). So how can we get grid lines refreshed after setDimension() call? We cannot use isResponsive setting as we want the grid table to fit in container (so no overflow).
var datagrid;
function onLoad() {
// the datasource "window.gridData" is referred from jsondata.min.js
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
datagrid = $("#Grid").ejGrid({
dataSource: data,
allowScrolling: true,allowResizing :true,
allowGrouping: true,
allowPaging:true,
pageSettings: {
pageSize: 250
},
allowSelection: true,
selectionType : "single",
selectionSettings: { selectionMode: ["cell"] },
columns: [
{ field: "OrderID", headerText: "Order ID", width: 75 , textAlign: ej.TextAlign.Right},
{ field: "CustomerID", headerText: "Customer ID", width: 80 },
{ field: "EmployeeID", headerText: "Employee ID", width: 75, textAlign: ej.TextAlign.Right, priority: 4 },
{ field: "Freight", width: 75, format: "{0:C}", textAlign: ej.TextAlign.Right, priority: 3 },
{ field: "OrderDate", headerText: "Order Date", width: 80, format: "{0:MM/dd/yyyy}", textAlign: ej.TextAlign.Right, priority: 2 },
{ field: "ShipCity", headerText: "Ship City", width: 110, priority: 2 }
]
}).ejGrid("instance");
onResize();
}
function onResize() {
datagrid.setDimension($(window).height() - 100, $(window).width() - 50);
}
