Dgrid + Selection Issue

Question

Still trying to work with Dgrid (0.4) and dojo (1.10), I have now another issue with the selection.

My web page contain a Dialog opened when you click on a button. Inside this dialog, we have the following code which display a grid with data coming from a database through a Json HTTP page. This is working fine, even sorting and query filtering.

What I want to do know is to allow the user to double click on a row, get the selected row Id contains in the first column to update the form in the main page. I use the dgrid/selection for this. However, it always return the last row of the grid instead of the one the user selected.

The selection code is based on this : 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 the item from the selected row to the 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>

Answer 1

Just found the reason. the columns need to have a 'id' column called ID. I just change the 'contact_id' column to 'id' and it works fine.

thanks