NoRecords() auto height size

[Rick]

Hi,

I am experiencing an odd behavior when using the .NoRecords() function of the grid.  If I add .NoRecords() the height of the grid auto sizes to an extreme height beyond the view screen height when there are no records.  If there are records, then the grid auto sizes appropriately.  If I remove .NoRecords() then the grid is collapsed to a reasonable height when no records are available.  I have not had this issue with previous versions.  Using Developer Tools for the browsers I cannot see any .css file that is applying any height value that would be causing this issue.  Is this a known issue, working as intended or am I missing something?

I am using version 2020.2.513.

Thanks.

[Ivan Danchev]

Hi Rick,

This is not a known issue. Could you post your Grid declaration, as well as the order of loading the Kendo UI CSS files in the _Layout.cshtml file? Based on that we will try to reproduce the issue and identify what causes it.

Regards,
Ivan Danchev
Progress Telerik

[Rick]

I have stripped the _Layout down to the bare minimum of css files and the issue is still reproducible. I have attached a screenshot of the css load order as reported by Chrome developer tools.  The page used to reproduce the problem in this is example is PhoneType which is loaded via a javascript ajax call into a named div section.

 

@(Html.Kendo().Grid<CHART.NetCore.Web.Models.PhoneTypeModel>()
    .Name("gridPhoneType")
    .HtmlAttributes(new { actionURL = Url.Action("DeleteAction", "Configuration"), title = "Phone Type" })
    .Columns(c =>
    {
        c.Bound(f => f.PhoneTypeID).Hidden();
        c.Bound(f => f.Description);
        c.Command(commands =>
        {
            commands.Edit().Text(" ").CancelText(" ").UpdateText(" ").HtmlAttributes(new { title = "Edit Phone Type" });
            commands.Custom("Delete").Text(" ").Click("kendoDestroyRecord").IconClass("fas fa-times").HtmlAttributes(new { title = "Delete Phone Type" });
        }).Width(125);
    })

    .ToolBar(toolbar => toolbar.Create().Text(" ").IconClass("fas fa-plus").HtmlAttributes(new { title = "Add New Phone Type" }))
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .DataSource(dataSource =>
    dataSource

    .Ajax()
    .Events(ex => ex.Error("function(e){grid_onDataError(e, '#gridPhoneType')}"))
    .Model(model =>
    {
        model.Id(f => f.PhoneTypeID);

    })
    .Sort(sort => sort.Add("Description").Ascending())
    .Create(create => create.Action("GridPhoneTypeAction", "Configuration", new { method = "create" }).Data("sendAntiForgery"))
    .Read(read => read.Action("GridPhoneTypeAction", "Configuration", new { method = "read" }).Data("sendAntiForgery"))
    .Update(update => update.Action("GridPhoneTypeAction", "Configuration", new { method = "update" }).Data("sendAntiForgery"))
    )
    .NoRecords()
    .Pageable(p => p.Info(true))
    .Filterable(filterable => filterable
    .Extra(false)
    .Operators(operators => operators
    .ForString(str => str.Clear()
    .StartsWith("Starts with")
    .IsEqualTo("Is equal to")
    .IsNotEqualTo("Is not equal to")
    .Contains("Contains")
    ))
    )
)

 

[Ivan Danchev]

Hi Richard,

Based on the provided info I've tested the scenario in a sample project. At my end no unexpected resizing of the Grid occurs. The project is attached to this reply. Could you give it a try at your end and modify it accordingly, so that the issue is reproduced? After that, attach it back for further review.

Regards,
Ivan Danchev
Progress Telerik

[Rick]

I have resolved the issue.  A JavaScript file was being loaded twice.  It was not a Kendo script so I am not sure why it would have caused the issue with the grid but once it was corrected the issue disappeared.

Thanks for the help.