jQuery UI Widgets Forums Lists DropDownList DropDownList with Checkboxes as Grid Column Editor

This topic contains 5 replies, has 2 voices, and was last updated by  nograde 11 years ago.

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

  • nograde
    Member

    Could someone provide the proper implementation method for utilizing the jqxDropDownList with checkboxes enabled as a grid column?

    The following code is modified from the grid demo code ‘cellediting.htm’.

    I’ve implemented an independent dropdownlist with checkboxes with no problems.

    I’ve implemented a grid with dropdownlist (with out checkboxes) with no problems.

    however, as soon as i put checkboxes: true in the initeditor i get the following error:

    Uncaught TypeError: Cannot read property ‘instance’ of undefined jqxlistbox.js:7
    a.extend._renderItems jqxlistbox.js:7
    a.extend.clearSelection jqxlistbox.js:7
    a.extend.propertyChangedHandler jqxlistbox.js:7
    a.jqx.setvalueraiseevent jqxcore.js:7
    (anonymous function) jqxcore.js:7
    v.extend.each jquery-1.8.3.min.js:2
    a.jqx.set jqxcore.js:7
    a.jqx.jqxWidgetProxy jqxcore.js:7
    (anonymous function) jqxcore.js:7
    v.extend.each jquery-1.8.3.min.js:2
    v.fn.v.each jquery-1.8.3.min.js:2
    a.fn.(anonymous function) jqxcore.js:7
    a.extend.propertyChangedHandler jqxdropdownlist.js:7
    a.jqx.setvalueraiseevent jqxcore.js:7
    (anonymous function) jqxcore.js:7
    v.extend.each jquery-1.8.3.min.js:2
    a.jqx.set jqxcore.js:7
    a.jqx.jqxWidgetProxy jqxcore.js:7
    (anonymous function) jqxcore.js:7
    v.extend.each jquery-1.8.3.min.js:2
    v.fn.v.each jquery-1.8.3.min.js:2
    a.fn.(anonymous function) jqxcore.js:7
    $.jqxGrid.columns.initeditor cellediting.htm:85
    a.extend._showcelleditor jqxgrid.edit.js:7
    b.extend._rendercell jqxgrid.js:7
    b.extend._rendervisualcell jqxgrid.js:7
    b.extend._rendervisualrows jqxgrid.js:7
    k jqxgrid.js:7
    b.extend._renderrows jqxgrid.js:7
    a.extend.begincelledit jqxgrid.edit.js:7
    b.extend._handlemousedown jqxgrid.js:7
    (anonymous function) jqxgrid.js:7
    v.event.dispatch jquery-1.8.3.min.js:2
    o.handle.u jquery-1.8.3.min.js:2

    In certain ‘more complicated’ scenarios, the checkboxes property will succeed with ‘createeditor’, but fail with initeditor.
    This leads me to believe there is probably some asynchronous loading going on and im building the editor too quickly.

    The following code fails because of the ‘checkboxes: true’ property. remove that and it works great.

    <head>
    <title id='Description'>In order to enter in edit mode, select a grid cell and start typing, "Click" or press the "F2" key. You
    can also navigate through the cells using the keyboard arrows or with the "Tab" and "Shift + Tab" key combinations. To cancel the cell editing, press the "Esc" key. To save
    the changes press the "Enter" key or select another Grid cell. Pressing the 'Space' key when a checkbox cell is selected will toggle the check state.</title>
    <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.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.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/globalize.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 () {
    // prepare the data
    var data =
    [
    { firstname: 'joe', lastname: 'smith', sex: 'm' },
    { firstname: 'john', lastname: 'doe', sex: 'm' },
    { firstname: 'jane', lastname: 'doe', sex: 'f' }
    ];
    var source =
    {
    localdata: data,
    datatype: "array",
    updaterow: function (rowid, rowdata, commit) {
    commit(true);
    },
    datafields:
    [
    { name: 'firstname', type: 'string' },
    { name: 'lastname', type: 'string' },
    { name: 'sex', type: 'string' }
    ]
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    // initialize jqxGrid
    $("#jqxgrid").jqxGrid(
    {
    width: 685,
    source: dataAdapter,
    editable: true,
    selectionmode: 'multiplecellsadvanced',
    columns: [
    { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 80 },
    { text: 'Last Name', columntype: 'textbox', datafield: 'lastname', width: 80 },
    { text: 'Sex', columntype: 'dropdownlist', datafield: 'sex', width: 195,
    createeditor: function(row, cellvalue, editor)
    {
    var mydata =
    [
    { value: "m", label: "Male" },
    { value: "f", label: "Female" }
    ];
    var mysource =
    {
    datatype: "array",
    datafields:
    [
    { name: 'label', type: 'string' },
    { name: 'value', type: 'string' }
    ],
    localdata: mydata
    };
    var myadapter = new $.jqx.dataAdapter(mysource, { autoBind: true });
    editor.jqxDropDownList({ checkboxes: true, source: myadapter, displayMember: 'label', valueMember: 'value' });
    }
    }
    ]
    });
    // events
    $("#jqxgrid").on('cellbeginedit', function (event) {
    var args = event.args;
    $("#cellbegineditevent").text("Event Type: cellbeginedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
    });
    $("#jqxgrid").on('cellendedit', function (event) {
    var args = event.args;
    $("#cellendeditevent").text("Event Type: cellendedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
    });
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxWidget'>
    <div id="jqxgrid"></div>
    <div style="font-size: 12px; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif; margin-top: 30px;">
    <div id="cellbegineditevent"></div>
    <div style="margin-top: 10px;" id="cellendeditevent"></div>
    </div>
    </div>
    </body>
    </html>

    Can anyone offer assistance?

    Extra help!!
    Additionally, it seems like once i select a value in the dropdown, the actual ‘value’ gets changed to the display ‘label’. i.e., (“Male” or “Female”), but in this example, the only valid data for the sex field would be ‘m’ or ‘f’.


    Peter Stoev
    Keymaster

    Hi,

    Unfortunately, It is not possible to use jqxDropDownList with CheckBoxes as cell editor in jqxGrid. There is no such built-in logic in the Grid’s DropDownList Editor as present.

    Best Regards,
    Peter Stoev

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


    nograde
    Member

    Thanks for the quick reply!

    What about the possibility of setting editable to false.

    then using a custom cellrenderer to display a manually created jqxDropDownList?

    I need to use a grid as well as a compound field. What are my options?

    Basically, we use a field to display a set of flags, the ultimate value stored is computed.

    eg
    Professions
    [] None
    [x] Merchant
    [] Weaponsmith
    [x] Armorer
    [x] Tailor

    the stored value would be “mat”


    Peter Stoev
    Keymaster

    Hi,

    If you want to disable editing of a column, then you can set its “editable” field to false.

    In general, there is currently no possibility to display a set of flags in an editor. We still have not implemented such editor in the Grid. The cellsrenderer would not be an option because it can be used only for overriding the cells text and displaying custom HTML in the cell. Unfortunately, I cannot suggest you a workaround for your scenario.

    We will consider extending the DropDownList Grid editor for the next release(will be available in the first half of June) and add support for checkboxes. I created a new work item about that.

    Best Regards,
    Peter Stoev

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


    nograde
    Member

    thanks Peter.
    cheers.


    nograde
    Member

    It might be helpful to make a note in the documentation about the limited functionality of the jqxDropDownList as a grid editor. 🙂

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

You must be logged in to reply to this topic.