How to resize the Grid width without refreshing it manually in JavaScript?
By default, Mobile Grid renders relative to its parent element in JavaScript Grid. So, when you set width for parent element, then the Mobile Grid gets fit in respective to its parent element. Hence to update the Mobile Grid width dynamically, you can update the parent element width either in the script side or with the media query. To achieve this in media query level, find the following code example to set the parent element width for Mobile Grid.
HTML
<div id="parent"> <!--Parent Element for mobile grid-->
<div id="mobgrid">
</div>
</div>
<script type="text/javascript">
$(function () {
// the datasource "window.gridData" is referred from jsondata.min.js
$("#mobgrid").ejmGrid({
dataSource: ej.DataManager(window.gridData).executeLocal(ej.Query().take(50)),
allowPaging: false,
allowSorting: true,
allowScrolling: true,
scrollSettings: { height: 352 },
allowFiltering: true,
allowColumnSelector: true,
columns: [
{ field: "OrderID", headerText: "Order ID" },
{ field: "CustomerID", headerText: "Customer ID" },
{ field: "Freight", headerText: "Freight" }
]
});
});
</script>
CSS
<style>
#parent
{
width: 100%;
}
@media all and (min-width: 581px)
{
#parent
{
width: 400px;
}
}
</style>
Conclusion
I hope you enjoyed learning about how to resize the Grid width without refreshing it manually in JavaScript.
You can refer to
our JavaScript
Grid feature
tour page to know about its other groundbreaking feature
representations and documentation, and how
to quickly get started for configuration specifications.
You can
also explore our JavaScript
Grid example to understand
how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
