handling arrays of data in a single field

TieKei

Hey there,

I got a table cell 'items' which should contain several items. I like to let the user manipulate this set with the selectize plugin and write it back to the server.
I don't really know how to approach the editing part of it. I didn't find any example on how to handle multiple data sets in a single table-cell nor how to post the result back to my server.

I'm free in choosing a fitting data structure when talking to my server, so what's the best way to manipulate arrays of data?

An example:

{
"data": [{
    "DT_RowId": "row_1", 
    "items": [
        {"abbreviation": "test", "description": "my fancy test item"},
        {"abbreviation": "2", "description": "my other item"}
    ]
}],
"options": {
    "items": [
        {"label": "another item", "value": "3"},
        ...
    ]
}

My Editor and DataTable:

itemEditor = new $.fn.dataTable.Editor({
    ajax: "...",
    fields: [
        {name: "items", type: "selectize"}
    ]
});

$("#item-table").DataTable({
    ajax: "...",
    "columns": [
        {data: "items"}
   ]
});

I'm aware that I can use mData for rendering my items (e.g.: {mData: "items", "mRender": "[, ].description"}), but I don't know how or if that helps with editing the array.

allan

Hi,

This is a one-to-many type join is it, where you want to write multiple different values to different columns in the many table? This isn't really something that Editor supports at the moment - it is technically possible, but you would need one field on the client-side for each column in the many table, which is obviously quite messy. Thinking about it, I suppose you could have multiple selectize fields, one for each column, and hide all but one of them. Then when that visible one has its value changed, have the others match. But again, very messy and adding and deleting options could get quite contrived.

Editor's one-to-many option primarily assumes that the many table has already been setup else where and you just need a reference (i.e. a pkey) to it, so you would just be selecting from a list of options.

Sorry I don't have a better answer at the moment.

Regards,
Allan

TieKei

It took me a while, but now I'm able to deal with multiple selections in a table-cell with selectize. The data source is unchanged (see above).
my Editor got a new option for selectize maxItems: 99999 (which is a dirty workaround, but I don't know how to get rid of the maxItem restriction)
resulting in:

itemEditor = new $.fn.dataTable.Editor({
    ajax: "...",
    fields: [
        {name: "items", type: "selectize", opts: {maxItems: 99999} }
    ]
});

The form data, posted to the server, now looks like this:

action:edit
data[items][]: test
data[items][]: 2
id:row_1

I'm able to handle this in my backend.

My current problem: selectize doesn't know which data is already inside the table, so it's emtpy on edit initialization. I'm not sure how I should feed the data to selectize for multiple selections. Any hints on that? (I tried a comma-seperated list, which doesn't seem to work)

In another column I'm using the trick to feed only my display value to the data part, while having another data-source containing the actual value, which get's posted to my server) and use the options from my ajax source to combine these two (e.g. {data: "processtype_name", editField: "processtype"}). Unfortunately I can't do that on my items data-set, so I have to find another way to deal with this. Maybe by manipulating the data-source after it was loaded over ajax, if thats possible?

Or even better: an easier way to handle data which should be displayed differently from being saved to the server...

Thanks,
Tim

allan

I'm not sure how I should feed the data to selectize for multiple selections

I think if you pass in an array of values ([ 'test', 2 ] for example) selectize will select those options which the matching values. If you have an array data source, set the field's field.data option to match that.

Allan

TieKei

unfortunately I have no idea how to "pass" the array :)
fields.data brakes my inline editing, resulting in:

Uncaught Unable to automatically determine field from source. Please specify the field name

So I was playing around and was able to break my problem down to this:

I got this two fields, countries and programs, both using select2. countries has an easy data-source: a plain String (see below). For countries everything works fine.

programs however has a more complex source: it's an array of objects, which has a different name -> items

{
"data": [{
    "DT_RowId": "row_1",
    "country_name: "Germany",
    "items": [
        {"description": "two", "otherstuff": "foo"}
    ]
}]

Now I'm telling my DataTable do use items[].description as data-source (which is displayed correctly), and to use programs as editField. It actually uses the select2 of programs, but the select2 instance isn't aware of my data (e.g. nothing is selected).

What do I have to do, to make this work? To be frankly, I doesn't make sense to me why this isn't working equivalent to what I did with countries.

editor = new $.fn.dataTable.Editor({
    ajax: "...",
    fields: [
        {
            name: "programs",
            type: "select2",
            ipOpts: [
                        {label: "one", value: 1},
                        {label: "two", value: 2}
            ]
            data: ???
        }
        {
            name: "countries",
            type: "select2",
            ipOpts: [
                        {label: "United Kingdom", value: 1},
                        {label: "Germany", value: 2}
            ]
        }
    ]
});
$("#table").DataTable({
    ajax: "...",
    "columns": [
        {
            data: "items[].description",
            editField: "programs"
        },
        {
            data: "country_name",
            editField: "countries"
        }
    ]
});

Thanks,
Tim