W2UI Grid Inline Edit with Data Source

Question

I'm using version 1.4.1 of w2ui Grid. I'm trying to do an inline edit whilst loading data from the server using the urls property.

$(function () {
    $('#grid').w2grid({ 
        name: 'grid',
        // begin block that causes grid to be uneditable 
        // url: {
        //    get    : '<?php echo site_url('sections')?>/all',
        //    save   : '<?php echo site_url('sections')?>/save'
        // },
        // end block that causes grid to be eneditable
        show: { 
            toolbar: true,
            footer: true,
            toolbarSave: true,
            toolbarEdit: true
        },
        columns: [  
                  { 
                      field: 'code', 
                      caption: 'Code', 
                      size: '120px', 
                      sortable: true, 
                      resizable: true, 
                      editable: { 
                          type: 'text' 
                      }
                  }
                   ],
         // this records array can be removed once the urls are added back
         records: [
             { recid: 1, code: '100' }
         ]

    });    
});

If I uncomment the "url" block, the "code" field on the grid is no longer editable on double click. If I remove it, it is. Does anyone have a working example of loading data dynamically from the server while also allowing for inline editing?

ANSWER As described below, my return structure was incorrect. I am using CodeIgniter (CI) on the back end and my controller method looks like:

public function all() {
    $data = $this->myModel->findAll ();
    $gridData = new W2GridData ( $data );
    echo $gridData->toJson();  //important to put "echo" here and not "return"
}

where the findAll() method in my model class is:

    function findAll() {
        $query = $this->db->get ( TABLE_NAME );
        return $query->result ();
    }

and my utility class for wrapping a CI db result is now:

<?php
class W2GridData {
    var $total = "-1";
    var $records = "-1";
    function __construct($items) {
        $this->records = $items;
        $this->total = count ( $this->records );
    }
    function toJson() {
        $strValue = json_encode ( $this );
        return str_replace ( "\"id\":", "\"recid\":", $strValue );  // this line was missing
    }
}

As you can see, I was returning "id" straight from the db, and not translating it to w2ui's preferred "recid", thus the grid was not rendering correctly.

Answer 1

I took your code exactly how it is, uncommented url and removed records. Also, I linked it to a static JSON file (should be no different if you link it to php that returns JSON). However, after the grid was populated from the server, the inline editing was working just fine. I used 1.4.1 version. My best guess is that either (1) you have a javascript error in the console, or (2) you server does not return proper structure. Here is my JSON file:

{
  "total": "3",
  "records": [{
     "recid": 1,
     "code": "Some"
  }, {
     "recid": 2,
     "code": "Another"
  }, {
     "recid": 3,
     "code": "More"
  }]
}

Answer 2

My easy way, add the property recid : 'id'

$('#grid').w2grid({ 
    name: 'grid',
    recid : 'id'
  });