jQWidgets Forums

Tagged: jqxListBox, listbox filtering, listbox group

This topic contains 4 replies, has 3 voices, and was last updated by Peter Stoev 10 years, 5 months ago.

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

Author

grouping of items failed Posts

July 9, 2014 at 9:42 am grouping of items failed #56912

Participant

Howdy and Servus from Bavaria,

I try to arrange my records in a grouped list. In my special case the items can have the same label but different values and groups.
The result should looks like this:

group1
item1
item2
item3
group2
item1
item2

but in reality the result is:

group2
item1
item2
item1
item2
group1
item3

now the code:


<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Test</title>
    <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="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.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/jqxlistbox.js"></script>

<script type="text/javascript">
<!--
$(document).ready(function () 
{
data=[{"value":"1","label":"item1","group":"group1"},{"value":"2","label":"item2","group":"group1"},{"value":"3","label":"item3","group":"group1"},{"value":"4","label":"item1","group":"group2"},{"value":"5","label":"item2","group":"group2"}];

var source =
	{
	datatype: "local",
	datafields: 
		[
		{ name: 'label' , type: 'string' },
		{ name: 'group' , type: 'string' },
		{ name: 'value' , type: 'string' },
		],
	id: 'value',
	localdata: data
	};
var dataAdapt = new $.jqx.dataAdapter(source);
dataAdapt.dataBind();
var records = dataAdapt.getRecordsHierarchy('label');
$('#jqxWidget').jqxListBox({ source: records});
})
//-->
</script>
</head>
<body>
    <div id='content'>
        <div id='jqxWidget'>
        </div>
    </div>
</body>
</html>

has anybody an idea where is my failure?

July 9, 2014 at 12:34 pm grouping of items failed #56919

Peter Stoev

Keymaster

Hi quietcry,

The solution can be found below:

<!DOCTYPE html>
<html lang="en">
<head>
    <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="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.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/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                data = [{ "value": "1", "label": "item1", "group": "group1" }, { "value": "2", "label": "item2", "group": "group1" }, { "value": "3", "label": "item3", "group": "group1" }, { "value": "4", "label": "item1", "group": "group2" }, { "value": "5", "label": "item2", "group": "group2" }];

                var source =
                    {
                        datatype: "local",
                        datafields:
                            [
                            { name: 'label', type: 'string' },
                            { name: 'group', type: 'string' },
                            { name: 'value', type: 'string' },
                            ],
                        id: 'value',
                        localdata: data
                    };
                var dataAdapt = new $.jqx.dataAdapter(source);
                dataAdapt.dataBind();
                $('#jqxWidget').jqxListBox({ source: dataAdapt.records });
            });
        </script>
        <div id='jqxWidget'>
        </div>
    </div>
</body>
</html>

You had to use the dataAdapt.records.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

July 9, 2014 at 1:31 pm grouping of items failed #56931

quietcry

Participant

Many thanks Peter,

it works.

January 9, 2015 at 12:31 pm grouping of items failed #65196

sadegh

Participant

Hi,
I am using the same method combined with jqxListBox Filtering, However, the filtering works well but the groups names remain in list, any solution to remove the empty groups from the list while filtering? a live example can be your website “API Reference” tab.

Regards,

January 9, 2015 at 2:00 pm grouping of items failed #65208

Peter Stoev

Keymaster

Hi sadegh,

The groups will not be removed, they will be empty but displayed. The filtering filters the ListBox items only.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.