getEditor returning null

[wolfnbasti]

We are trying to edit data that is loaded in an  edatagrid - this is how we are generating the grid - all data loads fine.

<table id="ClientData" title="Attributes" class="edatagrid" style="width:1200px;height:600px" toolbar="#toolbar" fitColumns="true" editable="true"></table>
<div id="toolbar">
<a href="etc...">New</a>
</div>

Javascript code:

            var attributeDefs;
            var resources;
            var resourceDef;
            var attributeValues;
            var attributeIds;

            $(function() {
                $.ajax({
                    url: '../rest/...../attributes',
                    type: "GET",
                }).done(function(data) {
                    attributeDefs = data.attributeDefs;
                    resourceDef = data.resourceDef;
                    resources = data.resources;
                    attributeValues = data.attributes.values;
                    attributeIds = data.attributes.ids;
                    var frozenColumns = [];
                    frozenColumns.push({
                        field: '0',
                        title: 'Name',
                        align: 'left',
                        width: 100,
                        resizable: true,
                  editable: true,
                        fixed: false
                    });
                    var columns = [];
                    columns.push({
                        field: '0',
                        title: 'Name',
                        align: 'left',
                        width: 100,
                        resizable: true,
                  editable: true,
                        fixed: false
                    });
               for (var i = 0; i < attributeDefs.length; i++) {
                        columns.push({
                            field: (i + 1).toString(),
                            title: attributeDefs.name,
                            align: 'left',
                            width: 100,
                            resizable: true,
                            fixed: false,
                     editable: true,
                        });
                    }
                    var rows = [];
                    for (var i = 0; i < resources.length; i++) {
                        var attributeObject = {'0' : resources.name};
                        for (var j = 0; j < attributeDefs.length; j++) {
                            attributeObject[(j + 1).toString()] = attributeValues[j];
                        }
                        rows.push(attributeObject);
                    }
                    $('#ClientData').edatagrid({
//                        frozenColumns: [frozenColumns],
                        columns: [columns],
                        data: rows,
                        editable: true,
                        fitColumns: true,
                        singleSelect: true,
                        nowrap: true,
                        striped: true,
                  onDblClickCell: function(index,field,value){
                     $(this).edatagrid('beginEdit', index);
                     var ed = $(this).edatagrid('getEditor', {index:index,field:field});
                     //$(ed.target).focus();
                     

window.alert('INDEX:' + index + ' FIELD:' + field );
                  }
                    });
                });
            });



When I click on a cell the window.alert lists the index and field numbers. However var ed is null, and thus ed.target is null as well. The grid also never makes the grid cell editable, either. It appears that getEditor is never interpreting the index and field.

Any ideas?

Thank you.

[stworthy]

To edit a datagrid, you must define the 'editor' property that will tell datagrid what editor should be used. If the 'editor' property is missing, nothing happens. Here is the example shows how to use the 'editor' property.

Code:

<table id="tt" style="width:600px;height:200px"
		title="Editable DataGrid"
		url="..."
		singleSelect="true">
	<thead>
		<tr>
			<th field="itemid" width="100" editor="{type:'validatebox',options:{required:true}}">Item ID</th>
			<th field="productid" width="100" editor="text">Product ID</th>
			<th field="listprice" width="100" align="right" editor="{type:'numberbox',options:{precision:1}}">List Price</th>
			<th field="unitcost" width="100" align="right" editor="numberbox">Unit Cost</th>
			<th field="attr1" width="150" editor="text">Attribute</th>
		</tr>
	</thead>
</table>

[wolfnbasti]

I understand your example, and have employed it in other features. But this datagrid is generated in javascript and passed to edatagrid essentially bypassing the <thead> <tr> <th field="... method. There must be a way to activate the editor when the table is generated with the javascript I copied earlier and only the following:

<table id="ClientData" title="Attributes" class="edatagrid" style="width:1200px;height:600px" toolbar="#toolbar" fitColumns="true" editable="true" ></table>

Thanks.

[stworthy]

Although you are using js code to create columns, you will have to set this 'editor' property to allow the editor component appears when editing a row.

Code:

columns.push({
    field: (i + 1).toString(),
    title: attributeDefs.name,
    align: 'left',
    width: 100,
    resizable: true,
    fixed: false,
    editor: ...
});