Datatable doesn't refresh

sanderk

I have a page with a parent child table. However the child table doesn't refresh and the id is not passed to the child table editor. I cannot find the problem as there are no errors

JavaScript

$(document).ready(function () {
    var huurderEditor = new $.fn.dataTable.Editor({
        ajax: {
            url: "/Gebouwen/HuurdersTable",
            type: "POST",
            data: function (d) {
                d.GebouwID = currentGebouwID
            }
        },
        table: "#huurdersTable",
        fields: [{
            label: "Naam huurder:",
            name: "NaamHuurder"
        }, {
            label: "Huisnummer:",
            name: "Huisnummer"
        }, {
            label: "Startdatum contract:",
            name: "StartDatumContract",
            type: "datetime",
            format: 'DD-MM-YYYY'
        }, {
            label: "Einddatum contract:",
            name: "EindDatumContract",
            type: "datetime",
            format: 'DD-MM-YYYY'
        }, {
            label: "Opzegtermijn (in maanden):",
            name: "Opzegtermijn"
            }, {
                label: "Parkeerplaatsen:",
                name: "Parkeerplaatsen"
            }, {
                label: "Huur Verlengperiode:",
                name: "HuurVerlengperiode"
            }, {
                label: "Opmerkingen:",
                name: "Opmerkingen",
                type: "textarea"
            }, {
            label: "Aantal m2 VVO:",
            name: "AantalM2VVO"
        }, {
            label: "Aantal m2 BVO:",
            name: "AantalM2BVO"
        }
        ],
        i18n: {
            create: {
                button: "Nieuw",
                title: "Nieuwe invoer",
                submit: "Opslaan"
            },
            edit: {
                button: "Bewerken",
                title: "Bewerk record",
                submit: "Opslaan"
            },
            remove: {
                button: "Verwijder",
                title: "Verwijder",
                submit: "Verwijder",
                confirm: {
                    _: "Weet u zeker dat u %d records wilt verwijderen?",
                    1: "Weet u zeker dat u dit record wilt verwijderen?"
                }
            },
            error: {
                system: "Er is een systeemfout opgetreden. Neem aub contact op met de ontwikkelaar."
            },
            datetime: {
                previous: 'Vorige',
                next: 'Volgende',
                months: ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni', 'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December'],
                weekdays: ['Zo', 'Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za']
            }
        }
    });



    var huurderTable = $('#huurdersTable').DataTable({
        dom: "Bfrtip",
        ajax: {
            url: "/Gebouwen/HuurdersTable",
            type: "POST",
            data: function (d) {
                d.GebouwID = currentGebouwID
            }
        },
        serverSide: true,
        order: [[1, 'asc']],
        pageLength: 10,
        language: {
            url: '/json/datatables-dutch.json'
        },
        columns: [
            { data: "NaamHuurder" },
            { data: "Huisnummer" },
            { data: "StartDatumContract" },
            { data: "EindDatumContract" },
            { data: "Huurders.Opzegtermijn" },
            { data: "Huurders.Parkeerplaatsen" },
            { data: "Huurders.HuurVerlengperiode" },
            { data: "Huurders.AantalM2VVO" },
            { data: "Huurders.AantalM2BVO" },
            { data: "Huurders.Opmerkingen" }
        ],
        select: {
            style: 'single'
        },
        buttons: [
            { extend: "create", editor: huurderEditor },
            { extend: "edit", editor: huurderEditor },
            { extend: "remove", editor: huurderEditor }
        ]
    });
    huurderTable.buttons().container()
        .appendTo($('.col-md-6:eq(0)', huurderTable.table().container()));
    // #endregion

    // #region HuurdersExtraEigenschappen
    var huurderExtraEigenschappenEditor = new $.fn.dataTable.Editor({
        ajax: {
            url: "/Gebouwen/HuurderExtraEigenschappenTable",
            type: "POST",
            data: function (d) {
                var selectedHuurderrow = huurderTable.row({ selectedHuurderrow: true });
                if (selectedHuurderrow.any()) {
                    d.HuurderId = selectedHuurderrow.data().Huurders.id;
                }
            }
        },
        table: "#huurderExtraEigenschappenTable",
        fields: [{
            label: "Ingangsdatum:",
            name: "HuurderExtraEigenschappen.Ingangsdatum",
            type: "datetime",
            format: 'DD-MM-YYYY'
        }, {
            label: "Eigenschaptype:",
            name: "HuurderExtraEigenschappen.HuurderEigenschapTypeId",
            type: "select",
            placeholder: "Selecteer een eigenschaptype"
        }, {
            label: "Waarde:",
            name: "HuurderExtraEigenschappen.Waarde"
        }, {
            label: "Huurder:",
            name: "HuurderExtraEigenschappen.HuurderId",
            type: "select",
            placeholder: "Selecteer een huurder"
        }
        ],
        i18n: {
            create: {
                button: "Nieuw",
                title: "Nieuwe invoer",
                submit: "Opslaan"
            },
            edit: {
                button: "Bewerken",
                title: "Bewerk record",
                submit: "Opslaan"
            },
            remove: {
                button: "Verwijder",
                title: "Verwijder",
                submit: "Verwijder",
                confirm: {
                    _: "Weet u zeker dat u %d records wilt verwijderen?",
                    1: "Weet u zeker dat u dit record wilt verwijderen?"
                }
            },
            error: {
                system: "Er is een systeemfout opgetreden. Neem aub contact op met de ontwikkelaar."
            },
            datetime: {
                previous: 'Vorige',
                next: 'Volgende',
                months: ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni', 'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December'],
                weekdays: ['Zo', 'Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za']
            }
        }
    });


    var huurderExtraEigenschappenTable = $('#huurderExtraEigenschappenTable').DataTable({
        dom: "Bfrtip",
        ajax: {
            url: "/Gebouwen/HuurderExtraEigenschappenTable",
            type: "POST",
            data: function (d) {
                var selectedHuurderrow = huurderTable.row({ selectedHuurderrow: true });
                if (selectedHuurderrow.any()) {
                    d.HuurderId = selectedHuurderrow.data().Huurders.id
                }
            }
        },
        serverSide: true,
        order: [[1, 'asc']],
        pageLength: 10,
        language: {
            url: '/json/datatables-dutch.json'
        },
        columns: [
            { data: "HuurderExtraEigenschappen.Ingangsdatum" },
            { data: "HuurderEigenschapTypen.Naam" },
            { data: "HuurderExtraEigenschappen.Waarde" },
            { data: "Huurders.NaamHuurder" }
        ],
        select: [{
            style: 'single'
        }],

        buttons: [
            { extend: "create", editor: huurderExtraEigenschappenEditor },
            { extend: "edit", editor: huurderExtraEigenschappenEditor },
            { extend: "remove", editor: huurderExtraEigenschappenEditor }
        ]
    });
    huurderExtraEigenschappenTable.buttons().container()
        .appendTo($('.col-md-6:eq(0)', huurderExtraEigenschappenTable.table().container()));

    huurderTable.on('select', function (e) {
        huurderExtraEigenschappenTable.ajax.reload();

        huurderExtraEigenschappenEditor
            .field('HuurderExtraEigenschappen.HuurderId')
            .def(huurderTable.row({ selected: true }).data().id);
    });

    huurderTable.on('deselect', function () {
        huurderExtraEigenschappenTable.ajax.reload();
    });

    huurderExtraEigenschappenEditor.on('submitSuccess', function () {
        huurderTable.ajax.reload();
    });

    huurderEditor.on('submitSuccess', function () {
        huurderExtraEigenschappenTable.ajax.reload();
    });


});

sanderk

C#

[HttpGet]
        [HttpPost]
        public ActionResult HuurdersTable([FromForm]string GebouwID = "-1")
        {

            using (var db = new Database("azure", _configuration.GetConnectionString("DataContext")))
            {
                var editor = new Editor(db, "Huurders", "id")
                    .Model<HuurderViewModel>("Huurders")
                    .Field(new Field("NaamHuurder")
                        .Validator(Validation.NotEmpty(new ValidationOpts { Message = "De naam van de huurder is verplicht." }))
                     )
                    .Field(new Field("Huisnummer")
                        .Validator(Validation.NotEmpty(new ValidationOpts { Message = "Het huisnummer is verplicht." }))
                     )
                    .Field(new Field("StartDatumContract")
                        .Validator(Validation.NotEmpty(new ValidationOpts { Message = "Voer een geldige datum in." }))
                        .GetFormatter(Format.DateSqlToFormat("dd-MM-yyyy"))
                        .SetFormatter(Format.DateFormatToSql("dd-MM-yyyy"))
                     )
                    .Field(new Field("EindDatumContract")
                        .Validator(Validation.NotEmpty(new ValidationOpts { Message = "Voer een geldige datum in." }))
                        .GetFormatter(Format.DateSqlToFormat("dd-MM-yyyy"))
                        .SetFormatter(Format.DateFormatToSql("dd-MM-yyyy"))
                     )
                    .Field(new Field("Opzegtermijn")
                       .Validator(Validation.NotEmpty(new ValidationOpts { Message = "Voer een getal in." }))
                        .Validator(Validation.Numeric("nl-NL", new ValidationOpts { Message = "Voer een getail in." }))
                     )
                    .Field(new Field("AantalM2VVO")
                         .Validator(Validation.NotEmpty(new ValidationOpts { Message = "Voer een getal in." }))
                        .Validator(Validation.Numeric("nl-NL", new ValidationOpts { Message = "Voer een getail in." }))
                        .SetFormatter((val, data) => val.ToString().Replace(",", "."))
                        .GetFormatter((val, data) => val.ToString().Replace(".", ","))
                     )
                    .Field(new Field("AantalM2BVO")
                         .Validator(Validation.NotEmpty(new ValidationOpts { Message = "Voer een getal in." }))
                        .Validator(Validation.Numeric("nl-NL", new ValidationOpts { Message = "Voer een getail in." }))
                        .SetFormatter((val, data) => val.ToString().Replace(",", "."))
                        .GetFormatter((val, data) => val.ToString().Replace(".", ","))
                     )
                    .Field(new Field("GebouwId")
                        .SetValue(GebouwID)
                     )
                    .Where("GebouwId", GebouwID)
                    .MJoin(new MJoin("HuurderExtraEigenschappen")
                        .Link("Huurders.id", "HuurderExtraEigenschappen.HuurderId")
                        .Field(new Field("id"))
                    )
                    ;

                editor.PostCreate += (sender, e) => _LogChange(db, "Huurders", "create", e.Id, e.Values);
                editor.PostEdit += (sender, e) => _LogChange(db, "Huurders", "edit", e.Id, e.Values);
                editor.PostRemove += (sender, e) => _LogChange(db, "Huurders", "remove", e.Id, e.Values);

                var response = editor.Process(Request).Data();

                return Json(response);
            }
        }

        [HttpGet]
        [HttpPost]
        public ActionResult HuurderExtraEigenschappenTable([FromForm]string HuurderId = "-1")
        {

            using (var db = new Database("azure", _configuration.GetConnectionString("DataContext")))
            {
                var editor = new Editor(db, "HuurderExtraEigenschappen", "Id")
                    .Model<HuurderExtraEigenschapViewModel>("HuurderExtraEigenschappen")
                    .Model<HuurderViewModel>("Huurders")
                    .Model<HuurderEigenschapType>("HuurderEigenschapTypen")
                    .Field(new Field("HuurderExtraEigenschappen.Ingangsdatum")
                        .Validator(Validation.NotEmpty(new ValidationOpts { Message = "Voer een geldige datum in." }))
                        .GetFormatter(Format.DateSqlToFormat("dd-MM-yyyy"))
                        .SetFormatter(Format.DateFormatToSql("dd-MM-yyyy"))
                     )
                    .Field(new Field("HuurderExtraEigenschappen.Waarde")
                        .Validator(Validation.NotEmpty(new ValidationOpts { Message = "Voer een getal in." }))
                        .Validator(Validation.Numeric("nl-NL", new ValidationOpts { Message = "Voer een getal in." }))
                        .SetFormatter((val, data) => val.ToString().Replace(",", "."))
                        .GetFormatter((val, data) => val.ToString().Replace(".", ","))
                     )
                     .Field(new Field("HuurderExtraEigenschappen.HuurderId")
                        .Options(new Options()
                            .Table("Huurders")
                            .Value("id")
                            .Label("NaamHuurder")
                        )
                        .Validator(Validation.DbValues(new ValidationOpts { Empty = false }))
                    )
                     .Field(new Field("HuurderExtraEigenschappen.HuurderEigenschapTypeId")
                        .Options(new Options()
                            .Table("HuurderEigenschapTypen")
                            .Value("Id")
                            .Label("Naam")
                        )
                        .Validator(Validation.DbValues(new ValidationOpts { Empty = false }))
                    )
                    .LeftJoin("Huurders", "Huurders.id", "=", "HuurderExtraEigenschappen.HuurderId")
                    .LeftJoin("HuurderEigenschapTypen", "HuurderEigenschapTypen.Id", "=", "HuurderExtraEigenschappen.HuurderEigenschapTypeId")
                    .Where("HuurderId", HuurderId);

                editor.PostCreate += (sender, e) => _LogChange(db, "HuurderExtraEigenschappen", "create", e.Id, e.Values);
                editor.PostEdit += (sender, e) => _LogChange(db, "HuurderExtraEigenschappen", "edit", e.Id, e.Values);
                editor.PostRemove += (sender, e) => _LogChange(db, "HuurderExtraEigenschappen", "remove", e.Id, e.Values);


                return Json(editor.Process(Request).Data());
            }
        }

allan

var selectedHuurderrow = huurderTable.row({ selectedHuurderrow: true });

that isn't going to work - selectedHuurderrow is not a selector modifier that DataTables will understand. Try:

var selectedHuurderrow = huurderTable.row({ selected: true });

Also, since you are using server-side processing, instead of:

huurderExtraEigenschappenTable.ajax.reload();

Use:

huurderExtraEigenschappenTable.draw();

If they don't resolve the issue, can you link to the page please.

Thanks,
Allan

sanderk

Hi,

Thank you so much.

It resolves almost everything. However,

The edit and remove buttons also don't work for the child table. I cannot select a row.

And

 huurderExtraEigenschappenEditor
            .field('HuurderExtraEigenschappen.HuurderId')
            .def(huurderTable.row({ selected: true }).data().id);
    });

Doesn't seem to work. The select menu doesn't have the right option selected when I press new

allan

I don't see anything in the code above that would cause the rows in the child row not to be selectable. Does the huurderExtraEigenschappenTable table exist in the document when that code is executed? I'm guessing so, since I don't see anything that is inserting it. If it doesn't though, then you need to call $.fn.DataTable.select.init(huurderExtraEigenschappenTable); since it needs to be in the document for Select to be automatically initialised.

If that doesn't help, I'd need a link to the page showing the issue to be able to help and debug it.

Thanks,
Allan

sanderk

The row in the child table was not selectable because of the [ ]

select: [{
            style: 'single'
        }],

should be

select: {
            style: 'single'
        },

allan

That would do it - well spotted.

Allan