Grid Persist State changing HTML tags in table column headers

1 Answer 20 Views
Grid
Fiona
Top achievements
Rank 1
Fiona asked on 29 Jul 2022, 03:31 PM

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.

 

1 Answer, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 03 Aug 2022, 12:46 PM

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

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.

Tags
Grid
Asked by
Fiona
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Share this question
or