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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

125130 Jul 23,2016 07:09 PM UTC Jul 27,2016 12:45 PM UTC ASP.NET MVC 3
loading
Tags: Grid
Jeffrey Stone
Asked On July 23, 2016 07:09 PM UTC

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

Jayaprakash Kamaraj [Syncfusion]
Replied On 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. 


Jeffrey Stone
Replied On 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

Jayaprakash Kamaraj [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;