How to change the scroller size inside the ejGrid?

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

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