Event before building the table

curamus

Hello,

is there an event that is triggered before the datatable/editor is build? I've got the following scenario:

I habe an editor that display some rows from the accounting. If there are no rows in the model, I add a default row to the model because the editor should always display at least one line with the current amount of the receipt. I set the ID to 0.

<table id="accouting" class="display curamusEditDataTable" cellspacing="0" width="100%">
    <thead>
        <tr role="row">
            <th></th>
            <th class="sorting">Net</th>
            <th class="sorting">Gros</th>
            <th class="sorting">ID</th>
        </tr>
    </thead>
    <tbody>
        @for (int indexAccouting = 0; indexAccouting < Model.Accouting.Count; indexAccouting ++)
        {
        <tr role="row">
            <td></td>
            <td>
                @Html.DisplayFor(modelItem => Model.Accouting[indexAccouting].Netto)
            </td>
            <td>
                @Html.DisplayFor(modelItem => Model.Accouting[indexAccouting].Brutto)
            </td>
            <td>
                @Html.DisplayFor(modelItem => Model.Accouting[indexAccouting].ID)
            </td>
        </tr>}
    </tbody>
</table>

Until up here it works fine. Trouble starts when I add a new row. The id of new row is something like 1234567890 and when I submit the form, the values of all rows arrive in the controller, but not the id of the new row. which produce an invalid modelstate.

Is there some sort of event that is triggered before the table is build, so I can check in js if the model is empty and create a row using ditor.create(false)...

I thing using that will genereate a valid id for the initial row and all following rows.

allan

I don't see your Javascript code for creating the DataTable, but could you not just add a condition before the $(...).DataTable(...); constructor?

Allan

curamus

Hi Allan,

here is the code.

var editor = new $.fn.dataTable.Editor({
        table: "#accounting",
        fields: [{
            "label": "Net:",
            "name": "net",
            "def": ""
        }, {
            "label": "Gross:",
            "name": "gross",
            "def": ""
        }
        ]
    });

$('#accouting').DataTable({
        dom: "Bfrtip",
        order: [[1, 'asc']],
        searching: false,
        paging: false,
        bInfo: false,
        responsive: true,
        language: {
            url: '/Home/DatatableLocalisation/'
        },        
        "initComplete": function () {
            $(this).show();
        },
        columns: [
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
            },
            {
                data: "net",
                render: $.fn.dataTable.render.number('.', ',', 2, '', " €"),
                defaultContent: '',
            },
            {
                data: "gross",
                render: $.fn.dataTable.render.number('.', ',', 2, '', " €"),
                defaultContent: '',
            },
            {
                data: "DT_RowId",
                visible: false,
                searchable: false,
                defaultContent: ''
            }
        ],
        select: {
            style: 'os',
            selector: 'td:first-child'
        },
        buttons: [
            { extend: "create", editor: editor},
            { extend: "remove", editor: editor },
        ]
    });

Is it possible to check the number of rows in this section?

        "initComplete": function () {
            $(this).show();
        },

It seems to be the perfect place. If there are no rows yet, I can use the editor to create the first row?!

allan

Yes you could do that. this.api().rows().length would tell you how many rows are in the loaded data. Then use create() if you need to.

Allan