jQWidgets Forums

Tagged: DropDownList, javascript dropdownlist plugin, jquery dropdownlist plugin, jquery ui dropdownlist, jqwidgets dropdownlist plugin

This topic contains 7 replies, has 3 voices, and was last updated by vorgang 10 years, 5 months ago.

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

Author

Binding to local array containing objects with id + title Posts

April 14, 2014 at 1:10 am Binding to local array containing objects with id + title #53008

novascape

Participant

I’m trying to get a very basic example working, containing an array of objects where each object has an integer id and a string value, but not having much luck, can someone please point me in the right direction? Perhaps I’m overcomplicating this simple example:

var selectedId = 3; // the default id that should be selected on load

var data = [
{ id: 1, title: “One” },
{ id: 2, title: “Two” },
{ id: 3, title: “Three” },
{ id: 4, title: “Four” },
{ id: 5, title: “Five” }
];

var source =
{
localdata: data,
datatype: “array”,
datafields: [
{ name: ‘id’ },
{ name: ‘title’ }
],
};
var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();

$(“#dropdown”).jqxDropDownList(
{
theme: “metro”,
height: ’30px’,
source: dataAdapter,
valueMember: ‘id’,
displayMember: ‘title’
});

$(“#dropdown”).jqxDropDownList(‘selectItem’, selectedId ); // select the default value (using the integer id)

$(“#dropdown”).on(“select”, function (args) {
var item = args.item;
if (selectedId != item.value)
selectedId = item.value;
});

Thanks in advance

April 14, 2014 at 6:50 am Binding to local array containing objects with id + title #53018

Peter Stoev

Keymaster

Hi novascape,

Please, find below an updated and working version of your code:

<!DOCTYPE html>
<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/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/jqxdropdownlist.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var selectedId = 3; // the default id that should be selected on load

                var data = [
                { id: 1, title: "One" },
                { id: 2, title: "Two" },
                { id: 3, title: "Three" },
                { id: 4, title: "Four" },
                { id: 5, title: "Five" }
                ];

                var source =
                {
                    localdata: data,
                    datatype: "array",
                    datafields: [
                    { name: 'id' },
                    { name: 'title' }
                    ]
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
            
                $("#dropdown").jqxDropDownList(
                {
                    theme: "metro",
                    height: '30px',
                    source: dataAdapter,
                    valueMember: 'id',
                    displayMember: 'title'
                });

                $("#dropdown").jqxDropDownList('selectItem', selectedId); // select the default value (using the integer id)

                $("#dropdown").on("select", function (event) {
                    // checks whether the event is raised by the web browser of by the widget.
                    if (!event.args) return;

                    var item = event.args.item;
                    if (selectedId != item.value) {
                        selectedId = item.value;
                        alert(selectedId);
                    }
                });
            });
        </script>
        <div id='dropdown'>
        </div>

    </div>
</body>
</html>

Hope this helps.

Best Regards,
Peter Stoev

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

April 14, 2014 at 9:46 am Binding to local array containing objects with id + title #53038

novascape

Participant

Thanks Peter, your example works great.

However, I’m trying to get this to work in LightSwitch and everything works except this line:

$(“#dropdown”).jqxDropDownList(‘selectItem’, selectedId);

When selectedIs is null everything works fine, but when selectedId has a valid value it gives me a “TypeError: undefined is not a function”. The weird part is that the ‘selectIndex’ method works fine, so the problem is specific to the ‘selectItem’ method.

This seems to be an issue with LightSwitch somehow interfering. I’ve also tried a setTimeout() function bu to no avail.

Can you think of any possible reason why this would happen or is there any other way to set the default value outside of using ‘selectItem’?

Thanks in advance

April 14, 2014 at 10:08 am Binding to local array containing objects with id + title #53042

Peter Stoev

Keymaster

Hi novascape,

Did you try my sample? There the “selectItem” works fine. If you experience an issue with it, then you could provide a sample which demonstrates it.

Best Regards,
Peter Stoev

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

April 14, 2014 at 10:37 pm Binding to local array containing objects with id + title #53065

novascape

Participant

Hi Peter,

Yes I did try your example and it works fine by itself, but the “selectItem” will not work in LightSwitch for some reason. The only other alternative I can think of is to look up the index of the contentItem.value in the data array and to use the ‘selectIndex’ method, which I have confirmed works. However, that is obviously not as nice.

Here is the code:

myapp.SessionEditor.Test_render = function (element, contentItem) {

    var data = [
        { id: 1, title: "One" },
        { id: 2, title: "Two" },
        { id: 3, title: "Three" },
        { id: 4, title: "Four" }
    ];

    var source =
               {
                   localdata: data,
                   datatype: "array",
                   datafields: [
                       { name: 'id' },
                       { name: 'title' }
                   ],
               };
    var dataAdapter = new $.jqx.dataAdapter(source);
    
    var control = $("<div />");
    control.appendTo($(element));
    control.jqxDropDownList(
    {
        theme: "metro",
        height: '30px',
        source: dataAdapter,
        valueMember: 'id',
        displayMember: 'title',
    });
	
    // the next line causes the error:
    control.jqxDropDownList('selectItem', contentItem.value);

    control.on("select", function (event) {
        if (!event.args) return;
        var item = event.args.item;
        if (contentItem.value != item.value) {
            contentItem.value = item.value;
        }
    });
    
};

April 15, 2014 at 3:45 am Binding to local array containing objects with id + title #53067

Peter Stoev

Keymaster

Hi novascape,

What kind of object is contentItem? Is it an object loaded through jqxDataAdapter or an object from your Data Source i.e if contentItem is an object with id and title fields, may be the code should be: control.jqxDropDownList(‘selectItem’, contentItem.id); instead of control.jqxDropDownList(‘selectItem’, contentItem.value);

Best Regards,
Peter Stoev

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

April 15, 2014 at 4:18 am Binding to local array containing objects with id + title #53068

novascape

Participant

contentItem is a complex LightSwitch-specific object. In this case we should just look at contentItem.value that is a nullable integer. The thing is, even if I just replace that line with control.jqxDropDownList(‘selectItem’, 2); it will still give the same error.

I have wrapped the rendering of the jqxDropDownList control into a library function where I pass the element, contentItem, data, displayValue and displayName so that I can render the dropdown simply by calling the following (which works perfectly):

myapp.SessionEditor.SessionType_render = function(element, contentItem) {
    var data = [
        { id: 0, title: "" },
        { id: 1, title: "One" },
        { id: 2, title: "Two" },
        { id: 3, title: "Three" },
        { id: 4, title: "Four" }
    ];
    lsjqw.renderDropDownList (element, contentItem, data, "id", "title");
};

The library function then looks like the following:

LightSwitchJqWidgets.prototype.renderDropDownList = function (element, contentItem, data, valueMember, displayMember) {

        var selectIndex = null;
        for (var i = 0; i < data.length; i++) {
            if (data[i][valueMember] == contentItem.value) {
                selectIndex = i;
                break;
            }
        };

        var source = {
            localdata: data,
            datatype: "array",
            datafields: [
                { name: valueMember },
                { name: displayMember }
            ],
        };
        var dataAdapter = new $.jqx.dataAdapter(source);

        var control = $("<div />");
        control.appendTo($(element));
        control.jqxDropDownList(
        {
            theme: me.theme,
            height: '30px',
            autoDropDownHeight: true,
            source: dataAdapter,
            valueMember: valueMember,
            displayMember: displayMember,
        });
        control.jqxDropDownList('selectIndex', selectIndex);

        control.on("select", function (event) {
            // checks whether the event is raised by the web browser of by the widget.
            if (!event.args) return;
            var item = event.args.item;
            if (contentItem.value != item.value) {
                contentItem.value = item.value;
                console.log("jqxDropDownList", contentItem.value);
            }
        });
    };

And this all works correctly. It would still be interesting to know why the ‘selectItem’ should not work while the ‘selectIndex’ does.

January 5, 2015 at 11:52 pm Binding to local array containing objects with id + title #64985

vorgang

Participant

Hi novascape,

I’ve been programming with LS (Silverlight) for a while and want to use the HTML version.

Are you still using JQWidgets? Does it work well?

Thanks,
Dave

Author

Posts

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

You must be logged in to reply to this topic.