javascript - JQWidgets jqxGrid with jqxDropDownList as editor -
could provide proper implementation method utilizing jqxdropdownlist checkboxes enabled grid column?
the following code modified jqwidgets grid demo code ‘cellediting.htm’.
i've implemented independent dropdownlist checkboxes no problems.
i've implemented grid dropdownlist (with out checkboxes) no problems.
however, put checkboxes: true in initeditor following error:
uncaught typeerror: cannot read property ‘instance’ of undefined jqxlistbox.js:7
in ‘more complicated’ scenarios, checkboxes property succeed ‘createeditor’, fail initeditor. leads me believe there asynchronous loading going on , im building editor quickly.
the following code fails because of ‘checkboxes: true’ property. remove , works great.
<head> <title id='description'>in order enter in edit mode, select grid cell , start typing, "click" or press "f2" key. can navigate through cells using keyboard arrows or "tab" , "shift + tab" key combinations. cancel cell editing, press "esc" key. save changes press "enter" key or select grid cell. pressing 'space' key when checkbox cell selected toggle 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 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 offer assistance?
extra help!! additionally, seems once select value in dropdown, actual ‘value’ gets changed display ‘label’. i.e., (“male” or “female”), in example, valid data sex field ‘m’ or ‘f’.
i've asked same question on jqwidgets official forums (here: http://www.jqwidgets.com/community/topic/dropdownlist-with-checkboxes-as-grid-column-editor/), , post answer send here if beat community it.
as far know, there no dropdownlist checkboxes editor in jqwidgets grid. if there such, think jqwidgets @ least have sample suppose cannot use dropdownlist in such way in jqxgrid widget.
Comments
Post a Comment