<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" AllowScrolling="true" >
<ScrollSettings Height="100%" Width="100%" ></ScrollSettings>
<EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings>
<ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>
<Columns>
………………
</Columns>
</ej:Grid>
|
<script type="text/javascript">
function create(args) {
var gridObj = $("#OrdersGrid").ejGrid("instance");
var scrollerwidth = $("#container").width();//Obtain the width of the container
var scrollerheight = ($("#container").height()) - ($(".e-gridheader").outerHeight()) - ($(".e-pager").outerHeight()) - ($(".e-gridtoolbar").outerHeight());//Obtain the height of the container and subtract it from gridheader and pager, toolbar
gridObj.option({ allowScrolling: true, scrollSettings: { width: scrollerwidth, height: scrollerheight } });//pass the obtainer width and height to gridmodel options
}
</script> |
Hi Taweesak,Sorry for the inconvenience caused.According to your query we suspect that you need to render the grid within a container with specified width and height. We already have a knowledge base documentation for this query. Please refer the below link for the KB.In the above knowledge base document, we have explained to achieve that requirement using create event. We have obtained the width and height of the container and assigned them to the scrollSettings of the grid. In the create event of the grid we have subtracted the height of the grid header and pager from the container height. Similarly if you have toolbar enabled in grid then you need to subtract the height of the toolbar also from the container height.Please refer the below code example.
<script type="text/javascript">function create(args) {var gridObj = $("#OrdersGrid").ejGrid("instance");var scrollerwidth = $("#container").width();//Obtain the width of the containervar scrollerheight = ($("#container").height()) - ($(".e-gridheader").outerHeight()) - ($(".e-pager").outerHeight()) - ($(".e-gridtoolbar").outerHeight());//Obtain the height of the container and subtract it from gridheader and pager, toolbargridObj.option({ allowScrolling: true, scrollSettings: { width: scrollerwidth, height: scrollerheight } });//pass the obtainer width and height to gridmodel options}</script>Regards,Vignesh Natarajan