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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid Vertical Resizing Causing No Rows to Be Displayed

Thread ID:

Created:

Updated:

Platform:

Replies:

125340 Aug 9,2016 09:33 PM Aug 29,2016 06:06 AM ASP.NET MVC 3
loading
Tags: Grid
Jeffrey Stone
Asked On August 9, 2016 09:33 PM

I have a grid that  is positioned in the middle of a web page (with content above it and below it). When the page is resized it appears that the grid tries to maintain it's visibility on screen - so much so that the vertical height will decrease to a point where I can no longer see any rows.

I have a picture to show the behavior.

Also I am using a patched version of ej.web.all.min.js in 14.2.0.28. that fixed an issue in incident 161166

Here is how I have the grid defined:

  .EditSettings(edit => { edit.AllowEditing().EditMode(EditMode.Batch); })
  .AllowFiltering()
  .AllowPaging()
  .AllowResizeToFit()
  .AllowSelection() 
  .AllowSorting()
  .AllowTextWrap()
  .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })
  .IsResponsive()
  .MinWidth(250)
  .PageSettings(pg => pg.PageSize(10))
  // I have tried various combinations of AllowScrolling and ScrollSettings
  .AllowScrolling(true)
  .ScrollSettings(col => { col.Width("auto").Height(1000); })
  .ShowColumnChooser()

Regards, Jeff





Attachment: No_Rows_and_No_Vertical_Scroll_Bar_Visible_d0d2865d.rar

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On August 10, 2016 03:20 AM

Hi Jeffrey, 

Thanks for showing interest in Syncfusion Product. 

In a responsive mode of Grid, by default the height responsive also be included. Therefore, at certain stage the Grid content will be hidden which is the default behavior as shown in the following image. 

 

If you would like to prevent this behavior and define ScrollSettings.Height as “auto”. But make a note, it will prevent the responsive behavior of the Grid height. However, responsive in terms of horizontal manner will work normally. Refer to the following code example. 

@(Html.EJ().Grid<object>("FlatGrid") 
       .Datasource((IEnumerable<object>)ViewBag.data) 
            . . . 
      .IsResponsive() 
      .MinWidth(250) 
      .PageSettings(pg => pg.PageSize(10)) 
        // I have tried various combinations of AllowScrolling and ScrollSettings 
      .AllowScrolling(true) 
      .ScrollSettings(col => { col.Width("auto").Height("auto"); })          .ShowColumnChooser() 
             . . .  
) 


We have also prepared a sample with the mentioned patch that can be downloaded from the following location. 


If we have misunderstood your query, please provide the following information to analyze the issue. 

1)      Complete Code example of Grid 
2)      Video demo of the issue 
3)      Stack trace of browser console (if any error) 
4)      Exact replication procedure 
5)      If possible, modify the attached sample and share. 

Regards, 
Seeni Sakthi Kumar S. 


Jeffrey Stone
Replied On August 28, 2016 01:22 PM

Seeni,

I have a sample that should reproduce the problem. The key difference is that I am loading my grid after the grid is initially created. Please see the attached code (which I created in JS Playground using the latest Syncfusion library). Note that after the grid is loaded that if the form is resized the grid will resize vertically to the point that no rows are visible. This makes the grid unusable if there is a lot of content below the grid as the grid will always be in the state where no rows are visible.

Regards, Jeff

<!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.28/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.28/js/web/ej.web.all.min.js">
    </script>
    <!--Add custom scripts here -->
  </head>
  <body>
    <div id="Grid">
    </div>
  </body>
  <script type = 'text/javascript' >
     var dataManager = ej.DataManager({
      url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Orders", 
      crossDomain:true
     });

    function loadGrid()
    {   
 var grid = $("#Grid").ejGrid({
          dataSource: dataManager
      });
    }
    $(function ($) {
$("#Grid").ejGrid({
"allowPaging" : true,
"allowTextWrap" : true,
"allowSorting" : true,
"allowFiltering" : true,
"minWidth" : 250,
"allowResizeToFit" : true,
"isResponsive" : true,
"pageSettings" : {
"pageSize" : 10
},
"filterSettings" : {
"filterType" : "Excel",
"filteredColumns" : []
},
"scrollSettings" : {
"height" : "auto"
},
"columns" : [
{ "field" : "OrderID" },
{ "field" : "ShipCity" }          
],
                       // dataSource: dataManager
});

               setTimeout(loadGrid,500);
});
  </script>
</html>


Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On August 29, 2016 06:06 AM

Hi Jeffrey, 

We are able to reproduce the problem at our end.  

In a responsive mode of Grid, by default the height responsive also be included. Therefore, at certain stage the Grid content will be hidden which is the default behavior of Grid which has been explained in our previous update. To overcome this behavior, we have logged an usability feature on this “Height to be responsive only if scrollHeight is set as "100%”. Therefore, the height responsive feature of the Grid will be enabled only when the scroll height of the grid is defined as 100%. So the Grid will not hide its content while resizing the browser window after defining scroll height other than “100%”. Please log on to our support website to check for further updates. 


Regards, 
Seeni Sakthi Kumar S. 


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

;