Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
850
igGrid - Adding the first few rows shows scrollbars
posted

Im using the igGrid's updating feature. When I add the first couple of rows, there seems to be a resizing issue, and scrollbars appears when there is plenty of space on the page.

Blank Grid

Adding the first row

Code

@( Html.Infragistics().Grid(Model)
.ID("grdNotes")
.AutoGenerateColumns(false)
.UpdateUrl(Url.Action("EditList"new { sURL = Request.Url.AbsoluteUri }))
.PrimaryKey("Id")
.AutoCommit(false)
.Columns(column =>
{
	column.For(x => x.Id).DataType("string").HeaderText("Id").Width("50px");
	column.For(x => x.CreatedBy).DataType("string").HeaderText("Created By").Width("100px");
	column.For(x => x.DateLastEdit).DataType("date").HeaderText("Modified").Width("100px");
	column.For(x => x.Text).DataType("string").HeaderText("Text");
})
.Features(features =>
{
	features.Selection().Mode(SelectionMode.Row).MultipleSelection(false);
	features.Sorting();
	features.Updating().EnableAddRow(true).EnableDeleteRow(true).EditMode(GridEditMode.Row).StartEditTriggers(GridStartEditTriggers.DblClick).AddRowLabel("Add Note")
		.ColumnSettings(settings =>
	{
		settings.ColumnSetting().ColumnKey("Id").ReadOnly(true);
		settings.ColumnSetting().ColumnKey("CreatedBy").ReadOnly(true);
		settings.ColumnSetting().ColumnKey("DateLastEdit").ReadOnly(true);
		settings.ColumnSetting().ColumnKey("Text");
	});
})
.Width("100%")
.DataBind()
.Render())  



The css file I'm using is "ig.ui.min.js".

I've tried various style settings but I cannot resolve it without setting a definate height, any ideas?

  • 19693
    posted

    Hello ,

     

    Thank you for reporting this.

     

    I submitted a development issue

     

    103269 : Scrollbars appear when grid is empty and you are adding the first row

     

    Also created a support ticket on your behalf :CAS-85420-T00JD9

     

    Will link the ticket to the issue in order to be notified when the service release with the fix is available.

     

    As temporary solution you can add the style below :

     

    <style type="text/css">

     

     #grdNotes_scroll{

     

    min-height: 150px;

     

    }</style>

     

    Let me know if you need further assistance.

  • 24497
    Verified Answer
    posted

    Hi Chinupson,

    That issue was fixed and update will be available in service releases.

    That happened because when grid has width, then overflow for container is used. In this situation Done/Cancel buttons used by grid-updating appeared below Add-new-row. But overlow of container made them invisible and triggered automatic vertical scrollbar.

    In fixed version Done/Cancel buttons in that situation will appear above Add-new-row.