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

Grid Validation Hidden with only one row

Thread ID:





143278 Mar 12,2019 05:53 PM UTC Mar 14,2019 03:40 AM UTC ASP.NET Core - EJ 2 3
Tags: DataGrid
Michael Lambert
Asked On March 12, 2019 05:53 PM UTC

When adding the first row, or editing with only one row (works fine if there are two or more rows) to a grid the validation is hidden under the footer requiring the user has to scroll to see the messages.  This can be confusion, especially to a new user.  What would be the best way to expand the grid to see the messages should they appear?

This is what the user sees:

They need to scroll to see the messages:

Madhu Sudhanan P [Syncfusion]
Replied On March 13, 2019 05:14 AM UTC

Hi Michael, 

Greeting from Syncfusion. 

Query: What would be the best way to expand the grid to see the messages should they appear? 
By default, we have applied height as auto for the Grid so that it display vertical scrollbar while perform adding and editing with single data in Grid. If you don’t want scrollbar then we suggest you to use the below way to achieve your requirement. 

In the below code example, we have checked grid dataSource and based on that we applied height for the Grid. Please refer the below code example for more information. 

<div id="ControlRegion"> 
    <ejs-grid id="Grid" dataBound="dataBound" toolbar="@(new List<string>() { "Add","Edit", "Update", "Cancel" })" allowPaging="true"> 
        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings> 
        <e-grid-pagesettings pageCount="5"></e-grid-pagesettings> 
            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true"  validationRules="@(new { required=true})" textAlign="Right" width="120"></e-grid-column> 
            <e-grid-column field="CustomerID" headerText="Customer Name" validationRules="@(new { required=true})"></e-grid-column> 
            . . . . 
    function dataBound() { 
        this.height = (this.dataSource.length <= 1) ? "80px" : "auto"; 


Madhu Sudhanan P 

Michael Lambert
Replied On March 13, 2019 10:59 PM UTC

Worked, Thanks!

Madhu Sudhanan P [Syncfusion]
Replied On March 14, 2019 03:40 AM UTC

Hi Michael, 
Thanks for the update. 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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

Live Chat Icon For mobile
Live Chat Icon