How can I assert that column values are ascending or descending sorted in grid table using C# selenium?

[Mehwish 001]

The test case includes a grid table which has different columns and on click on any column that column gets in ascending order. On again click on that column the column values get sorted in descending order.

The html is
<div class="container-fluid">
<!---->
<div class="card mb-3 position-static">
<div>
<div resize="true" data-role="grid" class="k-grid k-widget k-display-block" style="height: 73px;">
<!----><!----><!----><!----><!----><!----><!----><!---->
<div class="k-grid-header" style="padding-right: 17px;">
<div class="k-grid-header-wrap k-auto-scrollable" data-role="resizable">
<table role="grid">
<colgroup>
<col>
<col>
<col>
<col>
<col>
<col>
<col>
<col>
</colgroup>
<thead role="rowgroup">
<tr role="row">
<th scope="col" role="columnheader" data-field="Date" aria-haspopup="true" rowspan="1" data-title="Date" data-index="0" id="3676ce9b-f104-4c2e-9269-8b3d799fb898" class="k-header" data-role="columnsorter"><a class="k-link" href="#">Date</a></th>
<th scope="col" role="columnheader" data-field="PersonID" aria-haspopup="true" rowspan="1" data-title="Peron ID" data-index="1" id="1da152a5-1401-4925-a58b-37ef1fa37e07" class="k-header" data-role="columnsorter"><a class="k-link" href="#">Person ID</a></th>
<th scope="col" role="columnheader" data-field="Time" aria-haspopup="true" rowspan="1" data-title="Time" data-index="2" id="12e13d76-4736-4b45-b433-733476d7b1f1" class="k-header" data-role="columnsorter"><a class="k-link" href="#">Time</a></th>
<th scope="col" role="columnheader" data-field="Name" aria-haspopup="true" rowspan="1" data-title="Name" data-index="3" id="abb39bdc-697a-402d-a527-20b8872b4fb6" class="k-header" data-role="columnsorter"><a class="k-link" href="#">Name</a></th>
<th scope="col" role="columnheader" data-field="Teacher Name" aria-haspopup="true" rowspan="1" data-title="Teacher" data-index="4" id="c01ac2fe-e17b-4af3-80aa-878fb2dcc22d" class="k-header" data-role="columnsorter"><a class="k-link" href="#">Teacher</a></th>
<th scope="col" role="columnheader" data-field="PostName" aria-haspopup="true" rowspan="1" data-title="Person Designation" data-index="5" id="70e67306-de3e-43ed-b228-b7306c8b3779" class="k-header" data-role="columnsorter"><a class="k-link" href="#">Person Designation</a></th>
<th scope="col" role="columnheader" data-field="Issue" aria-haspopup="true" rowspan="1" data-title="Issue" data-index="6" id="dee4933d-c72f-4398-bf7e-a8a515fa2b65" class="k-header" data-role="columnsorter"><a class="k-link" href="#">Issue</a></th>
<th scope="col" role="columnheader" data-field="Reason" aria-haspopup="true" rowspan="1" data-title="Reason" data-index="7" id="4ebf2525-7ba2-4494-9179-96f0cc657505" class="k-header" data-role="columnsorter"><a class="k-link" href="#">Reason</a></th>
</tr>
</thead>
</table>
<div class="k-resize-handle" style="top: 0px; left: 156px; height: 31.0062px; width: 9px;">
<div class="k-resize-handle-inner"></div>
</div>
</div>
</div>
<div class="k-grid-content k-auto-scrollable" style="height: 42px;">
<table role="grid" style="height: auto;">
<colgroup>
<col>
<col>
<col>
<col>
<col>
<col>
<col>
<col>
</colgroup>
<tbody role="rowgroup">
<tr data-uid="3ab9eb93-0e51-4814-b6fc-c0a209ea214e" role="row">
<td class="" role="gridcell">08/28/2020</td>
<td class="" role="gridcell">1900</td>
<td class="" role="gridcell">07:17</td>
<td class="" role="gridcell">John</td>
<td class="" role="gridcell"></td>
<td class="" role="gridcell"></td>
<td class="" role="gridcell">Loggin Issue</td>
<td class="" role="gridcell">Incorrect Credentials</td>
</tr>
<tr class="k-alt" data-uid="e189933c-a1cd-403c-a84f-d8d0a2e0a5ad" role="row">
<td class="" role="gridcell">08/28/2020</td>
<td class="" role="gridcell">2002</td>
<td class="" role="gridcell">07:37</td>
<td class="" role="gridcell">Moxley</td>
<td class="" role="gridcell"></td>
<td class="" role="gridcell"></td>
<td class="" role="gridcell">Financials</td>
<td class="" role="gridcell">Access denied</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!---->
</div>
How can I apply assert that on first click on column, the column value are sorted in ascending order and on second click on that column the column values are sorted in descending order.

I am using C# selenium web driver.

Continue reading...