How to set width of the columns in percentage

<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>

@(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();
})
)

<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>