Is it possible to source from object?

[JazzParticipant]

Hopefully a simple question. I can set the source parameter as an array no problem. But is it possible to set the source parameter as an object and have the keys as the value and values as the labels?

If so, how do I do it?

Right now, I’m using a custom renderer to do this, but it relied on Object.keys() which is not available in IE7/8.

Thanks,

Jamie

[Peter StoevKeymaster]

Hi,

Please, take a look at that sample: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdropdownlist/bindingtojson.htm?web. It shows how to make the DropDownList to work with Label/Value pairs.

Best Regards,
Peter Stoev

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

[JazzParticipant]

It doesn’t, really.

What I was talking about was having something like this as the data source:

localdata = {
    "h1" : "Header 1",
    "h2" : "Header 2",
    "h3" : "Header 3",
    "h4" : "Header 4",
    "h5" : "Header 5",
    "h6" : "Header 6",
    "p" : "Paragraph",
    "pre" : "Preformatted"
};

It appears that there’s no mechanism to handle this type of data source.

I have, however, figured out a relatively simple solution. For those looking for how to do the same:

$('#list').jqxDropDownList( {
    source : $.map(localdata, function(val, key){ return { label : val, value : key }; });
    displayMember : 'label',
    valueMember : 'value'
}

I believe the displayMember and valueMember parameters aren’t actually required as it seems that if they are ‘label’ and ‘value’ respectively, then they “just work”.

[AikidotzuParticipant]

Jazz:

The code doesn’t seem to work, or maybe I missed something, but none the less I was looking for the same functionality which can be achieved this way:

yourdata = [
{ label: “apples”, value: 1},
{ label: “bananas”, value: 2},
{ label: “cherries”, value:3}
];

source = { localdata: yourdata, datatype: “array” };

dataAdapter = new $.jqx.dataAdapter(source);

$(“#somelist”).jqxDropDownList({ source:dataAdapter, displayMember: “label”, valueMember: “value” });

You can generate yourlist any what your want — internally, or ajax, but as long as the structure is correct it should work.

Regards.

[mlemayParticipant]

I pulled my hair out for far too long looking for a solution to a related problem. No matter what I seemed to do with jqxDataAdapter I couldn’t get the drop down list to work. It would render with mouseover classes, but clicking it did nothing. My problem wound up being that I wasn’t properly including the required .js files (in my case jqxscrollbar.js). When I did, I could get away with (from a backbone.js view):

var types = [ { id: 6,name: ‘fred’ },{ id: 72,name: ‘wilma’ } ];
this.$(‘.types’).jqxDropDownList({
‘height’ : ’25px’
,’source’ : types
,’checkboxes’ : true
,’displayMember’ : ‘name’
,’valueMember’ : ‘id’
});

It’d be really nice if the dropdown list threw an exception if it needs to create a scrollbar but the scrollbar hasn’t been included.

[Peter StoevKeymaster]

Hi,

The thrown exceptions are usually displayed in your browser’s console log. However, if you are not sure which files are required, you can always take a look at the code of any of the available demos.

Best Regards,
Peter Stoev

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

[Author]

Posts