Custom sorting of column with link

1 Answer 36 Views
Grid
Benjamin
Top achievements
Rank 2
Iron
Veteran
Benjamin asked on 09 Jun 2022, 07:52 AM | edited on 09 Jun 2022, 08:14 AM

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>
            user@email.cim                       
         </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>
            test@email.com                            
         </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>
            test@email.com                            
         </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>


1 Answer, 1 is accepted

Sort by
0
Accepted
Neli
Telerik team
answered on 14 Jun 2022, 07:54 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Benjamin
Top achievements
Rank 2
Iron
Veteran
commented on 15 Jun 2022, 01:32 AM

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
Telerik team
commented on 17 Jun 2022, 02:19 PM

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
Top achievements
Rank 2
Iron
Veteran
commented on 17 Jun 2022, 02:27 PM

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
Telerik team
commented on 22 Jun 2022, 08:24 AM

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
Top achievements
Rank 2
Iron
Veteran
commented on 23 Jun 2022, 02:15 AM

hi, thx for the assistance. I managed to achieve what I need.
Tags
Grid
Asked by
Benjamin
Top achievements
Rank 2
Iron
Veteran
Answers by
Neli
Telerik team
Share this question
or