Custom sorting of column with link

[Benjamin]

my kendo grid is rendering using the html table way. one of the column is hyper. would like to know how do i sort this?

would like to add on to my post that for the date column it seems to not be sorting correctly. the sorting is treating it as string, how do i convert it to datetime and also handle the case whereby the date column is empty to show the string Never.

below is my markup

<table class="table" id="kendo-table" aria-describedby="Listing for Users">
   <thead>
      <tr>
         <th scope="col" data-field="fullname">
            Full Name
         </th>
         <th scope="col" data-field="status">
            Status
         </th>
         <th scope="col" data-field="email">
            Email
         </th>
	 <th scope="col" data-field="lastLogin">
            Last Login Date
         </th>
         <th scope="col" data-sortable="false" >
            Action
         </th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>
            <a class="no-left-padding" href="/Admin/UserAccount/ViewDetail/681513f5-5ae0-4d3f-8604-b9703f1a8041">
            User 1
	    </a>
         </td>
         <td>
            <div class="user-status">
               <span>
               Invited
               </span>
            </div>
         </td>
         <td>
            [e-mail]                       
         </td>
	<td>23 Nov 2000, 2:17AM</td>
         <td>
            <a onclick="return confirm('Are you sure you want to proceed?')" href="/Admin/UserAccount/Listing?_UserId=681513f5-5ae0-4d3f-8604-b9703f1a8041&handler=Delete">
            <em class="material-symbols-sharp material-delete"></em>
            </a>
         </td>
      </tr>
      <tr>
         <td>
            <a class="no-left-padding" href="/Admin/UserAccount/ViewDetail/681513f5-5ae0-4d3f-8604-b9703f1a8041">
            User 2                               </a>
         </td>
         <td>
            <div class="user-status">
               <span>
               Invited
               </span>
            </div>
         </td>
         <td>
            [e-mail]                            
         </td>
	<td>23 Feb 2022, 3:17PM</td>
         <td>
            <a onclick="return confirm('Are you sure you want to proceed?')" href="/Admin/UserAccount/Listing?_UserId=681513f5-5ae0-4d3f-8604-2a5b7f1a8041&handler=Delete">
            <em class="material-symbols-sharp material-delete"></em>
            </a>
         </td>
      </tr>
      <tr>
         <td>
            <a class="no-left-padding" href="/Admin/UserAccount/ViewDetail/681513f5-5ae0-4d3f-8604-b9703f1a8041">
            User 3                               </a>
         </td>
         <td>
            <div class="user-status">
               <span>
               Invited
               </span>
            </div>
         </td>
         <td>
            [e-mail]                            
         </td>
	<td>Never</td>
         <td>
            <a onclick="return confirm('Are you sure you want to proceed?')" href="/Admin/UserAccount/Listing?_UserId=681513f5-5ae0-3a12-8604-2a5b7f1a8041&handler=Delete">
            <em class="material-symbols-sharp material-delete"></em>
            </a>
         </td>
      </tr>
   </tbody>
</table>

[Neli]

Hi Benjamin,

If you need to sort only the text of the hyperlinks you can use a custom compare function to "extract" only the text part of the data(without the link itself) and sort by it.

sort: function(e) {
        // Prevent the default behavior.
        e.preventDefault();
        // Check which column is being sorted. We only need to change the sorting behavior for the first column(the one with the link).
        let field = e.sort.field;
        
        if(field == "title1") {
          // Specify a custom compare function
        	e.sort.compare = function(a, b, desc) {
              // Extract only the part between <a></a>.
        	    let aNoHref = a.title1.match(/\w+(?=<\/a>)/)[0];
              let bNoHref = b.title1.match(/\w+(?=<\/a>)/)[0];
              
              // Compare the two values.
              return aNoHref.localeCompare(bNoHref);
        	}
        }
        // Sort the dataSource manually.
        this.dataSource.sort(e.sort);
      }

Here you will find such Dojo example. 

In order to ensure that the records will be sorted or filtered as expected it is recommend to set the type of the data that will be displayed in the columns. This can be achieved using the data- attributes. In the Dojo example linked here the data-type="date" is set for the third column, also template is used in order to display a custom string in case there is no value. 

  <th data-field="year" data-type="date" 
                data-template="#=year ? kendo.toString(year, 'D') : '<strong>No Data</strong>' #">Year</th>

I hope this helps. 

Regards,
Neli
Progress Telerik

[Benjamin]

hi, thanks for the comment. I tried and manage to sort the hyperlink column. but I am still having issues with the datetime one. I have created a dojo with my data 

[Neli]

Hi Benjamin,

In the provided Dojo example you will need to parse the strings in the lastLogin column to Date:

dataSource: {
      schema: {
        model: {
          fields: {
            lastlogin: { parse:function(date) {
              return kendo.parseDate(date, "dd-MM-yyyy");
            }}
          }
        }
      }
    }

Here you will find the modified Dojo example.

I hope this helps.

Regards,

Neli

[Benjamin]

Hi,

thanks for your reply. i tried on the modified dojo example. upon trying to sort the last login column, the sorting seems to be wrong. refer to the attached image below

[Georgi Denchev]

Hi, Benjamin,

Since the dates are presented as a string, the dataSource sorts them as such, instead of a Date Object.

You can use the schema.parse method to transform the string into objects.

      schema: {
        parse: function(data) {
          data.forEach((item) => {
            item.lastLogin = kendo.parseDate(item.lastLogin, "dd MMMM yyyy, h:mmtt");
          });
          
          return data;
        }
      }

Dojo

https://dojo.telerik.com/@gdenchev/oHuBuzOJ 

Best Regards,

Georgi

[Benjamin]

hi, thx for the assistance. I managed to achieve what I need.