Add a Clear button to the TreeList Search Panel

Environment

Product	Progress® Kendo UI® TreeList for jQuery
Product Version	2023.3.1114

Description

I would like to add a button to clear the search text for TreeList Toolbar Search.

Solution

The TreeList search panel does not feature a clear button at present. Therefore, we need to:

1. Find the search textbox wrapper
2. Append the clear button with SVG icon
3. Add a click handler to the icon
4. Define the SVG Icon

    //Add a selector for SVG Icon
    var clearButton = '<span class="k-link k-link-clear" aria-label="Clear the Search"><span unselectable="on" id="clearIcon"></span></span>';

    $(".k-grid-search").append(clearButton);
    $(".k-link-clear").click(function(){
      $(".k-grid-search input").val("").trigger("input");                    
    });

    //Icon defined
    var icon =  kendo.ui.icon('x');
    $('#clearIcon').append(icon);

    <style>
      span.k-svg-i-x{
        padding-top: 5px;
      }

      .k-link-clear {
        margin-right: .428em;
      }
    </style>

    <div id="example">
      <div id="treelist"></div>
      <script>
        $(document).ready(function () {
          var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service";
          var dataSource = new kendo.data.TreeListDataSource({
            transport: {
              read: {
                url: crudServiceBaseUrl + "/EmployeeDirectory/All",
                dataType: "jsonp"
              }
            },
            batch: true,
            schema: {
              model: {
                id: "EmployeeId",
                parentId: "ReportsTo",
                fields: {
                  EmployeeId: { type: "number", editable: false, nullable: false },
                  ReportsTo: { nullable: true, type: "number" },
                  FirstName: { validation: { required: true } },
                  HireDate: { type: "date" },
                  Phone: { type: "string" },
                  HireDate: { type: "date" },
                  BirthDate: { type: "date" },
                  Extension: { type: "number", validation: { min: 0} },
                  Position: { type: "string" }
                },
                expanded: true
              }
            }
          });

          $("#treelist").kendoTreeList({
            dataSource: dataSource,
            toolbar: [ "search" ],
            height: 540,
            columns: [
              { field: "FirstName", expandable: true, title: "First Name", width: 250 },
              { field: "LastName", title: "Last Name" },
              { field: "Position" },
              { field: "Phone", title: "Phone" },
              { field: "Extension", title: "Ext", format: "{0:#}" }
            ],

          });

          //Add a selector for SVG Icon
          var clearButton = '<span class="k-link k-link-clear" aria-label="Clear the Search"><span unselectable="on" id="clearIcon"></span></span>';

          $(".k-grid-search").append(clearButton);
          $(".k-link-clear").click(function(){
            $(".k-grid-search input").val("").trigger("input");                    
          });

          //Icon defined
          var icon =  kendo.ui.icon('x');
          $('#clearIcon').append(icon);
        });
      </script>
    </div>

    <style>
      span.k-svg-i-x{
        padding-top: 5px;
      }

      .k-link-clear {
        margin-right: .428em;
      }
    </style>