RadEditor Is there a tool option to sort a table by alphabetical order in the editor view?

1 Answer 74 Views
Editor
J
Top achievements
Rank 1
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

Sort by
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.

You can apply and improve the solution provided at Creating a Sort Function, e.g.

       <p>
            <button onclick="sortTable();return false;">Sort</button>
        </p>


        <telerik:RadEditor runat="server" ID="RadEditor1">
            <Content>
                <table id="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>
            function sortTable() {
                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/.

Tags
Editor
Asked by
J
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Share this question
or