jQWidgets Forums

jQuery UI Widgets Forums Lists DropDownList Drop Down List in Grid, make DD List dependent on another columns value

This topic contains 5 replies, has 4 voices, and was last updated by  cberube 11 years, 8 months ago.

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

  • DaveB
    Participant

    If I have two Drop Down columns in a grid, say Make and Model cars and if I have Toyota selected in row 1 and Ford selected in row two would it be possible to have the Make DD column show only Toyota cars in row 1 and Ford cars in row 2?


    Dimitar
    Participant

    Hello DaveB,

    Here is an example, based on the demo Customized Editors. Instead of make and model, here are used Ship Country and Ship City.

    <!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.8.3.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.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = getDemoTheme();
    // prepare the data
    var ordersSource =
    {
    datatype: "xml",
    datafields: [
    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' },
    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' },
    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' },
    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' }
    ],
    root: "entry",
    record: "content",
    id: 'm\\:properties>d\\:OrderID',
    url: "../sampledata/orders.xml",
    pager: function (pagenum, pagesize, oldpagenum) {
    // callback called when a page or page size is changed.
    },
    updaterow: function (rowid, rowdata, result) {
    // synchronize with the server - send update command
    // call result with parameter true if the synchronization with the server is successful
    // and with parameter false if the synchronization failder.
    result(true);
    }
    };
    var ordersAdapter = new $.jqx.dataAdapter(ordersSource);
    $("#jqxgrid").jqxGrid(
    {
    width: 670,
    source: ordersAdapter,
    theme: theme,
    selectionmode: 'singlecell',
    editable: true,
    pageable: true,
    autoheight: true,
    columns: [
    {
    text: 'Ship Country', datafield: 'ShipCountry', width: 150, columntype: 'dropdownlist',
    createeditor: function (row, column, editor) {
    // assign a new data source to the dropdownlist.
    var list = ['Germany', 'Brazil', 'France'];
    editor.jqxDropDownList({ source: list });
    },
    // update the editor's value before saving it.
    cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
    // return the old value, if the new value is empty.
    if (newvalue == "") return oldvalue;
    }
    },
    {
    text: 'Ship City', datafield: 'ShipCity', width: 150, columntype: 'combobox',
    initeditor: function (row, column, editor) {
    // assign a new data source to the combobox.
    var country = $('#jqxgrid').jqxGrid('getcellvalue', row, "ShipCountry");
    var list;
    switch (country) {
    case "Germany":
    list = ['Stuttgart', 'Berlin'];
    break;
    case "Brazil":
    list = ['Rio de Janeiro', 'Brasília'];
    break;
    case "France":
    list = ['Strasbourg', 'Bordeaux'];
    break;
    };
    editor.jqxComboBox({ source: list, promptText: "Please Choose:" });
    },
    // update the editor's value before saving it.
    cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
    // return the old value, if the new value is empty.
    if (newvalue == "") return oldvalue;
    }
    },
    { text: 'Ship Name', datafield: 'ShipName', columntype: 'combobox' }
    ]
    });
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
    <div id="jqxgrid">
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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


    tuthmosis
    Member

    Hello !

    Don’t know if it is just me but this demo doesn’t seam to be working…

    Changing the value of any DD doesn’t have any impact on the available options of the other two.

    Also, what i think DaveB’s original question was… If i select Toyota in column A, only toyota related models should be visible in the model DD of column B.

    I also need this abvious logic…

    Thanks !


    Dimitar
    Participant

    Hello tuthmosis,

    The answer to your question is found in the forum topic Need combobox or DD (Parent/Child).

    Best Regards,
    Dimitar

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


    cberube
    Member

    Looking for a way to bind to different lists. Do you have any examples on how to bind the value adapter into datafields: [].

    { name: ‘v1’, type: ‘string’, values: { source: ?.records, value: ‘value’, name: ‘label’ } },

    createeditor: function (row, value, editor) {
    if (row.empType = 0) {
    editor.jqxDropDownList({ source: empType1, displayMember: ‘label’, valueMember: ‘value’ });
    }
    else {
    editor.jqxDropDownList({ source: empType2, displayMember: ‘label’, valueMember: ‘value’ });
    }
    }

    Thanks,


    cberube
    Member

    What’s the best way to handle dropdownlist per row. Each row needs to bind to different values lists and it need to show the right label depending on the row type.

    var empType1val = [
    { value: 5, label: “E” },
    { value: 4, label: “K” },
    { value: 3, label: “S” },
    { value: 2, label: “N” },
    { value: 1, label: “U” }
    ];

    var empType2val = [
    { value: 3, label: “E” },
    { value: 2, label: “S” },
    { value: 1, label: “U” }
    ];

    // this only works per columns
    { name: ‘v1’, type: ‘string’, values: { source: empType1.records, value: ‘value’, name: ‘label’ } },

    text: ‘Customer First’, datafield: ‘v1’, width: ‘10%’, align: ‘center’, cellsalign: ‘center’, columntype: ‘dropdownlist’,
    createeditor: function (row, value, editor) {
    var EJC = $(‘#empGrid’).jqxGrid(‘getcellvalue’, row, “EJC”);
    if (prt.empType1.indexOf(EJC) != -1) {
    editor.jqxDropDownList({ source: empType1, displayMember: ‘label’, valueMember: ‘value’ });
    }
    else {
    editor.jqxDropDownList({ source: empType2, displayMember: ‘label’, valueMember: ‘value’ });
    }
    }

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

You must be logged in to reply to this topic.