jQuery UI Widgets Forums Grid Grid cell Edit columntype dropdownlist

This topic contains 7 replies, has 4 voices, and was last updated by  joel 9 years, 5 months ago.

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

  • goksel
    Member

    Hi, how url is called with different data to dropdownlist.

    Code Ex:

    $(“#jqxgrid”).jqxGrid(
    {
    width: 700,
    height: 350,
    selectionmode: ‘singlecell’,
    source: source,
    theme: theme,
    editable: true,
    columns: [
    { text: ‘EmployeeID’, editable: false, datafield: ‘EmployeeID’, width: 100 },
    { text: ‘First Name’, columntype: ‘text’, datafield: ‘FirstName’, width: 100 },
    { text: ‘Last Name’, columntype: ‘dropdownlist’, datafield: ‘LastName’, width: 100 },
    { text: ‘Title’, datafield: ‘Title’, width: 180 },
    { text: ‘Address’, datafield: ‘Address’, width: 180 },
    { text: ‘City’, datafield: ‘City’, width: 100 },
    { text: ‘Country’, datafield: ‘Country’,columntype: ‘dropdownlist’*, width: 140 }
    ]
    });

    For example,

    * url:’www.domain.com/countrylist.php’ or data:’dropdownlist.php?fieldname=Country’

    Thank you for your help.


    Peter Stoev
    Keymaster

    Hi goksel,

    You can use the ‘initeditor’ callback function to provide a new data source to the jqxDropDownList editor. The ‘initeditor’ function is called before the editor is shown. You can create another jqxDataAdapter instance associated to a different data source and use it as the jqxDropDownList’s data source.

    Take a look at the initialization of the jqxDropDownList editor and the dropDownListDataAdapter in the code below:

    <!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.1.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.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/jquery.global.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = getTheme();
    // prepare the data
    var data = generatedata(200);
    var source =
    {
    localdata: data,
    datatype: "array",
    updaterow: function (rowid, rowdata) {
    // synchronize with the server - send update command
    }
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    var url = "../sampledata/beverages.txt";
    // prepare the data
    var dropDownListSource =
    {
    datatype: "json",
    datafields: [
    { name: 'name' },
    { name: 'protein' }
    ],
    id: 'id',
    url: url
    };
    var dropdownListAdapter = new $.jqx.dataAdapter(dropDownListSource, { autoBind: true, async: false });
    var dropdownListSource = [];
    for (var i = 0; i < dropdownListAdapter.records.length; i++) {
    dropdownListSource[i] = dropdownListAdapter.records[i]['protein'];
    }
    // initialize jqxGrid
    $("#jqxgrid").jqxGrid(
    {
    width: 670,
    source: dataAdapter,
    editable: true,
    theme: theme,
    selectionmode: 'singlecell',
    columns: [
    { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90 },
    { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 90 },
    { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 177,
    initeditor: function (row, cellvalue, editor) {
    editor.jqxDropDownList({ source: dropdownListSource});
    }
    },
    { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67 },
    { text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 90, cellsalign: 'right', cellsformat: 'd',
    validation: function (cell, value) {
    var year = value.getFullYear();
    if (year >= 2013) {
    return { result: false, message: "Ship Date should be before 1/1/2013" };
    }
    return true;
    }
    },
    { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right', columntype: 'numberinput',
    validation: function (cell, value) {
    if (value < 0 || value > 150) {
    return { result: false, message: "Quantity should be in the 0-150 interval" };
    }
    return true;
    },
    initeditor: function (row, cellvalue, editor) {
    editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
    }
    },
    { text: 'Price', datafield: 'price', width: 65, cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput',
    validation: function (cell, value) {
    if (value < 0 || value > 15) {
    return { result: false, message: "Price should be in the 0-15 interval" };
    }
    return true;
    },
    initeditor: function (row, cellvalue, editor) {
    editor.jqxNumberInput({ digits: 3 });
    }
    }
    ]
    });
    });
    </script>
    </head>
    <body class='default'>
    <div id="jqxgrid"></div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    goksel
    Member

    Thank you very much Peter. It’s worked. 🙂

    Grid cell Edit columntype dropdownlist #3552

    ChrisJ
    Member

    Hi,
    Maybe it’s just me, but I think this has stopped working with V2.0. If I use the same file (basically the same as in your example above) it works with 1.9, but with 2.0 I get a blank dropdown list.

    Cheers
    Chris

    Grid cell Edit columntype dropdownlist #3553

    Peter Stoev
    Keymaster

    Hi Chris,

    It is not necessary to loop through the records to build a new data source and pass is to the DropDownList, It’s only necessary to pass the Data Adapter instance to the DropDownList.

    For example:

    var url = "../sampledata/beverages.txt";
    // prepare the data
    var dropDownListSource =
    {
    datatype: "json",
    datafields: [
    { name: 'name' },
    { name: 'protein' }
    ],
    id: 'id',
    url: url
    };
    var dropdownListAdapter = new $.jqx.dataAdapter(dropDownListSource, { autoBind: true, async: false });
    // initialize jqxGrid
    $("#jqxgrid").jqxGrid(
    {
    width: 670,
    source: dataAdapter,
    editable: true,
    theme: theme,
    selectionmode: 'singlecell',
    columns: [
    { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90 },
    { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 90 },
    { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 177,
    initeditor: function (row, cellvalue, editor) {
    editor.jqxDropDownList({ displayMember: 'protein', source: dropdownListAdapter });
    }
    },
    { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67 },
    { text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 90, cellsalign: 'right', cellsformat: 'd',
    validation: function (cell, value) {
    var year = value.getFullYear();
    if (year >= 2013) {
    return { result: false, message: "Ship Date should be before 1/1/2013" };
    }
    return true;
    }
    },
    { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right', columntype: 'numberinput',
    validation: function (cell, value) {
    if (value < 0 || value > 150) {
    return { result: false, message: "Quantity should be in the 0-150 interval" };
    }
    return true;
    },
    initeditor: function (row, cellvalue, editor) {
    editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
    }
    },
    { text: 'Price', datafield: 'price', width: 65, cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput',
    validation: function (cell, value) {
    if (value < 0 || value > 15) {
    return { result: false, message: "Price should be in the 0-15 interval" };
    }
    return true;
    },
    initeditor: function (row, cellvalue, editor) {
    editor.jqxNumberInput({ digits: 3 });
    }
    }
    ]
    });

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Grid cell Edit columntype dropdownlist #3583

    ChrisJ
    Member

    Hi Peter,
    Thanks for the reply. I’m running the same script as above, but instead of using a data adaptor, I’m initialising the dropdownListSource array statically. The rest is exactly the same. This works ok with jqWidgets 1.9, but when I changed to jqWidgets 2.0 it stopped working and I had a blank dropdown.

    Cheers
    Chris

    Grid cell Edit columntype dropdownlist #3587

    Peter Stoev
    Keymaster

    Hi Chris,

    I was able to reproduce the reported issue with version 2.0. As a temporary workaround, you can use the solution with the jqxDataAdapter.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Grid cell Edit columntype dropdownlist #75281

    joel
    Participant

    Hello,
    I have a very stupid question, because I am beginner with dropdownlist:
    How can I retrieve the “id” of the dropdqownlist, for example for the first row

    thank you for your help
    Joel

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

You must be logged in to reply to this topic.