DropDownList with Checkboxes as Grid Column Editor - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: checkboxes, instance undefined, jqxDropDown

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

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

Author

DropDownList with Checkboxes as Grid Column Editor Posts

May 13, 2013 at 7:18 pm DropDownList with Checkboxes as Grid Column Editor #21075

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’.

May 13, 2013 at 7:36 pm DropDownList with Checkboxes as Grid Column Editor #21076

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/

May 13, 2013 at 8:11 pm DropDownList with Checkboxes as Grid Column Editor #21078

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”

May 13, 2013 at 9:04 pm DropDownList with Checkboxes as Grid Column Editor #21080

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/

May 13, 2013 at 9:55 pm DropDownList with Checkboxes as Grid Column Editor #21082

nograde

Member

thanks Peter.
cheers.

May 14, 2013 at 2:35 pm DropDownList with Checkboxes as Grid Column Editor #21136

nograde

Member

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

Author

Posts

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

You must be logged in to reply to this topic.