Articles in this section
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.

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied