jQuery UI Widgets › Forums › TreeGrid › Search Field

Tagged: , , , , , , , , , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 9 years, 1 month ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Search Field Posts
  • July 31, 2015 at 6:11 pm Search Field #74383

    Lulu
    Participant

    Hi,

    I added the Search field functionality to my Tree Grid filter.
    I want to be able to search for “David” and get both the parent David with its children and the child David with it’s parent.

    right now if I search for David I will get the parent David (without it’s children) and I also get the second David that does not have any children.

    but what I want is this:

    If I search for David, I need to get the David parent and its children alon with the one that doesn’t have any children.

    Typed:
    David

    output data should be like this:
    David
    Tina
    Lama

    Sonia
    David

    but right now the output I get is this:
    David
    Sonia
    David

    How can I do this?

    here’s my code and thank you for your help.

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <title id=”Description”>Blaze Rule.</title>
    <link rel=”stylesheet” href=”CSS/jqx.base.css” type=”text/css” />

    <script type=”text/javascript” src=”Script/Grid/jquery-1.10.2.min.js”></script>
    <script type=”text/javascript” src=”Script/Grid/jqxcore.js”></script>
    <script type=”text/javascript” src=”Script/Grid/jqxdata.js”></script>
    <script type=”text/javascript” src=”Script/Grid/jqxdata.export.js”></script>
    <script type=”text/javascript” src=”Script/Grid/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”Script/Grid/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”Script/Grid/jqxdatatable.js”></script>
    <script type=”text/javascript” src=”Script/Grid/jqxtreegrid.js”></script>
    <script type=”text/javascript” src=”Script/Grid/jqxdropdownlist.js”></script>
    <script type=”text/javascript” src=”Script/Grid/jqxlistbox.js”></script>
    <script type=”text/javascript” src=”Script/Grid/demos.js”></script>

    <script type=”text/javascript”>
    $(document).ready(function () {

    // prepare the data
    var source =
    {
    dataType: “csv”,
    dataFields: [
    { name: ‘EmployeeKey’, type: ‘number’ },
    { name: ‘ParentEmployeeKey’, type: ‘number’ },
    { name: ‘FirstName’, type: ‘string’ },
    { name: ‘LastName’, type: ‘string’ },
    { name: ‘Title’, type: ‘string’ },
    { name: ‘HireDate’, type: ‘date’ },
    { name: ‘BirthDate’, type: ‘date’ },
    { name: ‘Phone’, type: ‘string’ },
    { name: ‘Gender’, type: ‘string’ },
    { name: ‘DepartmentName’, type: ‘string’ }
    ],
    hierarchy:
    {
    keyDataField: { name: ‘EmployeeKey’ },
    parentDataField: { name: ‘ParentEmployeeKey’ }
    },
    id: ‘EmployeeKey’,
    url: ’employeesadv.csv’
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    // create Tree Grid
    $(“#treeGrid”).jqxTreeGrid(
    {

    width: 850,
    source: dataAdapter,
    pageable: true,
    columnsResize: true,
    sortable: true,
    filterable: true,
    filterMode: ‘simple’,

    pagerMode: ‘advanced’,
    pageSizeMode: ‘root’,
    pageSize: 10,

    theme: ‘energyblue’,

    pageSizeOptions: [‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’, ‘8’, ‘9’, ’10’],

    ready: function()
    {
    $(“#treeGrid”).jqxTreeGrid(‘expandRow’, 32);
    },
    columns: [
    { text: ‘FirstName’, dataField: ‘FirstName’, pinned: true, minWidth: 100, width: 200 },
    { text: ‘LastName’, dataField: ‘LastName’, width: 200 },
    { text: ‘Department Name’, dataField: ‘DepartmentName’, width: 150 },
    { text: ‘Title’, dataField: ‘Title’, width: 300 },
    { text: ‘Birth Date’, dataField: ‘BirthDate’, cellsFormat: ‘d’, width: 120 },
    { text: ‘Hire Date’, dataField: ‘HireDate’, cellsFormat: ‘d’, width: 120 },
    { text: ‘Phone’, dataField: ‘Phone’, cellsFormat: ‘d’, width: 120 }
    ]
    });

    $(‘#Expandbutton’).click(function () {
    $(“#treeGrid”).jqxTreeGrid(‘expandAll’)
    });

    $(‘#Collapsebutton’).click(function () {
    $(“#treeGrid”).jqxTreeGrid(‘collapseAll’)
    });

    // Export data
    //$(“#excelExport”).jqxButton();
    $(“#excelExport”).click(function () {
    $(“#treeGrid”).jqxTreeGrid(‘expandAll’)
    //var rows = $(“#treeGrid”).jqxTreeGrid(‘getRows’);
    // for (var i = 0; i < rows.length; i++) {
    // var key = $(“#treeGrid”).jqxTreeGrid(‘getKey’, rows[i]);
    // $(“#treeGrid”).jqxTreeGrid(‘expandRow’, key);
    // }
    $(“#treeGrid”).jqxTreeGrid(‘exportData’, ‘xls’);
    $(“#treeGrid”).jqxTreeGrid(‘collapseAll’)
    $(“#treeGrid”).jqxTreeGrid(‘expandRow’, 32);
    });

    });

    </script>
    </head>
    <body class=’default’>
    <div id=”treeGrid”>
    </div>

    <table>

    <tr>
    <td>
    <input type=”button” value=”Export to Excel” id=’excelExport’ style=”cursor:pointer;” class=”jqx-rc-all jqx-button jqx-widget jqx-fill-state-normal” />
    </td>
    <td>
    <input type=”button” style=”margin: 10px; cursor:pointer;” id=”Collapsebutton” value=”Collapse all items” class=”jqx-rc-all jqx-button jqx-widget jqx-fill-state-normal” />
    </td>
    <td>
    <input type=”button” style=”margin: 10px; cursor:pointer;” id=”Expandbutton” value=”Expand all items” class=”jqx-rc-all jqx-button jqx-widget jqx-fill-state-normal” />
    </td>
    </tr>

    </table>

    </body>
    </html>

    August 3, 2015 at 7:43 am Search Field #74417

    Dimitar
    Participant

    Hi Lulu,

    What you experience is the default behaviour of jqxTreeGrid – the search would return a child item only if it is a searched item, too (i.e. if David has a child David). Otherwise, child items are not displayed. This behaviour cannot be altered.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.