@progress/telerik-jquery-report-viewer 25.25.211 → 26.25.521

package/dist/cjs/search.js

@@ -4,26 +4,49 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var utils = require('./utils.js');
 var stringResources = require('./stringResources.js');
-var binder = require('./binder.js');
-var enums = require('./enums.js');
 var command = require('./command.js');
+var button = require('./components/button.js');
+var toggleButton = require('./components/toggle-button.js');
+var RCV = require('@progress/telerik-common-report-viewer');
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var RCV__namespace = /*#__PURE__*/_interopNamespace(RCV);
 
 var defaultOptions = {};
+const componentMap = {
+  "button": button.Button,
+  "toggle-button": toggleButton.ToggleButton
+};
 function replaceStringResources($search) {
   if (!$search) {
     return;
   }
-  var $searchCaption = $search.find(".trv-search-dialog-caption-label");
   var $searchOptions = $search.find(".trv-search-dialog-search-options");
-  var $searchStopButton = $search.find("a[data-command='telerik_ReportViewer_searchDialog_StopSearch']");
-  var $searchMatchCaseButton = $search.find("a[data-command='telerik_ReportViewer_searchDialog_MatchCase']");
-  var $searchMatchWholeWordButton = $search.find("a[data-command='telerik_ReportViewer_searchDialog_MatchWholeWord']");
-  var $searchUseRegexButton = $search.find("a[data-command='telerik_ReportViewer_searchDialog_UseRegex']");
-  var $searchNavigateUpButton = $search.find("a[data-command='telerik_ReportViewer_searchDialog_NavigateUp']");
-  var $searchNavigateDownButton = $search.find("a[data-command='telerik_ReportViewer_searchDialog_NavigateDown']");
+  var $searchStopButton = $search.find("button[data-command='telerik_ReportViewer_searchDialog_StopSearch']");
+  var $searchMatchCaseButton = $search.find("button[data-command='telerik_ReportViewer_searchDialog_MatchCase']");
+  var $searchMatchWholeWordButton = $search.find("button[data-command='telerik_ReportViewer_searchDialog_MatchWholeWord']");
+  var $searchUseRegexButton = $search.find("button[data-command='telerik_ReportViewer_searchDialog_UseRegex']");
+  var $searchNavigateUpButton = $search.find("button[data-command='telerik_ReportViewer_searchDialog_NavigateUp']");
+  var $searchNavigateDownButton = $search.find("button[data-command='telerik_ReportViewer_searchDialog_NavigateDown']");
   replaceAttribute($search, "aria-label");
   replaceAttribute($searchOptions, "aria-label");
-  replaceText($searchCaption);
   replaceTitleAndAriaLabel($searchStopButton);
   replaceTitleAndAriaLabel($searchMatchCaseButton);
   replaceTitleAndAriaLabel($searchMatchWholeWordButton);
@@ -35,11 +58,6 @@ function replaceTitleAndAriaLabel($a) {
   replaceAttribute($a, "title");
   replaceAttribute($a, "aria-label");
 }
-function replaceText($el) {
-  if ($el) {
-    $el.text(stringResources.stringResources[$el.text()]);
-  }
-}
 function replaceAttribute($el, attribute) {
   if ($el) {
     $el.attr(attribute, stringResources.stringResources[$el.attr(attribute)]);
@@ -50,53 +68,56 @@ class Search {
     this.options = $.extend({}, defaultOptions, options);
     this.viewerOptions = viewerOptions;
     this.element = element;
+    this.$element = $(element);
+    this.reportViewerWrapper = $(`[data-selector='${this.viewerOptions.viewerSelector}']`);
+    this.viewer = this.reportViewerWrapper.data("telerik_ReportViewer");
     this.controller = this.options.controller;
+    this.notificationService = this.options.notificationService;
     this.initialized = false;
-    this.dialogVisible = false;
-    this.$element;
-    this.$inputBox;
-    this.$searchOptionsPlaceholder;
-    this.searchOptionsMenu;
-    this.$stopSearchPlaceholder;
-    this.stopSearchMenu;
-    this.$navigationPlaceholder;
-    this.navigationMenu;
-    this.$resultsLabel;
-    this.$resultsPlaceholder;
-    this.kendoComboBox;
     this.kendoSearchDialog;
-    this.stopSearchCommand;
-    this.optionsCommandSet;
-    this.navigationCommandSet;
-    this.searchResults;
+    this.kendoComboBox;
+    this.resultsLabel;
+    this.kendoListView;
+    this.commands;
+    this.searchManager;
     this.mruList = [];
     this.inputComboRebinding;
     this.searchMetadataRequested;
     this.searchMetadataLoaded;
-    this.pendingHighlightItem;
     this.windowLocation;
-    this.reportViewerWrapper = $("[data-selector='" + this.viewerOptions.viewerSelector + "']").find(".trv-report-viewer");
     this.lastSearch = "";
-    this.highlightManager = {
-      // the results that are found, but not selected (highlighted)
-      shadedClassName: "trv-search-dialog-shaded-result",
-      // the result that is currently selected (highlighted)
-      highlightedClassName: "trv-search-dialog-highlighted-result",
-      current: null,
-      elements: []
-    };
     if (!this.controller) {
       throw "No controller (telerikReporting.ReportViewerController) has been specified.";
     }
-    this.controller.pageReady(this.onPageReady.bind(this)).scrollPageReady(this.onPageReady.bind(this)).beginLoadReport(this.closeAndClear.bind(this)).viewModeChanged(this.closeAndClear.bind(this));
-    this.controller.setSendEmailDialogVisible((event, args) => {
-      if (args.visible && this.dialogVisible) {
-        this.toggle(!this.dialogVisible);
-      }
-    }).getSearchDialogState((event, args) => {
-      args.visible = this.dialogVisible;
-    }).setSearchDialogVisible((event, args) => {
+    if (!this.notificationService) {
+      throw "No notificationService (telerikReporting.NotificationService) has been specified.";
+    }
+    this.pagesAreaContainer = $('[data-id="trv-pages-area"]');
+    this.searchManager = new RCV__namespace.SearchManager(this.pagesAreaContainer[0], this.controller);
+    this.searchManager.on("searchComplete", this.updateResultsUI.bind(this));
+    this.init();
+  }
+  init() {
+    if (this.initialized) {
+      return;
+    }
+    replaceStringResources(this.$element);
+    this._initDialog();
+    this._initSearchbox();
+    this._initResultsArea();
+    this._attachCommands();
+    this._attachEvents();
+    this.updateResultsUI(null);
+    this.initialized = true;
+  }
+  _attachEvents() {
+    this.controller.on("beginLoadReport", this.closeAndClear.bind(this)).on("viewModeChanged", this.closeAndClear.bind(this));
+    this.notificationService.setSearchDialogVisible((event, args) => {
       this.toggleSearchDialog(args.visible);
+    }).setSendEmailDialogVisible((event, args) => {
+      if (args.visible && this.controller.getSearchInitiated()) {
+        this.close();
+      }
     });
     $(window).on("resize", () => {
       if (this.kendoSearchDialog && this.kendoSearchDialog.options.visible) {
@@ -109,18 +130,18 @@ class Search {
     if (this.searchMetadataRequested) {
       return;
     }
-    this.toggle(false);
+    this.close();
     this.searchMetadataLoaded = false;
   }
   toggleSearchDialog(show) {
-    this.dialogVisible = show;
+    this.controller.setSearchInitiated(show);
     if (show) {
       var searchMetadataOnDemand = this.viewerOptions.searchMetadataOnDemand;
       if (searchMetadataOnDemand && !this.searchMetadataLoaded) {
         this.searchMetadataRequested = true;
-        this.controller.reportLoadComplete((event, args) => {
+        this.controller.onAsync("reportLoadComplete", async () => {
           if (this.searchMetadataRequested) {
-            this.toggle(true);
+            this.open();
             this.searchMetadataRequested = false;
           }
         });
@@ -130,134 +151,88 @@ class Search {
     }
     this.toggle(show);
   }
+  open() {
+    this.toggle(true);
+  }
+  close() {
+    this.toggle(false);
+  }
   toggle(show) {
-    this.dialogVisible = show;
+    this.controller.setSearchInitiated(show);
     if (show) {
       this.searchMetadataLoaded = true;
-      this.ensureInitialized();
       this.kendoSearchDialog.open();
-      this.kendoComboBox.value("");
-      this.updateResultsUI(null);
-      this.toggleErrorLabel(false, null);
     } else {
-      this.clearColoredItems();
+      this.searchManager.closeSearch();
       if (this.kendoSearchDialog && this.kendoSearchDialog.options.visible) {
         this.kendoSearchDialog.close();
       }
     }
   }
-  ensureInitialized() {
-    if (!this.initialized) {
-      this.$element = $(this.element);
-      this.$inputBox = this.$element.find(".trv-search-dialog-input-box");
-      this.$resultsLabel = this.$element.find(".trv-search-dialog-results-label");
-      this.$resultsPlaceholder = this.$element.find(".trv-search-dialog-results-area");
-      this.initResultsArea();
-      replaceStringResources(this.$element);
-      try {
-        this.$searchOptionsPlaceholder = this.$element.find(".trv-search-dialog-search-options").kendoMenu();
-        this.$stopSearchPlaceholder = this.$element.find(".trv-search-dialog-stopsearch-placeholder").kendoMenu();
-        this.$navigationPlaceholder = this.$element.find(".trv-search-dialog-navigational-buttons").kendoMenu();
-      } catch (error) {
-        console.error("Instantiation of Kendo Menu for Search Dialog threw an exception", error);
-        throw error;
-      }
-      this.searchOptionsMenu = this.$searchOptionsPlaceholder.data("kendoMenu");
-      this.stopSearchMenu = this.$stopSearchPlaceholder.data("kendoMenu");
-      this.navigationMenu = this.$navigationPlaceholder.data("kendoMenu");
-      this.searchOptionsMenu.element.on("keydown", this.onKeyDown);
-      this.stopSearchMenu.element.on("keydown", this.onKeyDown);
-      this.navigationMenu.element.on("keydown", this.onKeyDown);
-      this.overrideDefaultMenuStyling(".trv-search-dialog-search-options");
-      try {
-        this.kendoComboBox = this.$inputBox.kendoComboBox({
-          dataTextField: "value",
-          dataValueField: "value",
-          dataSource: this.mruList,
-          contentElement: "",
-          change: this.kendoComboBoxSelect.bind(this),
-          ignoreCase: false,
-          // the actual search-when-typing performs on this event.
-          filtering: this.onInputFiltering.bind(this),
-          filter: "startswith",
-          delay: 1e3,
-          open: (event) => {
-            if (this.inputComboRebinding) {
-              event.preventDefault();
-            }
-          },
-          select: this.processComboBoxEvent.bind(this)
-        }).data("kendoComboBox");
-      } catch (error) {
-        console.error("Instantiation of Kendo ComboBox as search input threw an exception", error);
-        throw error;
-      }
-      try {
-        this.kendoSearchDialog = this.reportViewerWrapper.find(".trv-search-window").kendoWindow({
-          title: stringResources.stringResources.searchDialogTitle,
-          height: 390,
-          width: 310,
-          minWidth: 310,
-          minHeight: 390,
-          maxHeight: 700,
-          scrollable: false,
-          close: () => {
-            this.storeDialogPosition();
-            this.lastSearch = "";
-          },
-          open: () => {
-            this.adjustDialogPosition();
-          },
-          deactivate: () => {
-            this.controller.setSearchDialogVisible({
-              visible: false
-            });
-          },
-          activate: () => {
-            this.kendoComboBox.input.focus();
-          }
-        }).data("kendoWindow");
-      } catch (error) {
-        console.error("Instantiation of Kendo Window for Search dialog threw an exception", error);
-        throw error;
-      }
-      this.kendoSearchDialog.wrapper.addClass("trv-search");
-      this.initCommands();
-      this.initialized = true;
-    }
-  }
-  overrideDefaultMenuStyling(kendoMenuSelector) {
-    var menuItems = $(kendoMenuSelector).find(".k-menu-item");
-    for (var i = 0; i < menuItems.length; i++) {
-      $(menuItems[i]).removeClass("k-item");
-    }
+  _initSearchbox() {
+    this.kendoComboBox = new kendo.ui.ComboBox(this.element.querySelector(".trv-search-dialog-input-box"), {
+      placeholder: stringResources.stringResources.searchDialogCaptionText,
+      dataTextField: "value",
+      dataValueField: "value",
+      dataSource: this.mruList,
+      contentElement: "",
+      change: this.kendoComboBoxSelect.bind(this),
+      ignoreCase: false,
+      // the actual search-when-typing performs on this event.
+      filtering: this.onInputFiltering.bind(this),
+      filter: "startswith",
+      delay: 1e3,
+      open: (event) => {
+        if (this.inputComboRebinding) {
+          event.preventDefault();
+        }
+      },
+      select: this.processComboBoxEvent.bind(this)
+    });
   }
-  onKeyDown(event) {
-    var item = $(event.target).find(".k-focus");
-    if (event.keyCode === 13 && item && item.length > 0) {
-      var anchor = item.children("a");
-      if (anchor.length > 0) {
-        anchor.click();
+  _initDialog() {
+    this.kendoSearchDialog = new kendo.ui.Window(this.element, {
+      title: stringResources.stringResources.searchDialogTitle,
+      visible: false,
+      height: 390,
+      width: 310,
+      minWidth: 310,
+      minHeight: 390,
+      maxHeight: 700,
+      scrollable: false,
+      close: (event) => {
+        this.storeDialogPosition();
+        this.kendoComboBox.value("");
+        this.updateResultsUI(null);
+        this.toggleErrorLabel(false, null);
+        this.lastSearch = "";
+      },
+      open: (event) => {
+        this.adjustDialogPosition();
+      },
+      deactivate: (event) => {
+        this.notificationService.setSearchDialogVisible({
+          visible: false
+        });
+      },
+      activate: (event) => {
+        this.kendoComboBox.input.focus();
       }
-    }
+    });
+    this.kendoSearchDialog.element.removeClass("trv-search-dialog k-hidden");
+    this.kendoSearchDialog.wrapper.addClass("trv-search-dialog");
   }
   storeDialogPosition() {
-    var kendoWindow = this.kendoSearchDialog.element.parent(".k-window");
-    this.windowLocation = kendoWindow.offset();
+    this.windowLocation = this.kendoSearchDialog.wrapper.offset();
   }
   adjustDialogPosition() {
     var windowWidth = $(window).innerWidth();
     var windowHeight = $(window).innerHeight();
-    var kendoWindow = this.kendoSearchDialog.wrapper;
-    var width = kendoWindow.outerWidth(true);
-    var height = kendoWindow.outerHeight(true);
+    var width = this.kendoSearchDialog.wrapper.outerWidth(true);
+    var height = this.kendoSearchDialog.wrapper.outerHeight(true);
     var padding = 10;
     if (!this.windowLocation) {
-      var reportViewerCoords = this.reportViewerWrapper[0].getBoundingClientRect();
-      kendoWindow.css({
-        top: reportViewerCoords.top + padding,
-        left: reportViewerCoords.right - width - padding
-      });
+      var reportViewerCoords = this.pagesAreaContainer[0].getBoundingClientRect();
       this.kendoSearchDialog.setOptions({
         position: {
           top: reportViewerCoords.top + padding,
@@ -271,7 +246,6 @@ class Search {
       var bottom = top + height;
       if (right > windowWidth - padding) {
         left = Math.max(padding, windowWidth - width - padding);
-        kendoWindow.css({ left });
         this.kendoSearchDialog.setOptions({
           position: {
             left
@@ -280,7 +254,6 @@ class Search {
       }
       if (bottom > windowHeight - padding) {
         top = Math.max(padding, windowHeight - height - padding);
-        kendoWindow.css({ top });
         this.kendoSearchDialog.setOptions({
           position: {
             top
@@ -304,68 +277,73 @@ class Search {
       }
     }
   }
-  initCommands() {
-    this.optionsCommandSet = {
-      "searchDialog_MatchCase": new command.Command(),
-      "searchDialog_MatchWholeWord": new command.Command(),
-      "searchDialog_UseRegex": new command.Command()
-    };
-    Object.entries(this.optionsCommandSet).forEach(([commandName, command]) => {
-      command.exec = () => {
-        this.toggleCommand(command);
-      };
-    });
-    binder.Binder.attachCommands(this.$searchOptionsPlaceholder, this.optionsCommandSet, this.viewerOptions);
-    this.stopSearchCommand = new command.Command(() => {
-      this.stopSearch();
-    });
-    binder.Binder.attachCommands(this.$stopSearchPlaceholder, { "searchDialog_StopSearch": this.stopSearchCommand }, this.viewerOptions);
-    this.navigationCommandSet = {
-      "searchDialog_NavigateUp": new command.Command(() => {
+  _attachCommands() {
+    this.commands = {
+      searchDialog_MatchCase: new command.Command(),
+      searchDialog_MatchWholeWord: new command.Command(),
+      searchDialog_UseRegex: new command.Command(),
+      searchDialog_StopSearch: new command.Command(() => {
+        this.stopSearch();
+      }),
+      searchDialog_NavigateUp: new command.Command(() => {
         this.moveListSelection(-1);
       }),
-      "searchDialog_NavigateDown": new command.Command(() => {
+      searchDialog_NavigateDown: new command.Command(() => {
         this.moveListSelection(1);
       })
     };
-    binder.Binder.attachCommands(this.$navigationPlaceholder, this.navigationCommandSet, this.viewerOptions);
-  }
-  initResultsArea() {
-    try {
-      this.$resultsPlaceholder.kendoListView({
-        selectable: true,
-        navigatable: true,
-        dataSource: {},
-        contentElement: "",
-        template: "<div class='trv-search-dialog-results-row'><span>#: description #</span> <span class='trv-search-dialog-results-pageSpan'>" + stringResources.stringResources.searchDialogPageText + " #:page#</span></div>",
-        change: (event) => {
-          var listView = event.sender;
-          var index = listView.select().index();
-          var view = listView.dataSource.view();
-          var dataItem = view[index];
-          this.onSelectedItem(dataItem);
-          this.updateUI(index, view.length);
-        }
+    Object.keys(this.commands).forEach((key) => {
+      const element = this.element.querySelector(`button[data-command='telerik_ReportViewer_${key}']`);
+      const factory = componentMap[element?.dataset?.role];
+      const command = this.commands[key];
+      if (!factory) {
+        return;
+      }
+      return new factory(element, {
+        command
       });
-    } catch (error) {
-      console.error("Instantiation of Kendo ListView as search result area threw an exception", error);
-      throw error;
-    }
+    });
+    $(this.commands.searchDialog_MatchCase).on("checkedChanged", (event, newState) => {
+      this.searchForCurrentToken();
+    });
+    $(this.commands.searchDialog_MatchWholeWord).on("checkedChanged", (event, newState) => {
+      this.searchForCurrentToken();
+    });
+    $(this.commands.searchDialog_UseRegex).on("checkedChanged", (event, newState) => {
+      this.searchForCurrentToken();
+    });
+  }
+  _initResultsArea() {
+    this.resultsLabel = this.element.querySelector(".trv-search-dialog-results-label");
+    this.resultsLabel.innerText = stringResources.stringResources.searchDialogNoResultsLabel;
+    this.kendoListView = new kendo.ui.ListView(this.element.querySelector(".trv-search-dialog-results-area"), {
+      selectable: true,
+      navigatable: true,
+      dataSource: [],
+      contentElement: "",
+      template: `
+                <div class="k-list-item !k-align-items-start">
+                    <span class="k-list-item-text">#: description #</span>
+                    <span class="k-flex"></span>
+                    <span class="k-flex-none">${stringResources.stringResources.searchDialogPageText} #:page#</span>
+                </div>
+            `.trim(),
+      change: (event) => {
+        var listView = event.sender;
+        var index = listView.select().index();
+        var view = listView.dataSource.view();
+        var dataItem = view[index];
+        this.onSelectedItem(dataItem);
+        this.updateUI(index, view.length);
+      }
+    });
+    this.kendoListView.element.addClass("k-list k-list-md");
   }
   stopSearch() {
     this.setStopButtonEnabledState(false);
   }
-  toggleCommand(cmd) {
-    cmd.checked(!cmd.checked());
-    this.searchForCurrentToken();
-  }
   setStopButtonEnabledState(enabledState) {
-    this.stopSearchCommand.enabled(enabledState);
-  }
-  onPageReady(args, page) {
-    if (this.dialogVisible) {
-      this.colorPageElements(this.searchResults);
-    }
+    this.commands.searchDialog_StopSearch.setEnabled(enabledState);
   }
   onInputFiltering(event) {
     event.preventDefault();
@@ -389,25 +367,15 @@ class Search {
   searchForToken(token) {
     this.onSearchStarted();
     this.addToMRU(token);
-    this.controller.getSearchResults(
-      {
-        searchToken: token,
-        matchCase: this.optionsCommandSet.searchDialog_MatchCase.checked(),
-        matchWholeWord: this.optionsCommandSet.searchDialog_MatchWholeWord.checked(),
-        useRegex: this.optionsCommandSet.searchDialog_UseRegex.checked()
-      }
-    ).then((results) => {
-      this.updateResultsUI(results, null);
-    }).catch((errorMessage) => {
-      if (errorMessage) {
-        this.updateResultsUI(null, errorMessage);
-      }
+    this.searchManager.search({
+      searchToken: token,
+      matchCase: this.commands.searchDialog_MatchCase.getChecked(),
+      matchWholeWord: this.commands.searchDialog_MatchWholeWord.getChecked(),
+      useRegularExpressions: this.commands.searchDialog_UseRegex.getChecked()
     });
   }
   onSearchStarted() {
-    this.$resultsLabel.text(stringResources.stringResources.searchDialogSearchInProgress);
-    this.clearColoredItems();
-    this.searchResults = null;
+    this.resultsLabel.innerText = stringResources.stringResources.searchDialogSearchInProgress;
     this.setStopButtonEnabledState(true);
     this.toggleErrorLabel(false, null);
   }
@@ -416,11 +384,10 @@ class Search {
     if (error) {
       this.toggleErrorLabel(true, error);
     }
-    this.displayResultsList(results);
-    this.searchResults = results;
+    this.kendoListView.dataSource.data(results || []);
     if (results && results.length > 0) {
-      this.colorPageElements(results);
-      this.selectFirstElement();
+      this.kendoListView.select(this.kendoListView.content.children().first());
+      this.kendoListView.trigger("change");
     } else {
       this.updateUI(-1, 0);
     }
@@ -446,110 +413,34 @@ class Search {
     });
     this.inputComboRebinding = false;
   }
-  displayResultsList(results) {
-    var $listView = this.$resultsPlaceholder.data("kendoListView");
-    if (!results) {
-      results = [];
-    }
-    $listView.dataSource.data(results);
-  }
-  colorPageElements(results) {
-    if (!results || results.length === 0) {
-      return;
-    }
-    var $parent = this.$element.parent();
-    var $pageContainer = $parent.find(".trv-page-container");
-    var elements = $pageContainer.find("[data-search-id]");
-    Array.from(results).forEach((result) => {
-      var $searchElement = elements.filter("[data-search-id=" + result.id + "]");
-      if ($searchElement) {
-        $searchElement.addClass(this.highlightManager.shadedClassName);
-        this.highlightManager.elements.push($searchElement);
-      }
-    });
-    this.highlightItem(this.pendingHighlightItem);
-    this.pendingHighlightItem = null;
-  }
-  highlightItem(item) {
-    if (item) {
-      var currentItemId = item.id;
-      var newHighlighted = $(this.highlightManager.elements.filter((i) => {
-        return i.attr("data-search-id") === currentItemId;
-      })).first();
-      if (newHighlighted) {
-        this.highlightManager.current = newHighlighted[0];
-        if (this.highlightManager.current) {
-          var current = $("[data-search-id='" + currentItemId + "']");
-          current.removeClass(this.highlightManager.shadedClassName);
-          current.addClass(this.highlightManager.highlightedClassName);
-        }
-      }
-    }
-  }
-  selectFirstElement() {
-    var $listView = this.$resultsPlaceholder.data("kendoListView");
-    var first = $listView.element.children().first();
-    $listView.select(first);
-    $listView.trigger("change");
-  }
   onSelectedItem(item) {
-    if (!item) {
-      return;
-    }
-    if (this.highlightManager.current) {
-      this.highlightManager.current.removeClass(this.highlightManager.highlightedClassName);
-      this.highlightManager.current.addClass(this.highlightManager.shadedClassName);
-    }
-    if (item.page === this.controller.getCurrentPageNumber()) {
-      this.highlightItem(item);
-    } else {
-      if (this.controller.getPageMode() !== enums.PageModes.CONTINUOUS_SCROLL) {
-        this.clearColoredItems();
-      } else {
-        this.highlightItem(item);
-      }
-    }
-    this.pendingHighlightItem = item;
-    this.controller.navigateToPage(item.page, { type: "search", id: item.id });
+    this.searchManager.highlightSearchItem(item);
   }
   updateUI(index, count) {
     var str = count === 0 ? stringResources.stringResources.searchDialogNoResultsLabel : utils.stringFormat(stringResources.stringResources.searchDialogResultsFormatLabel, [index + 1, count]);
-    this.$resultsLabel.text(str);
+    this.resultsLabel.innerText = str;
     var allowMoveUp = index > 0;
     var allowMoveDown = index < count - 1;
-    this.navigationCommandSet.searchDialog_NavigateUp.enabled(allowMoveUp);
-    this.navigationCommandSet.searchDialog_NavigateDown.enabled(allowMoveDown);
-  }
-  clearColoredItems() {
-    if (this.highlightManager.elements && this.highlightManager.elements.length > 0) {
-      Array.from(this.highlightManager.elements).forEach(($element) => {
-        $element.removeClass(this.highlightManager.shadedClassName);
-      });
-    }
-    if (this.highlightManager.current) {
-      this.highlightManager.current.removeClass(this.highlightManager.highlightedClassName);
-    }
-    this.highlightManager.elements = [];
-    this.highlightManager.current = null;
+    this.commands.searchDialog_NavigateUp.setEnabled(allowMoveUp);
+    this.commands.searchDialog_NavigateDown.setEnabled(allowMoveDown);
   }
   moveListSelection(offset) {
-    var $listView = this.$resultsPlaceholder.data("kendoListView");
-    var $selected = $listView.select();
+    var $selected = this.kendoListView.select();
     if (!$selected) {
-      $selected = $listView.element.children().first();
-      $listView.select($selected);
-      $listView.trigger("change");
+      $selected = this.kendoListView.element.children().first();
+      this.kendoListView.select($selected);
+      this.kendoListView.trigger("change");
     } else {
-      var index = $listView.select().trigger("change").index();
-      var view = $listView.dataSource.view();
+      var index = this.kendoListView.select().trigger("change").index();
+      var view = this.kendoListView.dataSource.view();
       var newIndex = Math.min(view.length - 1, Math.max(0, index + offset));
       if (newIndex !== index) {
         var dataItem = view[newIndex];
-        var element = $listView.element.find('[data-uid="' + dataItem.uid + '"]');
+        var element = this.kendoListView.element.find('[data-uid="' + dataItem.uid + '"]');
         if (element) {
-          $listView.select(element);
-          $listView.trigger("change");
-          this.scrollIfNeeded(element[0], $listView.element[0]);
+          this.kendoListView.select(element);
+          this.kendoListView.trigger("change");
+          this.scrollIfNeeded(element[0], this.kendoListView.element[0]);
         }
       }
     }
@@ -566,17 +457,16 @@ class Search {
     }
   }
   toggleErrorLabel(show, message) {
-    var $errorIcon = this.$searchOptionsPlaceholder.find("i[data-role='telerik_ReportViewer_SearchDialog_Error']");
+    var $errorIcon = this.$element.find("i[data-role='telerik_ReportViewer_SearchDialog_Error']");
     if (!$errorIcon || $errorIcon.length === 0) {
       console.log(message);
       return;
     }
-    var menuItem = this.$searchOptionsPlaceholder.data("kendoMenu").element.find("li").last();
     if (show) {
       $errorIcon[0].title = message;
-      menuItem.show();
+      $errorIcon.show();
     } else {
-      menuItem.hide();
+      $errorIcon.hide();
     }
   }
 }