Category / Section
How to set width of the columns in percentage
1 min read
By default grid has “100%” width and also we can specify the width of the grid’s columns using percentage as follows.
Example:
JS:
<div id="Grid"></div> <script type="text/javascript"> $(function () { $("#Grid").ejGrid({ dataSource: window.gridData, allowPaging:true, columns: [ { field: "OrderID", headerText: "Order ID", width: "10%"}, { field: "CustomerID", headerText: "Customer ID", width: "10%" }, { field: "EmployeeID", headerText: "Employee ID", width: "20%", textAlign: ej.TextAlign.Right }, { field: "ShipCity", headerText: "Ship City", width: "30%" }, { field: "ShipCountry", headerText: "Ship Country", width: "30%" } ] }); }); </script>
MVC:
@(Html.EJ().Grid<OrdersView>("FlatGrid") .Datasource((IEnumerable<object>)ViewBag.datasource) .AllowPaging() .Columns(col => { col.Field("OrderID").HeaderText("Order ID").Width("10%").Add(); col.Field("CustomerID").HeaderText("Customer ID").Width("10%").Add(); col.Field("EmployeeID").HeaderText("Employee ID"). TextAlign(TextAlign.Right) .Width("20%").Add(); col.Field("ShipCity").HeaderText("Ship City").Width("30%").Add(); col.Field("ShipName").HeaderText("Ship Name").Width("30%").Add(); }) )
Asp.Net:
<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" > <Columns> <ej:Column Field="OrderID" HeaderText="Order ID" Width="10%" /> <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="10%"/> <ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" Width="20%"/> <ej:Column Field="ShipCity" HeaderText="Ship City" Width="30%"/> <ej:Column Field="ShipCountry" HeaderText="Ship Country" Width="30%"/> </Columns> </ej:Grid>
Result:
Figure: Width for the columns in percentage