jQWidgets Forums

This topic contains 6 replies, has 2 voices, and was last updated by genachka 10 years, 9 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Show/Hide filter on button click Posts

July 9, 2014 at 1:27 am Show/Hide filter on button click #56901

Participant

I show an empty treegrid on browser page load. And based on action, I change the source URL dynamically and do a $(‘#mytreegrid’).jqxTreeGrid({source:dataAdapter}) to have it pull the data.

I wish to have the default filter hidden by default, but on button I put on treegrid toolbar toggle it’s show/hide.

I tried setting default treegrid init filterable: false and then calling $(‘#mytreegrid’).jqxTreeGrid({filterable: true}) but while it does open the area where the filter should be, the actual filter isn’t there. I tried also setting treegrid init filterable: true and filterHeight: 0 and then having button on toolbar set it to $(‘#mytreegrid’).jqxTreeGrid({filterHeight: 40}) when I wish to show it it works only on the initial load, if I do a $(‘#mytreegrid’).jqxTreeGrid({source:dataAdapter}) i’m back to the same issue where the toggle does show the space for the filter but not the filter.

on document ready I’m doing:

$("#mytreegrid").jqxTreeGrid(
        {
            columns: [
                { text: 'field1', dataField: 'samplefield1' },
                { text: 'field2', dataField: 'samplefield2' },
                { text: 'field3', dataField: 'samplefield3' },
                { text: 'field4', dataField: 'samplefield4' },
            ],
            editable: true,
            filterable: true,
            filterHeight: 0,
.
.
.

on action, I’m doing:

        var source = {
            dataType: "json",
            dataFields: [
                { name: 'samplefield1', type: 'string'},
                { name: 'samplefield2', type: 'string'},
                { name: 'samplefield3', type: 'string'},
                { name: 'samplefield4', type: 'string'},
            ],
            hierarchy: {
                        root: 'hier1'
                       },
            id: 'samplefield4',
            url: '/myurl/' + value.toString()
        };

        var dataAdapter = new $.jqx.dataAdapter(source);
        $('#mytreegrid').jqxTreeGrid({source:dataAdapter});

July 9, 2014 at 11:47 am Show/Hide filter on button click #56917

Peter Stoev

Keymaster

Hi genachka,

I don’t see a problem to dynamically show/hide the filter. Below is a working example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Data Filtering</title>
    <meta name="description" content="Filtering allows you to display a subset of the records in the data source that meet a particular criteria. When filtering is applied to a TreeGrid, displayed records are restricted to those that meet the current filter criteria. 
        You can filter data against single or multiple columns. End-users can apply filtering by selecting a column's value from the filter dropdown, typing a filter value into the search field and clicking the search button.">
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtreegrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../scripts/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: '../sampledata/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,
                ready: function () {
                    // expand row with 'EmployeeKey = 32'
                    $("#treeGrid").jqxTreeGrid('expandRow', 32);
                    $("#treeGrid").jqxTreeGrid('expandRow', 112);
                },
                columns: [
                  { text: 'FirstName', dataField: 'FirstName', 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 }
                ]
            });
            $("#ToggleFilter").click(function () {
                var filter = $("#treeGrid").jqxTreeGrid('filterable');
                $("#treeGrid").jqxTreeGrid('filterable', !filter);
            });
        });
    </script>
</head>
<body class='default'>
    <div id="treeGrid">
    </div>
    <button id="ToggleFilter">Toggle Filter</button>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

July 9, 2014 at 5:21 pm Show/Hide filter on button click #56941

genachka

Participant

I agree, this works as I mentioned as the source is set during document ready. But when source is set dynamically, it fails to then show the filter. Maybe the approach I am taking for doing it dynamically is wrong and/or not supported but I saw no way to on demand change the value of the url of the source. I need to set different parameters based on different criteria, and then force the treegrid to pull back data from that url on demand.

So if you were to use your exact example, but remove the source pieces from $(document).ready:

           // 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: '../sampledata/employeesadv.csv'
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

and also from the // create Tree Grid remove the source: dataAdapter

now to simulate the on demand action I referred to, create a button, where on click you are setting the source info that was removed above, i.e.

$('#mybutton').on('click', 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: '../sampledata/employeesadv.csv'
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            $('#treegrid').jqxTreeGrid({source:dataAdapter});

});

then I think you will see the behavior I am seeing as that is similar to what I’m doing. Except of course the URL part for me changes on demand.

July 9, 2014 at 6:04 pm Show/Hide filter on button click #56945

Peter Stoev

Keymaster

Hi genachka,

There is no code for setting the filtering dynamically in your posts. If you want to report some issue, then it would be helpful if you provide an example which demonstrates it. For that purpose, you can use jsfiddle.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

July 9, 2014 at 7:55 pm Show/Hide filter on button click #56955

genachka

Participant

Fair enough. Here’s the issue if I just try using filterable toggle: http://jsfiddle.net/Am2Qk/1

You’ll notice whether data is bound to it (by clicking on the simulate button) or not, when filterable toggle set to true, it expands the area for it, but there’s no filter.

From my testing it seems to be my dynamic re-association of the data source. Which I could do without, if there would be a way to just re-associate the URL value and have it refresh data when I do that. Is there a way?

July 9, 2014 at 9:03 pm Show/Hide filter on button click #56959

Peter Stoev

Keymaster

Ok, it there a problem to turn on the filterable when you create the widget and toggle its state after that?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

July 9, 2014 at 9:26 pm Show/Hide filter on button click #56963

genachka

Participant

Turning it on when widget is created takes extra space. Filter is nice feature but not everyone will use it. So don’t want to force it on and take the extra space. But since toolbar I’m using for more than just filter, putting a filter toggle button doesn’t take much space and would allow users to decide if they also want to take more space by having the filter on or off.

Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.