jQWidgets Forums

This topic contains 3 replies, has 2 voices, and was last updated by anseltim 12 years, 12 months ago.

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

Author

Multiple DropDownLists in Popup editor Posts

June 21, 2012 at 8:42 pm Multiple DropDownLists in Popup editor #5215

Member

I need to call 5 web services to get JSON data for dropdownlist selection. I have a few questions on how to implement this using the least amount of resources.

1. How can I can the web service only once and store each dropdownlist data source locally?

2. How do I bind these data sources to an element in a popup window for editing a record? I am able to bind the data well doing a single cell edit with the example here:

{ text: 'Substrate', columntype: 'dropdownlist', datafield: 'substrate', width: 100, initeditor: function (row, cellvalue, editor) { editor.jqxDropDownList({ source: dataAdapterSubstrate, displayMember: 'name', valueMember: 'id'}); } },

Example of my code to get one of the dropdownlist source data

var dropDownListSourceSubstrate = { datatype : "json", datafields : [ {name : 'name'} ], id : 'id', url : urlSubstrate, async: false };

var dataAdapterSubstrate = new $.jqx.dataAdapter( dropDownListSourceSubstrate, { autoBind : true, async : false });

Any assistance would be greatly appreciated.

Thanks,

Tim

June 22, 2012 at 11:23 am Multiple DropDownLists in Popup editor #5235

Peter Stoev

Keymaster

Hi Tim,

You can make a call to a webservice via a jqxDataAdapter. Then when the data is loaded, you can create additional instances of the jqxDataAdapter and load them with data coming from the jqxDataAdapter that made the call to the service. The new data adapters can be used for loading the DropDownLists and the Grid.

For example:

<!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.7.2.min.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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = '';
            var url = "../sampledata/customers.txt";
            // prepare the data
            var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'CompanyName' },
                        { name: 'ContactName' }
                    ],
                    id: 'id',
                    url: url,
                    async: false
                };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // perform binding.
            dataAdapter.dataBind();
            // get loaded records and update the source object.
            var records = dataAdapter.records;
            source.url = "";
            source.localdata = records;
            var dataAdapter1 = new $.jqx.dataAdapter(source);
            $("#companyName").jqxDropDownList({ selectedIndex: 0, source: dataAdapter1, displayMember: "CompanyName", width: 200, height: 25, theme: theme });
            var dataAdapter2 = new $.jqx.dataAdapter(source);
            $("#contactName").jqxDropDownList({ selectedIndex: 0, source: dataAdapter2, displayMember: "ContactName", width: 200, height: 25, theme: theme });
            $("#quantity").jqxNumberInput({ width: 150, height: 23, theme: theme, decimalDigits: 0, spinButtons: true });
            $("#price").jqxNumberInput({ width: 150, height: 23, theme: theme, spinButtons: true });
            var dataAdapter3 = new $.jqx.dataAdapter(source);
            var editrow = -1;
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter3,
                theme: theme,
                pageable: true,
                autoheight: true,
                columns: [
                  { text: 'Company Name', datafield: 'CompanyName', width: 250 },
                  { text: 'Contact Name', datafield: 'ContactName', width: 250 },
                 { text: 'Edit', datafield: 'Edit', columntype: 'button', cellsrenderer: function () {
                     return "Edit";
                 }, buttonclick: function (row) {
                     // open the popup window when the user clicks a button.
                     editrow = row;
                     var offset = $("#jqxgrid").offset();
                     $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} });
                     // get the clicked row's data
                     var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
                     // to do - update the dropdownlists indexes depending on the edited row.
                     // show the popup window.
                     $("#popupWindow").jqxWindow('show');
                 }
                 },
                ]
            });
            // initialize the popup window and buttons.
            $("#popupWindow").jqxWindow({ width: 350, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01 });
            $("#Cancel").jqxButton({ theme: theme });
            $("#Save").jqxButton({ theme: theme });
            // update the edited row when the user clicks the 'Save' button.
            $("#Save").click(function () {
                if (editrow >= 0) {
                    var row = { firstname: $("#firstName").val(), lastname: $("#lastName").val(), productname: $("#product").val(),
                        quantity: parseInt($("#quantity").jqxNumberInput('decimal')), price: parseFloat($("#price").jqxNumberInput('decimal'))
                    };
                    $('#jqxgrid').jqxGrid('updaterow', editrow, row);
                    $("#popupWindow").jqxWindow('hide');
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
       <div id="popupWindow">
            <div>Edit</div>
            <div style="overflow: hidden;">
                <table>
                    <tr>
                        <td align="right">Company Name:</td>
                        <td align="left"><div id="companyName"></div></td>
                    </tr>
                    <tr>
                        <td align="right">Contact Name:</td>
                        <td align="left"><div id="contactName"></div></td>
                    </tr>
                    <tr>
                        <td align="right"></td>
                        <td style="padding-top: 10px;" align="right"><input style="margin-right: 5px;" type="button" id="Save" value="Save" /><input id="Cancel" type="button" value="Cancel" /></td>
                    </tr>
                </table>
            </div>
       </div>
    </div>
</body>
</html>

Hope this helps.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

June 22, 2012 at 3:43 pm Multiple DropDownLists in Popup editor #5243

anseltim

Member

Thank you, Peter – that worked great.

I have another question. In the popup window for editing a row from the data grid, how do I set the selected value of the dropdownlist to what is in the grid?

Thanks again!

Tim

June 22, 2012 at 6:54 pm Multiple DropDownLists in Popup editor #5245

anseltim

Member

Ok – I solved the selected value issue – I wrote a little javascript function that returns the selected index by passing in the datasource and grid field value.

// Function to get the selected index for dropdownlist from grid value var getSelectedIndex = function(source, value) { var selectedIndex = - 1; for (var i = 0; i < source.totalrecords; i++) { if (source.records[i].name == value){ selectedIndex = i; break; } } return (selectedIndex); };

And call it like this:

$("#customer").jqxDropDownList({ selectedIndex: getSelectedIndex(dataAdapterCustomer, dataRecord.customer), source: dataAdapterCustomer, displayMember: "name", width: 200, height: 25, theme: theme });

Thanks,

Tim

Author

Posts

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

You must be logged in to reply to this topic.