Setting Initial Item When Using JSON Data

[sheepsteakMember]

Hi

I’m loading my data from a JSON service using the jqxDataAdapter. I’m also using Knockout. I need to set an item upon loading the jqxComboBox. For example this will be the item the user has set in a previous session. I’m using a binding handler so I can setup the jqxComboBox:

    ko.bindingHandlers['combo'] = {
        'init': function (element, valueAccessor, allBindingsAccessor, viewModel) {
            var url = 'http://myurl.com/refData';

            var source = {
                datatype: "json",
                datafields: [
                    { name: 'objectIdRef' },
                    { name: 'displayText' }
                ],
                id: "objectIdRef",
                url: url
            };

            var dataAdapter = new $.jqx.dataAdapter(source);
            $(element).jqxComboBox(
            {
                width: "130px",
                height: "20px",
                dropDownWidth: 250,
                source: dataAdapter,
                displayMember: "displayText",
                valueMember: "objectIdRef",
                autocomplete: true
            });

            //handle the field changing
            ko.utils.registerEventHandler(element, "change", function () {
                var observable = valueAccessor();
                var v = $(element).jqxComboBox('getSelectedItem');
                observable.valueId(v.value);
                observable.valueText(v.label);
            });

            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                $(element).jqxComboBox("destroy");
            });

        },
        'update': function (element, valueAccessor, allBindingsAccessor, viewModel) {
            // make sure the model is correctly initialized.
            var observable = ko.utils.unwrapObservable(valueAccessor());       
        }
    };

How can I do this? I’ve tried using code I found on the jqxDropDownList forum:

            // get all items.
            var items = $(element).jqxComboBox("getItems");

            // find the index by searching for an item with specific value.
            var indexToSelect = -1;
            var valueToFind = observable.valueId();
            $.each(items, function (index) {
                if (this.value == valueToFind) {
                    indexToSelect = index;
                    return false;
                }
            });
            $(element).jqxComboBox({ selectedIndex: indexToSelect });

However, this doesn’t work as getItems is returning an empty array. I assume this is because the items haven’t been loaded yet. I’m sure the answer is really simple and I’ve managed to do this for the jqxNumberInput but I can’t find any examples in the documentation of how to do this.

[Peter StoevKeymaster]

Hi sheepsteak,

To ensure that the dataAdapter is filled with records and your data is downloaded, you can use the jqxDataAdapter’s loadComplete callback function.

            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function () {
                       // your code here.
                }
            }
            );

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts