Category / Section
How to set dimension for Grid container dynamically?
1 min read
Dimension to the grid container can be set using setDimension method of Grid from any external actions. It accepts the height and width as the parameter.
HTML
<button id="btn">button</button> <div id="Grid"></div>
$("#btn").click(function () { var gridObj = $("#Grid").ejGrid("instance");//Create grid object gridObj.setDimension(300, 300); })
JS
$(function () { // the datasource "window.gridData" is referred from jsondata.min.js $("#Grid").ejGrid({ dataSource: window.gridData, allowPaging: true, 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 }, { field: "ShipCity", headerText: "Ship City", width: 110 } ], }); });
MVC
[In View] @(Html.EJ().Grid<object>("Grid") .Datasource((IEnumerable<object>)ViewBag.datasource) .AllowPaging() .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(); col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(75).Add(); col.Field("ShipCity").HeaderText("Ship City").Width(110).Add(); }) )
[Controller] namespace Sample.Controllers { public partial class HomeController : Controller { public ActionResult Index() { var DataSource = new NorthwindDataContext().OrdersViews.ToList(); ViewBag.datasource = DataSource; return View(); } } }
Asp
[aspx] <ej:Grid ID="OrdersGrid" ClientIDMode="Static" runat="server" AllowPaging="true" AllowScrolling="true"> <Columns> <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" TextAlign="Right" Width="75" /> <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="80" /> <ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" Width="75" /> <ej:Column Field="ShipCity" HeaderText="Ship City" Width="110" /> </Columns> </ej:Grid>
[CS] public partial class _Default : Page { protected void Page_Load(object sender, EventArgs e) { this.OrdersGrid.DataSource = new NorthwindDataContext().Orders; this.OrdersGrid.DataBind(); } }
Screen shot:
Following figure shows initial width and height of the Grid.
Following figure shows updated width and height of the Grid.