Dgrid + Selection Issue -
still trying work dgrid (0.4) , dojo (1.10), have issue selection.
my web page contain dialog opened when click on button. inside dialog, have following code display grid data coming database through json http page. working fine, sorting , query filtering.
what want know allow user double click on row, selected row id contains in first column update form in main page. use dgrid/selection this. however, return last row of grid instead of 1 user selected.
the selection code based on : http://dgrid.io/tutorials/0.4/hello_dgrid/
any idea?
thanks
<script language="javascript"> require ( [ "dojo/_base/declare", "dojo/_base/array", "dgrid/ondemandlist", "dgrid/ondemandgrid", "dgrid/keyboard", "dgrid/selection", "dgrid/editor", "dgrid/extensions/columnhider", "dstore/memory", "dstore/requestmemory", "dojo/_base/lang", "dojo/dom-construct", "dojo/dom", "dojo/on", "dojo/when", "dojo/query", "dojo/store/observable", "dstore/rest", "dojo/_base/deferred", "dojo/store/cache", "dojo/domready!", ], function( declare, arrayutil, ondemandlist, ondemandgrid, keyboard, selection, editor, columnhider, memory, requestmemory, lang, objectstore, dom, on, when, query, observable, rest, deferred ){ var fform = dom.byid("filterform"); var contactcolumns = [ { label: "", field: "contact_id", hidden: true, unhidable: true}, { label: "company name", field: "company_name", unhidable: true }, { label: "contact name", field: "contact_name", unhidable: true }, { label: "email", field: "contact_email", unhidable: true } ]; var contactgrid=declare([ondemandgrid, keyboard, selection,columnhider]); var contactlist = new observable(new rest({ target: './ajax.contactsloader.php' })); var selection = []; window.contactgrid = new contactgrid( { classname: "dgrid-selectors", collection: contactlist, maxrowsperpage:10, selectionmode: 'single', cellnavigation: false, columns: contactcolumns }, "contacttable" ); on(fform, "submit", function (event) { var cpy_filter = fform.elements.fcompany_name.value; var ct_filter = fform.elements.fcontact_name.value; var email_filter = fform.elements.fcontact_email.value; contactgrid.set('collection',contactlist.filter({contact_name: ct_filter, company_name: cpy_filter, contact_email: email_filter })); contactgrid.refresh(); event.preventdefault(); }); contactgrid.on('dgrid-select', function (event) { // report item selected row console. console.log('row selected: ', event.rows[0].data); }); contactgrid.on('dgrid-deselect', function (event) { console.log('row de-selected: ', event.rows[0].data); }); contactgrid.on('.dgrid-row:click', function (event) { var row = contactgrid.row(event); console.log('row clicked:', row.data); }); } ); </script> <div class="dijitdialogpanecontentarea" style="width:96%;margin-left:5px"> <form id="filterform"> <div class="dijitdialogpaneactionbar" > <button data-dojo-type="dijit.form.button" type="submit">filter</button> <button data-dojo-type="dijit.form.button" data-dojo-attach-point="submitbutton" type="submit" > select </button> <button data-dojo-type="dijit.form.button" data-dojo-attach-point="cancelbutton" > close </button> </div> <div data-dojo-attach-point="contentnode" > <input type="text" data-dojo-type="dijit.form.textbox" name="fcompany_name" id="fcompany_name" style="width:33%"> <input type="text" data-dojo-type="dijit.form.textbox" name="fcontact_name" id="fcontact_name" style="width:32%"> <input type="text" data-dojo-type="dijit.form.textbox" name="fcontact_email" id="fcontact_email" style="width:33%"> <div id="contacttable"> </div> </div> </form> </div>
just found reason. columns need have 'id' column called id. change 'contact_id' column 'id' , works fine.
thanks
Comments
Post a Comment