jQWidgets Forums

Tagged: Context Menu, deleteItem, getAllItems, getItem, items, jqxListBox, list, ListBox, source

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

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

Author

listbox get all items Posts

August 21, 2014 at 10:30 am listbox get all items #58616

mustafa

Participant

hello
How can I get all items ?
and
How do I find an object in the ListBox?

example :

jqlistbox id=”itemList”
item1
item2
item3

find itemList(item3)

and question

Can I delete an object like this? How do I show icon?

thank you
example

August 21, 2014 at 11:38 am listbox get all items #58622

Nadezhda

Participant

Hello mustafa,

1. You can use method ‘getItems’ to get all items. Here is the example: http://jsfiddle.net/jqwidgets/SDJqH/.
2. Find an object in ListBox by using this code example for 4th item:

var items = $("#jqxListBox").jqxListBox('getItems'); 
var fourthItem = items[3];

3. This feature is not supported but here is a workaround:

<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/jqxlistbox.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {

                var source = [
                    { html: "<div style='height: 20px; float: left;'><img width='16' height='16' style='float: left; margin-top: 2px; margin-right: 5px; cursor: pointer;' src='../../jqwidgets/styles/images/close.png' onclick='deleteItem(o)' /><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxNumberInput</span></div>", title: 'jqxNumberInput' },
                    { html: "<div style='height: 20px; float: left;'><img width='16' height='16' style='float: left; margin-top: 2px; margin-right: 5px; cursor: pointer;' src='../../jqwidgets/styles/images/close.png' onclick='deleteItem(1)' /><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxProgressBar</span></div>", title: 'jqxProgressBar' },
                    { html: "<div style='height: 20px; float: left;'><img width='16' height='16' style='float: left; margin-top: 2px; margin-right: 5px; cursor: pointer;' src='../../jqwidgets/styles/images/close.png' onclick='deleteItem(2)' /><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxCalendar</span></div>", title: 'jqxCalendar' }
                ];

                // Create a jqxListBox
                $("#jqxWidget").jqxListBox({ source: source, width: 200, height: 250 });
            });
        </script>
        <div id='jqxWidget'>
            <script type="text/javascript">
                function deleteItem(index) {
                    $("#jqxWidget").jqxListBox('removeAt', index);
                }
            </script>
        </div>
    </div>
</body>
</html>

Note that only selected items can be removed by clicking the close icon.

Best Regards,
Nadezhda

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

August 21, 2014 at 9:22 pm listbox get all items #58647

mustafa

Participant

hi nadezhda
thanks for the reply
but there is a problem !
How do I merge with the source files?

and I don’t want it to get fixed icon.. Does it run on mouse over?

      var source1 = [
                     { html: "<div style='height: 20px; float: left;'><img width='16' height='16' style='float: left; margin-top: 2px; margin-right: 5px; cursor: pointer;' src='/Content/img/Project/Delete.png' onclick='deleteItem(o)' /><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxNumberInput</span></div>", title: 'jqxNumberInput' },
                     { html: "<div style='height: 20px; float: left;'><img width='16' height='16' style='float: left; margin-top: 2px; margin-right: 5px; cursor: pointer;' src='/Content/img/Project/Delete.png' onclick='deleteItem(1)' /><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxProgressBar</span></div>", title: 'jqxProgressBar' },
                     { html: "<div style='height: 20px; float: left;'><img width='16' height='16' style='float: left; margin-top: 2px; margin-right: 5px; cursor: pointer;' src='/Content/img/Project/Delete.png' onclick='deleteItem(2)' /><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxCalendar</span></div>", title: 'jqxCalendar' }
                ];

                var source = {
 
                    datafields: [
                       { name: 'GroupName', type: 'string' },
                       { name: 'grp_ID', type: 'string' }
                    ],
                    localdata: result,
                };
                var Adapter = new $.jqx.dataAdapter(source, {
                    autoBind: true
                });
                $(".GroupList").jqxListBox({ source: source, displayMember: "GroupName", valueMember: "grp_ID", width: '200px', height: '250px', });

August 21, 2014 at 9:35 pm listbox get all items #58648

mustafa

Participant

thank you

August 22, 2014 at 6:11 am listbox get all items #58660

Nadezhda

Participant

Hello mustafa,

The ListBox can bind only to one source.

The requested functionality is not supported. The above example is workaround and we can not assist you on the matter any more.

Best Regards,
Nadezhda

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

August 22, 2014 at 7:35 am listbox get all items #58663

mustafa

Participant

hi
did you understandme me!
I do not want to add two sources
How can I add this here your html code?

  var source = {
 
                    datafields: [
                       { name: 'GroupName', type: 'string' },
                       { name: 'grp_ID', type: 'string' }
                    ],
                    localdata: result, >> returning data ( database )
                };
                var Adapter = new $.jqx.dataAdapter(source, {
                    autoBind: true

If it is not possible…
Or as in this example may be.(context menu)
Is it possible for this ListBox?
thank you

http://www.jqwidgets.com/jquery-tree-with-context-menu/

August 22, 2014 at 10:00 am listbox get all items #58668

Nadezhda

Participant

Hi mustafa,

If you have the following file (file.txt):

[
    {
        "GroupName": "<div style='height: 20px; float: left;'><img width='16' height='16' style='float: left; margin-top: 2px; margin-right: 5px; cursor: pointer;' src='../../jqwidgets/styles/images/close.png' onclick='deleteItem(0)' /><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxNumberInput</span></div>",
        "grp_ID": "1"
    },
    {
        "GroupName": "<div style='height: 20px; float: left;'><img width='16' height='16' style='float: left; margin-top: 2px; margin-right: 5px; cursor: pointer;' src='../../jqwidgets/styles/images/close.png' onclick='deleteItem(1)' /><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxProgressBar</span></div>",
        "grp_ID": "2"
    },
    {
        "GroupName": "<div style='height: 20px; float: left;'><img width='16' height='16' style='float: left; margin-top: 2px; margin-right: 5px; cursor: pointer;' src='../../jqwidgets/styles/images/close.png' onclick='deleteItem(2)' /><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxCalendar</span></div>",
        "grp_ID": "3"
    }
]

here is how to achieve the functionality:

<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/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/jqxlistbox.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {

                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'GroupName', type: 'string' },
                        { name: 'grp_ID', type: 'number' }
                    ],
                    id: 'grp_ID',
                    url: "source.txt"
                };
                var dataAdapter = new $.jqx.dataAdapter(source);

                // Create a jqxListBox
                $("#jqxWidget").jqxListBox({ source: dataAdapter, width: 200, height: 250, displayMember: "GroupName", valueMember: "grp_ID" });
            });
        </script>
        <div id='jqxWidget'>
            <script type="text/javascript">
                function deleteItem(index) {
                    $("#jqxWidget").jqxListBox('removeAt', index);
                }
            </script>
        </div>
    </div>
</body>
</html>

for context menu, please see these topics: Context menu on listbox with checkboxes and Listbox Context Menu.

Best Regards,
Nadezhda

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

Author

Posts

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

You must be logged in to reply to this topic.