We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET MVC
  4. ASP.NET MVC Grid Width Does Not Resize When AllowResizeToFit Is Enabled

ASP.NET MVC Grid Width Does Not Resize When AllowResizeToFit Is Enabled

I am using the Grid control in ASP.NET MVC and I would like the grid to expand it's width when the form is set. As soon as I set "AllowResizeToFit" the grid will no longer change size when the window resizes.   Is there a way for the grid to resize it's width when AllowResizeToFit is enabled? 

I did see on another thread about someone using setDimension on the grid. The problem with setDimension is it requires both a height and width and I don't know what the height should be - there is content beneath the grid so I can't use the parent elements height.

Here is the settings for the grid.

@(Html.EJ().Grid<Row>("Grid")
  .Datasource(ds => ds.URL(@Url.Action("BatchDataSource")).Adaptor(AdaptorType.UrlAdaptor))
  .Query("new ej.Query().addParams('Id','0')")
  .EditSettings(edit =>
  { edit.AllowEditing().EditMode(EditMode.Batch); })
  .AllowFiltering()
  .AllowPaging()
  .AllowResizeToFit() // as soon as I add this the grid width will no longer resize when the window resizes
  .AllowSorting()
  .AllowTextWrap()
  .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })
  .PageSettings(pg => pg.PageSize(10))
  .ShowColumnChooser()
  .Columns(col =>
  { lots of columns }

Regards, Jeff

3 Replies
JK Jayaprakash Kamaraj Syncfusion Team July 26, 2016 02:06 PM UTC

Hi Jeffrey, 

Thank you for contacting Syncfusion support. 
                 
We have analyzed your requirement but we were unable to reproduce the issue at our end. Please share the following information to find the cause of the issue.  

1.        Ensure you have defined “IsResponsive” and “MinWidth” property of the grid. Please refer to the below API reference documentation. 
 
            Documentation Link: http://help.syncfusion.com/aspnetmvc/grid/responsive 
 
2.       Share the video to show the issue. 
3.       Issue replication procedure. 
4.       Essential studio and browser details. 
5.       An issue reproducing sample if possible or hosted sample link 

Regards, 

Jayaprakash K. 


JS Jeffrey Stone July 26, 2016 09:16 PM UTC

Thanks for the quick response. You all provide really great support!

The IsResponsive and MinWidth helped when the grid was resized narrower. However, if the area where the grid is made wider then it won't resize past it's original width.  

I created the following in the JS Playground which showed the problem (after the grid initially displays try making the area where the grid wider - the grid does not change width):

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential Studio for JavaScript">
    <meta name="author" content="Syncfusion">
    <title>Untitled</title>
    <!-- Essential Studio for JavaScript  theme reference --> 
    <link rel="stylesheet" rel='nofollow' href="http://cdn.syncfusion.com/14.2.0.26/js/web/flat-azure/ej.web.all.min.css" />
    <!-- Essential Studio for JavaScript  script references -->
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"> </script> 
    <script src="http://cdn.syncfusion.com/js/assets/external/jquery.globalize.min.js"></script>
    <script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
    <script src="http://cdn.syncfusion.com/14.2.0.26/js/web/ej.web.all.min.js"> </script>
    <!--Add custom scripts here -->
</head>

<body>
    <div style="padding:10px">
        <h2>Welcome to Syncfusion Essential JavaScript Playground</h2>
    </div>
  <div id="Grid"> </div>      
  <script>
          $("#Grid").ejGrid({
                // dataSource: data,
        allowFiltering: true,
        allowPaging: true,
                allowSorting: true,
        allowTextWrap: true,
        allowResizeToFit: true,
            isResponsive: true,
            minWidth: 400,
        filterSettings: { filterType: "excel" },
                columns: [
                        { field: "OrderID", headerText: "Order ID", textAlign: ej.TextAlign.Right},
                        { field: "CustomerID", headerText: "Customer ID" },
                        { field: "EmployeeID", headerText: "Employee ID", textAlign: ej.TextAlign.Right },
                        { field: "Freight", format: "{0:C}", textAlign: ej.TextAlign.Right },
                        { field: "OrderDate", headerText: "Order Date", format: "{0:MM/dd/yyyy}", textAlign: ej.TextAlign.Right },
                        { field: "ShipCity", headerText: "Ship City"},
                  { field: "field1", headerText: "field1" },
                  { field: "field2", headerText: "field2" },
                  { field: "field3", headerText: "field3" },
                  { field: "field4", headerText: "field4" },
                  { field: "field5", headerText: "field5" }
                ]
            });
    </script>
</body>
</html>

Regards, Jeff

JK Jayaprakash Kamaraj Syncfusion Team July 27, 2016 12:45 PM UTC

Hi Jeffrey, 
A support incident has been created under your account to resolve the issue. Please log on to our support website to check for further updates.  
 
Regards,
Jayaprakash K. 


Loader.
Up arrow icon