Jqxdropdownlist with knockout

[arashmoeenMember]

Hi,

I’m using jqwidget 2.4.2 with knockoutjs and here’s the code I’m using:

<script type="text/javascript">
    
    function createElements(theme)
    {
        $('#jqxDD-UserTypes').jqxDropDownList({
            source: sourceGenerator(userViewModel.relatedObjs.UserTypes()),
            displayMember: "Description",
            valueMember: "Code",
            width: '100',
            height: '20',
            theme: theme
        });
    }
    var userViewModel = {};
    $(document).ready(function () {
        var theme = getTheme();
        userViewModel.relatedObjs = ko.mapping.fromJSON('@Html.Raw(ViewBag.userRelatedObjects)');
        ko.applyBindings(userViewModel);
        
        createElements(theme);
    });
    var sourceGenerator = function (relatedObjectArr) {
        if (arguments.length != 1) {
            throw new Error("sourceGenerator constructor called with " + arguments.length + " arguments, but expected exactly 1.");
        }
        var sourceObj =
            {
                localdata: relatedObjectArr,
                datatype: "local"
            };
        return new $.jqx.dataAdapter(sourceObj);
    }
</script>
<div id="jqxDD-UserTypes"></div>

my problem is that after using ko.mapping to do the mapping from my viewbag, those Code & Description will become an observable which means they will become functions, and my dropdownlist works fine except the part that it shows functions for display member instead of calling it. is there anyway to make the dropdownlist to call the function as its display member ?

Thanks

[Peter StoevKeymaster]

Hi,

For using DropDownList with KO, please look at our DropDownList sample here: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxknockout/dropdownlist.htm?web. The sample binds the widget to an observableArray.

Best Regards,
Peter Stoev

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

[corydeppenMember]

Is it possible to initialize the dropdownlist in JS and still take advantage of the Knockout binding? Configuring the dropdownlist inside the data-bind attribute could get ugly very quickly if you have more than a few properties/events/methods being set.

[Peter StoevKeymaster]

Hi corydeppen,

To bind the DropDownList, you can use jqxDataAdapter and its type could be set to “observablearray”. There is such Grid demo in the Knockout samples. When you bind the DropDownList to observable array, you will take advantage of the Knockout add,remove and update capabilities.

Best Regards,
Peter Stoev

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

[Author]

Posts