J
asked on 05 Sep 2021, 12:49 AM
| edited on 05 Sep 2021, 12:50 AM
Is there a tool group available to sort a table in alphabetical order that has been entered into the editor with the insert table feature? If not, is there an easy way to incorporate this?
1 Answer, 1 is accepted
0
Rumen
Telerik team
answered on 07 Sep 2021, 07:58 PM
Hi J N,
The requested functionality can be implemented like a custom tool.
<p><buttononclick="sortTable();return false;">Sort</button></p><telerik:RadEditorrunat="server"ID="RadEditor1"><Content><tableid="myTable"><tr><th>Name</th><th>Country</th></tr><tr><td>Berglunds snabbkop</td><td>Sweden</td></tr><tr><td>North/South</td><td>UK</td></tr><tr><td>Alfreds Futterkiste</td><td>Germany</td></tr><tr><td>Koniglich Essen</td><td>Germany</td></tr><tr><td>Magazzini Alimentari Riuniti</td><td>Italy</td></tr><tr><td>Paris specialites</td><td>France</td></tr><tr><td>Island Trading</td><td>UK</td></tr><tr><td>Laughing Bacchus Winecellars</td><td>Canada</td></tr></table></Content></telerik:RadEditor><script>functionsortTable() {
var table, rows, switching, i, x, y, shouldSwitch;
var editor = $find("<%=RadEditor1.ClientID%>")
table = editor.get_document().getElementById("myTable");
switching = true;
/*Make a loop that will continue until
no switching has been done:*/while (switching) {
//start by saying: no switching is done:
switching = false;
rows = table.rows;
/*Loop through all table rows (except the
first, which contains table headers):*/for (i = 1; i < (rows.length - 1); i++) {
//start by saying there should be no switching:
shouldSwitch = false;
/*Get the two elements you want to compare,
one from current row and one from the next:*/
x = rows[i].getElementsByTagName("TD")[0];
y = rows[i + 1].getElementsByTagName("TD")[0];
//check if the two rows should switch place:if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
//if so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
}
if (shouldSwitch) {
/*If a switch has been marked, make the switch
and mark that a switch has been done:*/
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
}
}
}
</script>
You can see how to add a custom tool at Custom Tools.
Best Regards,
Rumen
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/.