Cómo implementar la búsqueda y filtrado en un árbol de Telerik para buscar en todos los niveles de un árbol.

Este es mi javascript. Tengo un árbol que tiene 4 niveles. Primero tengo que hacer que la búsqueda y el filtrado funcionen en los dos primeros niveles de código, es decir, el nivel 0 y 1. También quiero que cuando el usuario presione la tecla de retroceso en el cuadro de texto, se muestre el resultado más reciente … por favor ayúdame.

<telerik:radpane id="LeftPanelAssigned" runat="server" width="20%" cssclass="management" onclientbeforeresize="LeftPanelAssigned_OnClientBeforeResize"> <asp:label id="RadTextBox2" text="Assigned" runat="server"></asp:label> <asp:label id="txtAssinedcount" readonly="true" runat="server"></asp:label> <asp:textbox id="txtSearch" runat="server" onkeyup="SearchEmployees(this, '#TreeAssignedWorkflow');" placeholder="Search employee"> </asp:textbox> <telerik:radtreeview id="TreeAssignedWorkflow" runat="server" cssclass="tree" onnodeclick="TreeAssignedWorkflow_NodeClick" onclientmouseover="TreeAssignedWorkflowOnClientMouseOver" onclientmouseout="TreeAssignedWorkflowOnClientMouseOut" onclientcontextmenuitemclicked="WFTreeContextMenuClick"> <contextmenus> <telerik:radtreeviewcontextmenu id="RadTreeViewContextMenu1" runat="server"> <items> <telerik:radmenuitem text="Reference Search"> </telerik:radmenuitem> <telerik:radmenuitem text="Sort By Date"> </telerik:radmenuitem> <telerik:radmenuitem text="Sort By Type"> </telerik:radmenuitem> </items> <collapseanimation type="none"></collapseanimation> </telerik:radtreeviewcontextmenu> </contextmenus> </telerik:radtreeview> </telerik:radpane>

davy.ai

July 26, 2023 at 9:52 am

Para que la búsqueda y el filtrado funcionen para los dos primeros niveles del árbol en el javascript dado, puedes modificar la función onkeyup del cuadro de texto de la siguiente manera:

onkeyup="SearchEmployees(this, '#TreeAssignedWorkflow', 2);"

El tercer parámetro ‘2’ especifica el número de niveles a buscar en el árbol. De manera similar, para mostrar el último resultado de búsqueda cuando el usuario presiona la tecla de retroceso en el cuadro de texto, puedes agregar un evento onkeydown al cuadro de texto y llamar a una función de la siguiente manera:

onkeydown="showLatestResult(event, '#TreeAssignedWorkflow');"

La función showLatestResult se puede definir así:

function showLatestResult(event, treeViewID) {
    if (event.keyCode === 8) { // tecla de retroceso
        var treeView = $find(treeViewID);
        var nodes = treeView.get_allNodes();
        if (treeView.get_selectedNode()) {
            // mostrar el nodo seleccionado más reciente
            treeView.get_selectedNode().set_selected(false);
            treeView.set_selectedNode(null);
        }
        for (var i = nodes.length - 1; i >= 0; i--) {
            if (nodes[i].get_selected()) {
                nodes[i].set_selected(false);
                nodes[i].set_expanded(false);
                if (i > 0) {
                    // seleccionar el nodo anterior
                    var prevNode = nodes[i - 1];
                    prevNode.set_selected(true);
                    prevNode.scrollIntoView();
                    break;
                }
            }
        }
        // evitar el comportamiento predeterminado de la tecla de retroceso
        event.preventDefault();
    }
}

Esta función verifica si la tecla presionada es la tecla de retroceso (keyCode=8) y luego obtiene todos los nodos del árbol. Luego encuentra el nodo seleccionado más reciente y lo deselecciona mientras colapsa sus nodos padres si es necesario. Luego selecciona el nodo anterior, si existe, y lo desplaza a la vista. Finalmente, evita el comportamiento predeterminado de la tecla de retroceso.

Answer

davy.ai

July 26, 2023 at 9:52 am
Para que la búsqueda y el filtrado funcionen para los dos primeros niveles del árbol en el javascript dado, puedes modificar la función onkeyup del cuadro de texto de la siguiente manera:
```
onkeyup="SearchEmployees(this, '#TreeAssignedWorkflow', 2);"
```
El tercer parámetro ‘2’ especifica el número de niveles a buscar en el árbol. De manera similar, para mostrar el último resultado de búsqueda cuando el usuario presiona la tecla de retroceso en el cuadro de texto, puedes agregar un evento onkeydown al cuadro de texto y llamar a una función de la siguiente manera:
```
onkeydown="showLatestResult(event, '#TreeAssignedWorkflow');"
```
La función showLatestResult se puede definir así:
```
function showLatestResult(event, treeViewID) {
    if (event.keyCode === 8) { // tecla de retroceso
        var treeView = $find(treeViewID);
        var nodes = treeView.get_allNodes();
        if (treeView.get_selectedNode()) {
            // mostrar el nodo seleccionado más reciente
            treeView.get_selectedNode().set_selected(false);
            treeView.set_selectedNode(null);
        }
        for (var i = nodes.length - 1; i >= 0; i--) {
            if (nodes[i].get_selected()) {
                nodes[i].set_selected(false);
                nodes[i].set_expanded(false);
                if (i > 0) {
                    // seleccionar el nodo anterior
                    var prevNode = nodes[i - 1];
                    prevNode.set_selected(true);
                    prevNode.scrollIntoView();
                    break;
                }
            }
        }
        // evitar el comportamiento predeterminado de la tecla de retroceso
        event.preventDefault();
    }
}
```
Esta función verifica si la tecla presionada es la tecla de retroceso (keyCode=8) y luego obtiene todos los nodos del árbol. Luego encuentra el nodo seleccionado más reciente y lo deselecciona mientras colapsa sus nodos padres si es necesario. Luego selecciona el nodo anterior, si existe, y lo desplaza a la vista. Finalmente, evita el comportamiento predeterminado de la tecla de retroceso.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Cómo implementar la búsqueda y filtrado en un árbol de Telerik para buscar en todos los niveles de un árbol.

Answer

davy.ai