jQWidgets Forums

Tagged: jQuery ListBox, Knockout, ListBox

This topic contains 6 replies, has 3 voices, and was last updated by chebizarro 11 years, 10 months ago.

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

Author

How to bind ListBox Selected Items Count? Posts

July 20, 2012 at 11:17 pm How to bind ListBox Selected Items Count? #6210

Member

I am testing a jqxListBox. I like to show the number of selected items under the ListBox. I am using Knockout, and created a view model:

function AppViewModel() {
this.sltCount = ko.observable(0);
}

I set the message div to bind as: div id=”msg” data-bind=”text: sltCount”.

I wonder how to bind the ListBox to this.sltCount. Can you give me an example?

Thanks,

July 21, 2012 at 4:57 am How to bind ListBox Selected Items Count? #6215

Peter Stoev

Keymaster

Hi fgaonet,

You can get the selected items by using the jqxListBox’s getSelectedItems method.

Example:

var selectedItemsCount = $("#jqxWidget").jqxListBox('getSelectedItems').length;

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

July 21, 2012 at 5:20 pm How to bind ListBox Selected Items Count? #6244

fgaonet

Member

Peter:

Thank you for your reply!

I did use jqxListBox(‘getSelectedItems’).length to get the selectedItemsCount. I wonder how to bind jqxListBox’s property to Knockout ViewModel’s property. Right now, I use the following code to do the binding:

window.vm = new AppViewModel();
ko.applyBindings(window.vm);
$(“#jqxListBox”).bind(‘select’, function(event) {
window.vm.sltCount($(“#jqxListBox”).jqxListBox(‘getSelectedItems’).length);

Is this the correct way?

In my application, I may need to change a jqxListBox’s property dynamically. For example, I need to bind jqxListBox.checkboxes to ViewModel’s “showBoxes” property. Is there any way like the following?

function AppViewModel() {
this.showBoxes = ko.observable(true);
}
$(“#jqxListBox”).jqxListBox({ data-bind=”checkboxes: showBoxes” });

Thank you in advance for your clear answer, either “yes” or “no” or “in road map” or any other workaround solutions. It all helpful for me to plan my development.

July 23, 2012 at 2:58 pm How to bind ListBox Selected Items Count? #6273

Peter Stoev

Keymaster

Hi fgaonet,

Here’s a working sample with jqxListBox and Knockout which shows how to bind to the selectedItemsCount and showBoxes:

<!DOCTYPE html>
<html lang="en">
<head>
     <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../scripts/knockout-2.1.0.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/jqxpanel.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>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript">
        (function ($, ko) {
            ko.jqwidgets = ko.jqwidgets || {};
            ko.jqwidgets.dataBinding = function (settings) {
                var me = this;
                var binding = {},
                name = settings.name;
                var updating = false;
                var updatingFromObservable = false;
                binding.init = function (element, valueAccessor, allBindingAccessor, viewModel) {
                    var unwrappedValue = ko.utils.unwrapObservable(valueAccessor());
                    var modelOptions = ko.toJS(unwrappedValue);
                    widget = $.data(element)[name].instance;
                    if (settings.events) {
                        $.each(settings.events, function () {
                            var eventName = this;
                            $(element).bind(eventName + '.' + element.id, function (event) {
                                if (!updatingFromObservable) {
                                    updating = true;
                                    var val = valueAccessor();
                                    var property = settings.getProperty(widget, event, eventName);
                                    if (val[property.name] && $.isFunction(val[property.name])) {
                                        val[property.name](property.value);
                                    }
                                    else if (val[property.name]) {
                                        valueAccessor(property.value);
                                    }
                                    updating = false;
                                }
                            });
                        });
                    }
                };
                binding.update = function (element, valueAccessor, allBindingAccessor, viewModel) {
                    var unwrappedValue = ko.utils.unwrapObservable(valueAccessor());
                    var modelOptions = ko.toJS(unwrappedValue);
                    widget = $.data(element)[name].instance;
                    if (updating)
                        return;
                    $.each(settings, function (name, value) {
                        if (modelOptions[name]) {
                            if (!updating) {
                                updatingFromObservable = true;
                                settings.setProperty(widget, name, widget[name], modelOptions[name]);
                                updatingFromObservable = false;
                            }
                        }
                    });
                };
                ko.bindingHandlers[settings.name] = binding;
            };
            ko.jqwidgets.dataBinding = new ko.jqwidgets.dataBinding({
                name: "jqxListBox",
                checkboxes: false,
                events: ['select'],
                selectedItemsCount: 0,
                getProperty: function (object, event, eventName) {
                    if (eventName == 'select') {
                        // update the selectedItemsCount when the selection is changed.
                        return { name: "selectedItemsCount", value: object.getSelectedItems().length };
                    }
                },
                setProperty: function (object, key, value, newValue) {
                    if (key == 'checkboxes') {
                        object.checkboxes = newValue;
                        object.refresh();
                    }
                }
            });
        } (jQuery, ko));
        $(document).ready(function () {
            var theme = getTheme();
            var data = [
                { name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
                { name: "Speedy Coyote", sales: 89, price: 190.00 },
                { name: "Furious Lizard", sales: 152, price: 25.00 },
                { name: "Indifferent Monkey", sales: 1, price: 99.95 },
                { name: "Brooding Dragon", sales: 0, price: 6350 },
                { name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
                { name: "Optimistic Snail", sales: 420, price: 1.50 }
            ];
            var viewModel = function (items) {
                this.items = ko.observableArray(items);
                this.showBoxes = ko.observable(true);
                this.sltCount = ko.observable(0);
            };
            var vm = new viewModel(data);
            // create listbox
            var source = {
                localdata: vm.items,
                datatype: 'local'
            }
            $("#listbox").jqxListBox({multiple: true, displayMember: 'name', width: 200, height: 200, theme: theme });
            ko.applyBindings(vm);
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#listbox").jqxListBox({ source: dataAdapter });
            $("#Button").jqxButton({ theme: theme });
            $("#Button").click(function () {
                alert("Value: " + vm.sltCount());
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div style='margin-top: 10px;'>
        <div data-bind="jqxListBox: {checkboxes: showBoxes, selectedItemsCount: sltCount}" style='margin-top: 3px;' id='listbox'>
        </div>
        <input type="button" value="Get Value" style="margin-top: 10px;" id="Button" />
    </div>
</body>
</html>

Hope this helps you.

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

October 1, 2013 at 7:06 am How to bind ListBox Selected Items Count? #29916

chebizarro

Member

Hi,
I am trying to replicate this behaviour in my web application but it seems that the above sample no longer works with the latest build of jQWidgets, jQuery or Knockout. This behaviour is quite crucial for my app, so I would appreciate some guidance.
Regards
Chris

October 1, 2013 at 8:11 am How to bind ListBox Selected Items Count? #29930

Peter Stoev

Keymaster

Hi Chris,

Example with Knockout is available online in our demos. You can check them out.

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

October 1, 2013 at 8:40 am How to bind ListBox Selected Items Count? #29945

chebizarro

Member

Hi Peter,

This demo is included in the download but isn’t visible in the online demos but it is accessible via http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxlistbox/knockoutjs.htm. Selecting a checkbox and the clicking on the button should give you an alert dialog with the the total number of selected listbox items, no? In the online demo and the one on my development server it always returns 0 no matter how many rows you have selected.

I basically need to bind the indexes of the selected items in the listbox to an observable array in my viewmodel. The above sample, were it to work, would give me the base for that. Similar samples such as demos/jqxdatetimeinput/knockoutjs.htm and demos/jqxmaskedinput/knockoutjs.htm seem to work as expected and I can see no discernible difference in the knockout binding code so I can only assume that:

a) Something has changed in the internal implementation of the Listbox widget or;
b) Something has changed in knockout or;
c) I’m totally missing something.

c is the most likely but I thought I’d ask anyway.
Cheers
Chris

Author

Posts

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

You must be logged in to reply to this topic.