How to change the scroller size inside the ejGrid?
Solution
To change the scrollerSize for multiple grid, we have to define the scrollerSize in ej.Grid.Prototype.
Find the following code example:
JS:
<div id="Grid"></div> <div id="Grid2"></div> <script type="text/javascript"> $(function () { ej.Grid.prototype.defaults.scrollSettings.scrollerSize = 10; $("#Grid").ejGrid({ // the datasource "window.gridData" is referred from jsondata.min.js dataSource: window.gridData, allowPaging: true, pageSettings: { pageSize : 5 }, allowScrolling: true, scrollSettings: { width: 600}, columns: [ { field: "OrderID", headerText: "Order ID", width: 100 }, { field: "CustomerID", headerText: "Customer ID", width: 100 }, { field: "EmployeeID", headerText: "Employee ID", width: 100 }, { field: "Freight", headerText: "Freight", width: 100 }, { field: "ShipCity", headerText: "Ship City", width: 100 }, { field: "ShipCountry", headerText: "Ship Country", width: 100 }, { field: "Verified", headerText: "Verified", width: 100 } ] }); $("#Grid2").ejGrid({ // the datasource "window.gridData" is referred from jsondata.min.js dataSource: window.gridData, allowPaging: true, pageSettings: { pageSize : 5 }, allowScrolling: true, scrollSettings: {width: 600 }, columns: [ { field: "OrderID", headerText: "Order ID", width: 100 }, { field: "CustomerID", headerText: "Customer ID", width: 100 }, { field: "EmployeeID", headerText: "Employee ID", width: 100 }, { field: "Freight", headerText: "Freight", width: 100 }, { field: "ShipCity", headerText: "Ship City", width: 100 }, { field: "ShipCountry", headerText: "Ship Country", width: 100 }, { field: "Verified", headerText: "Verified", width: 100 } ] }); }); </script> |
MVC:
<script> ej.Grid.prototype.defaults.scrollSettings.scrollerSize = 10; </script>
@(Html.EJ().Grid<Sample118577.OrdersView>("Grid1") .Datasource(Model) .AllowScrolling() .AllowPaging() .PageSettings(p => { p.PageSize(5); }) .ScrollSettings(scroll => { scroll.Width(600); }) .Columns(col => { col.Field("OrderID").HeaderText("Order ID").Width(100).Add(); col.Field("CustomerID").HeaderText("Customer ID").Width(100).Add(); col.Field("EmployeeID").HeaderText("Employee ID").Width(100).Add(); col.Field("Freight").HeaderText("Freight").Width(100).Add(); col.Field("ShipCity").HeaderText("Ship City").Width(100).Add(); col.Field("ShipCountry").HeaderText("Ship Country").Width(100).Add(); col.Field("Verified").HeaderText("Verified").Width(100).Add(); }) )
@(Html.EJ().Grid<Sample118577.OrdersView>("Grid2") .Datasource(Model) .AllowScrolling() .AllowPaging() .PageSettings(p => { p.PageSize(5); }) .ScrollSettings(scroll => { scroll.Width(600); }) .Columns(col => { col.Field("OrderID").HeaderText("Order ID").Width(100).Add(); col.Field("CustomerID").HeaderText("Customer ID").Width(100).Add(); col.Field("EmployeeID").HeaderText("Employee ID").Width(100).Add(); col.Field("Freight").HeaderText("Freight").Width(100).Add(); col.Field("ShipCity").HeaderText("Ship City").Width(100).Add(); col.Field("ShipCountry").HeaderText("Ship Country").Width(100).Add(); col.Field("Verified").HeaderText("Verified").Width(100).Add(); }) ) |
ASP.NET:
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent"> <script> ej.Grid.prototype.defaults.scrollSettings.scrollerSize = 10; </script>
<div> <ej:Grid ID="FlatGrid" runat="server" AllowPaging="True" AllowScrolling="true"> <PageSettings PageSize="5" /> <ScrollSettings Width="600" /> <Columns> <ej:Column Field="OrderID" HeaderText="Order ID" Width="100" /> <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="100" /> <ej:Column Field="EmployeeID" HeaderText="Employee ID" Width="100" /> <ej:Column Field="Freight" HeaderText="Freight" Width="100" /> <ej:Column Field="ShipCity" HeaderText="Ship City" Width="100" /> <ej:Column Field="ShipCountry" HeaderText="Ship Country" Width="100" /> <ej:Column Field="Verified" HeaderText="Verified" Width="100" /> </Columns> </ej:Grid> <ej:Grid ID="Grid1" runat="server" AllowPaging="True" AllowScrolling="true"> <PageSettings PageSize="5" /> <ScrollSettings Width="600" /> <Columns> <ej:Column Field="OrderID" HeaderText="Order ID" Width="100" /> <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="100" /> <ej:Column Field="EmployeeID" HeaderText="Employee ID" Width="100" /> <ej:Column Field="Freight" HeaderText="Freight" Width="100" /> <ej:Column Field="ShipCity" HeaderText="Ship City" Width="100" /> <ej:Column Field="ShipCountry" HeaderText="Ship Country" Width="100" /> <ej:Column Field="Verified" HeaderText="Verified" Width="100" /> </Columns> </ej:Grid> </div></asp:Content> |
Result:
