jQWidgets Forums

jQuery UI Widgets Forums Grid jqxGrid with Dropdownlist checkboxes

This topic contains 5 replies, has 2 voices, and was last updated by  Peter Stoev 11 years, 3 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • jqxGrid with Dropdownlist checkboxes #52474

    Ridbark
    Participant

    Hello,

    I want to create add a dropdownlist to my grid but with multiple choice!
    This example show how to do it :
    But i need to compile this example with this one : . This example show how to create a dropdownlist with one value list and one key list.

    So, what i need is to create a dropdownlist with multiple choice with one list with choices saved in database and one other list which listed all choice possible … ?

    Best regards,
    Ridbark

    jqxGrid with Dropdownlist checkboxes #52477

    Peter Stoev
    Keymaster

    Hi Ridbark,

    Here’s a sample with DropDownList with multiple choices: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/cellcustomediting.htm?arctic
    The DropDownList’s displayMember and valueMember properties specify the Label and Value of each Item.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    jqxGrid with Dropdownlist checkboxes #52492

    Ridbark
    Participant

    Hi Peter,

    Thanks for your answer.
    But it’s not really what i need!
    I create a jsfiddle to show you what i need and what is wrong : jsfiddle example

    There are two list : “tomany” which have all possibilities (came from database, id and name associated) and there are “data” which have only ID (came from database too).
    In fact, i need that the “tomany” source list be use in dropdownlist : that is allright.
    But when i select one or more item and i finish the operation, there are only number and not the words associated to this ID in tomany list!

    Can you help me?

    Best regards,
    Ridbark

    jqxGrid with Dropdownlist checkboxes #52495

    Peter Stoev
    Keymaster

    Hi Ridbark,

    The problem is that your Grid’s source is missing the product names. The main source which you use to bind the Grid has only IDs. The only thing which you did is to update the DropDownList editor’s data source and it has Label and Value, but the Column does not.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    jqxGrid with Dropdownlist checkboxes #52496

    Ridbark
    Participant

    Hi Peter,

    Allright, so i add the name in my main source list. It’s allright when it starts, but it’s wrong after! Look : jsfiddle link

    Can you modify this jsfiddle and show me how to do, please?

    Best regards,
    Ridbark

    jqxGrid with Dropdownlist checkboxes #52503

    Peter Stoev
    Keymaster

    Hi Ridbark,

    Here’s a sample:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>This example illustrates the Grid filtering feature. Enter some data into the Filter Row.</title>
        <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="../../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>
        <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.filter.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $(document).ready(function () {
                    var tomany = {};
                    tomany["productname"] = [
                                { id: 1, name: "Black Tea" },
                                { id: 2, name: "Green Tea" },
                                { id: 3, name: "Caffe Espresso" },
                                { id: 4, name: "Doubleshot Espresso" },
                                { id: 5, name: "Caffe Latte" },
                                { id: 6, name: "White Chocolate Mocha" },
                                { id: 7, name: "Caramel Latte" },
                                { id: 8, name: "Caffe Americano" },
                                { id: 9, name: "Cappuccino" },
                                { id: 10, name: "Espresso Truffle" },
                                { id: 11, name: "Espresso con Panna" },
                                { id: 12, name: "Peppermint Mocha Twist" }];
                    var tomanySource =
                        {
                            datatype: "json",
                            datafields: [
                                { name: 'id', type: 'integer' },
                                { name: 'name', type: 'string' }
                            ],
                            localdata: tomany
                        };
                    var tomanyAdapter = new $.jqx.dataAdapter(tomanySource);
                    // prepare the data
                    var data = {
                        '0': { 'productid': [1], 'productname': ["Black Tea"] },
                        '1': { 'productid': [2, 10], 'productname': ["Green Tea", "Espresso Truffle"] }
                    };
                    var source =
                        {
                            localdata: data,
                            datatype: "array",
                            datafields:
                            [
                                {
                                    name: 'productid', type: 'string', value: 'productid',
                                    values: { source: tomanyAdapter.records, value: 'id', name: 'name' }
                                },
                                {
                                    name: 'productname', type: 'string', value: 'productid',
                                    values: { source: tomanyAdapter.records, value: 'id', name: 'name' }
                                }
                            ]
                        };
                    var dataAdapter = new $.jqx.dataAdapter(source);
                    dataAdapter.dataBind();
                    // initialize jqxGrid
              
                    $("#jqxgrid").jqxGrid(
                        {
                            width: 500,
                            source: dataAdapter,
                            editable: true,
                            selectionmode: 'singlecell',
                            columns: [
                                {
                                    text: 'Products', columntype: 'template', datafield: 'productid', displayfield: 'productname',
                                    createeditor: function (row, cellvalue, editor, cellText, width, height) {
                                        // construct the editor. 
                                        editor.jqxDropDownList({
                                            checkboxes: true, source: tomanyAdapter, width: '100%', displayMember: 'name', valueMember: 'id',
                                            selectionRenderer: function () {
                                                return "Please Choose:";
                                            }
                                        });
                                    },
                                    initeditor: function (row, cellvalue, editor, celltext, pressedkey) {
                                        // set the editor's current value. The callback is called each time the editor is displayed.
                                        var items = editor.jqxDropDownList('getItems');
                                        editor.jqxDropDownList('uncheckAll');
                                        if (cellvalue != undefined) {
                                            var values = cellvalue.split(/,\s*/);
                                            for (var j = 0; j < values.length; j++) {
                                                for (var i = 0; i < items.length; i++) {
                                                    if (items[i].value == values[j]) {
                                                        editor.jqxDropDownList('checkIndex', i);
                                                    }
                                                }
                                            }
                                        }
                                    },
                                    geteditorvalue: function (row, cellvalue, editor) {
                                        // return the editor's value.
                                        var checkedItems = editor.jqxDropDownList('getCheckedItems');
                                        var label = "";
                                        for (var i = 0; i < checkedItems.length; i++) {
                                            label += checkedItems[i].label;
                                            if (i < checkedItems.length - 1) label += ", ";
                                        }
    
                                        return { label: label, value: editor.val() }
                                    }
                                },
                            ]
                        });
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id="jqxgrid">
        </div>
        <input style="margin-top: 10px;" value="Remove Filter" id="clearfilteringbutton" type="button" />
    </body>
    </html>
    

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.