Hi,
I created a page with a grid inside.
From computer and tablet everything works fine, while if I open the page from the phone (iphone with safari browser) the grid is visible but the telerik theme is not applied (for example the default color or word style)
Thank you
1 Answer, 1 is accepted
Hi Marco,
Based on the provided information alone, it would be hard to determine why the Telerik UI for ASP.NET Core's theme is not applied accordingly on your side.
Generally, the Telerik UI for ASP.NET Core Grid exposes adaptive rendering capabilities which depart from the desktop-like inline and popup behaviors whilst providing support for mobile devices.
This is further outlined within the following demo:
- Grid Adaptive Rendering (Demo) - open the "View Source" tab to observe the Grid's definition.
The key configuration that needs to be taken into account is the inclusion of the .Mobile() API configuration and an explicitly defined height via the .HtmlAttributes() API configuration as well. For instance:
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModelGridPopUp>()
.Name("grid")
.Mobile()
.HtmlAttributes(new { style = "height:450px;" })
// Omitted for brevity...
)More information regarding the specifics of the Adaptive Rendering functionality is also available within the following documentation resource:
With that in mind, I have tested the aforementioned demo with an iOS device in Safari and it seems to produce an adequate rendering result whilst enabling alteration through the themes. Attached you will find a screen capture that further depicts this.
If the mentioned above does not help, would it be possible for you to share more details in regard to the currently inducted scenario on your side? This will help me get a better overall understanding of the case and will allow me to conduct further research in regard to finding the culprit that is causing the theming issue.
I look forward to hearing back from you.
Kind Regards,
Alexander
Progress Telerik
Rank 3
Iron
Iron
Iron
Hi Alexander,
Thank you for answering me.
I will try to give you more details
The page is a razor page that displays a hierarchical grid.
The css theme that I use is a theme that I created with theme builder only changing the default color.
This is the grid:
On the documentation that you have indicated to me I have read that it is indicated to set the height explicitly, before I set it explicitly. So I tried to change this setting but the problem persists.
If I try to open the page from computer or table, it works fine:
The style of the words is correct.
I tried from iphone and samsung:
- samsung: with chrome the word style is correct
iphone: both with safari and with chrome the style of the words doesn't work
I hope the given details can help you understand my problem.
I am waiting for an answer.
Kind Regards,
Marco
Hi Marco,
Thank you for the additional clarification.
Upon further examination of the reported behavior, it appears that the issue may persevere due to the IOS's internally installed fonts as they differ from the ones installed for Android devices.
I have further tested the aforementioned suppositions within a scenario where a Grid has a customary theme with the following style alterations from ThemeBuilder:
And a raw HTML markup page without the inclusion of the Telerik UI for ASP.NET Core and Kendo UI for jQuery libraries. And it seems that the same behavior is exhibited in both scenarios. Thus, it appears that the reported behavior might be an IOS issue rather than something specific to the themes.
Here is a Telerik REPL in which I conducted my experiments:
- Telerik REPL for ASP.NET Core Example - notice I have directly embedded the style rule for the Grid's headers to the disability of the REPL to include customary themes.
Additionally, I have found the following topic that may be indirectly related to the reported rendering anomaly: