Editor changing array/object format on a dynamic table

eurosoll

Hi

I have a datasource which has an array as part of the data source.

An example of the JSON is:

{
    "data": [
        {
            "DT_RowId": 0,
            "PackageType": 1,
            "SalesPrice": "250",
            "Suppliers": [
                "Supplier 1",
                "Supplier 2"
            ],
            "Tariffs": [
                "1",
                "3"
            ],
            "CostPrices": [160,0],
            "IDs": [146,110]
        }
    ]
}

I am using the following script to add the columns and fields to the datatable/editor

    function constructTable(json,extraColumnsRequired) {
        
        //columns for DataTables
        var columns = [];

        columns[0] =    {targets: [0], data: "PackageType"};  
        columns[1] =    {targets: [8], data: "SalesPrice"};            
             
        $("#table").find('thead tr').html(     "<th>Package Type</th>"+
                                                    "<th>Std SP</th>");

        var columnIndex = 2;
        
        for (i = 0; i < extraColumnsRequired; i++) {
            columnIndex++
            columns[columnIndex] = {targets: [columnIndex], data: "CostPrices."+i, editField: "CostPrices."+i,
                                        render: function(data, type, row) {
                                            return displayAsMoney(parseInt(data)/100);
                                        }
                                    };
                $("#andysTable").find('thead tr').append(
                    "<th>"+json.data[0].Suppliers[i]+"<br/>"+json.data[0].Tariffs[i]+"</th>"
                );
        }

        for (i = 0; i < extraColumnsRequired; i++) {
            columnIndex++
            columns[columnIndex] = {targets: [columnIndex], data: "IDs."+i, "visible": false, "searchable": true};
                $("#andysTable").find('thead tr').append(
                    "<th>ID."+i+"</th>"
                );
        }
    
        //fields for Editor
        var fields = [];
        
        fields[0] =
            {
                label: "SalesPrice",
                name: "SalesPrice"
            };

        var fieldIndex = 0;

        for (i = 0; i < extraColumnsRequired; i++) {
            fieldIndex++

            fields[fieldIndex] =
                {
                    label: "CostPrices."+i,
                    name: "CostPrices."+i
                };
        }
    
        return [columns, fields];
    }

The table displays correctly.

However when I edit I am getting a few errors. The first is that sometimes the editor (I tried both popup and inline) does not know what column it is in and I get an error to define column names.

The second issue (and more important to me) is that on submit it changes the costPrices array to:

"CostPrices": ["0":160, "1":0],

I am not sure what I am doing wrong.

Any help would be very appreciated.

Thanks

Dov

allan

Hi Dov,

The issue here is that Editor's fields aren't designed to operate on individual array elements - Editor treats an array as a whole value, so ideally it would need to be a single field which can handle the multiple inputs. I'm afraid I don't currently have an example plug-in for that.

However, it might be possible to coax what you have into working. I would have thought that your editField would be all that was needed to let the inline editing work. Could you give me a link to a page that is showing that issue so I can see what is going wrong please?

"CostPrices": ["0":160, "1":0],

That isn't actually valid Javascript or JSON. Is it actually "CostPrices": {"0":160, "1":0},? If so, we could use preSubmit to convert the object to be an array.

Allan