Grid Persist State changing HTML tags in table column headers

[Fiona]

Summary

As of Telerik v2022, after loading a persist state in a Grid, the HTML tags change from <a> to <span>. 

When we updated to Telerk 2022, we noticed that after loading a persisted state grid, the format of column heading changed. This led us to investigate the HTML tags before and after loading persist states and note that the HTML tags changed. This was true even on the Grid Persist State example in Telerik Docs: https://demos.telerik.com/aspnet-mvc/grid/persist-state.

Before Loading State

This is after loading the page and before interacting with the grid at all. (ie: Pressing F5)

<tr>
	<th class="k-header k-filterable" data-field="ContactName" data-index="0" data-title="Contact Name" id="322f9873-a501-4984-9596-11746efc9cbe" scope="col" data-role="columnsorter" style="touch-action: none;">
		<a class="k-link" href="/aspnet-mvc/grid/persiststate_customers_read?grid-sort=ContactName-asc">Contact Name</a>
		<a class="k-header-column-menu" href="#" title="Contact Name edit column settings" aria-label="Contact Name edit column settings" tabindex="-1">
			<span class="k-icon k-i-more-vertical"></span>
		</a>
	</th>
</tr>

After Loading State

This is after loading the persisted state of the grid. (ie: Clicking the "Load State") This behaviour is the same regardless if you save the state before. After clicking "Load State" without editing anything (in order to keep HTML as close as possible) this is the HTML.

<tr>
	<th scope="col" role="columnheader" data-field="ContactName" aria-haspopup="true" rowspan="1" data-title="Contact Name" aria-label="Contact Name Press ctrl + space to group" data-index="0" headers="undefined" id="65f2198b-846f-464a-9cb2-c04152d624eb" class="k-header k-filterable" data-role="columnsorter" style="touch-action: none;">
		<span class="k-cell-inner">
		<span class="k-link">
			<span class="k-column-title">Contact Name</span>
		</span>
		<a class="k-header-column-menu" href="#" title="Contact Name edit column settings" aria-label="Contact Name edit column settings" tabindex="-1">
			<span class="k-icon k-i-more-vertical"></span>
		</a>
		</span>
	</th>
</tr>

 

Differences

When initially loading, the "k-link" class is initially in an <a> tag, however, after loading persist state, it is in a <span> tag. Since our CSS file was tied to the type of the HTML tag, this broke our formatting functionality. Is this behaviour intentional? Especially as this can cause formatting, JS tied behaviour and other issues with sites that transition to use a Telerik 2022 Persist State Grid.

 

[Ivan Danchev]

Hello Fiona,

Thank you for reporting this issue. The initial rendering (anchor) in the MVC Grid is incorrect, i.e. the rendering should be as in after loading the state, because that is the rendering of the Kendo UI for jQuery Grid. The MVC Grid should render the same elements in the header as the Kendo UI for jQuery Grid. 

I've logged a Bug Report item on your behalf: https://feedback.telerik.com/aspnet-mvc/1574856-grid-difference-in-header-rendering-compared-to-the-kendo-ui-grid and I've updated your Telerik points for reporting this issue.

Regards,
Ivan Danchev
Progress Telerik