Hide Grid NoDataTemplate when empty

2 Answers 642 Views
Grid
Claudio
Top achievements
Rank 2
Bronze
Bronze
Iron
Claudio asked on 03 Jun 2022, 08:11 AM

Hi, i would like to hide the row showed when the grid has no data.

I tried set an empty NoDataTemplate as you can show in this sample, but there is still an empty row in the grid.

https://blazorrepl.telerik.com/mwOKORks03LqmocU06

My actual workaround is using css:

<TelerikGrid Class="hide-no-data-template">...</TelerikGrid>

.hide-no-data-template .k-grid-norecords {
    display: none;
}

or set the diplay attribute via JSInterop for specific cases.

I think when NoDataTemplate is empty you should not show an empty row but simply hide the template row.

Can be solved?

 

2 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 04 Jun 2022, 08:14 AM

Hi Claudio,

In the common case, the grid should show an indication to the user while it is loading data and when there is no actual data - this is important for the UX so that the user knows what is happening, whether they should wait, or whether the grid is really empty.

Thus, the NoDataTemplate is just a way for you to customize the appearance - the necessary HTML elements above it will and should still render so that content you put there will be styled and positioned as intended.

I am not sure what the issue is with those elements being there in the case you have, but using CSS to hide them is a valid way.

Regards,
Marin Bratanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Claudio
Top achievements
Rank 2
Bronze
Bronze
Iron
answered on 06 Jun 2022, 07:43 AM

Hi Marin,

my question is caused by the fact that in previous Kendo-UI library for JQuery / AngularJS the no data template behaviour is different.

As you can see in the documentation the default behavious was not showing the template in the grid, so this is a breaking change of blazor library:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/norecords

Can be scheduled an implementation to restore this feature without using css?

Thanks

 

Dimo
Telerik team
commented on 08 Jun 2022, 11:41 AM

Claudio, can you explain what is the problem with the empty row? This can help us understand your scenario better.

Claudio
Top achievements
Rank 2
Bronze
Bronze
Iron
commented on 08 Jun 2022, 12:12 PM | edited

Actually empty template has graphics side effect, if you hovering the grid with mouse it highlight the empty row:

for us the best solution would be keep the same behaviour of Kendo UI for JQuery / Angular, showing the template only if declared explicitely, but this solution will cause a breaking changes against the current version of the blazor library, so the minimal change would be to handle the empty template not showing an empty row.
Dimo
Telerik team
commented on 08 Jun 2022, 12:51 PM | edited

Fair point. I have sent this to our front-end colleagues for evaluation and fixing.

Edit: you can track this GitHub issue.

Claudio
Top achievements
Rank 2
Bronze
Bronze
Iron
commented on 10 Jun 2022, 07:06 AM

Thanks
Tags
Grid
Asked by
Claudio
Top achievements
Rank 2
Bronze
Bronze
Iron
Answers by
Marin Bratanov
Telerik team
Claudio
Top achievements
Rank 2
Bronze
Bronze
Iron
Share this question
or