Datatables as editor field

Datatables as editor field

ubdpetersubdpeters Posts: 26Questions: 8Answers: 0

This is probably pretty trivial, but I can't seem to figure this out.
I have a list of parts being displayed in a datatable. Each of those parts can have sub-parts associated with each of them. When the user selects one of the parts I would like the editor to list, in a datatable, the sub-parts associated with that part that they selected. Once the editor is open, they can add/edit/delete from that list of sub-parts.
Do I need to fill the datatable of sub-parts on the editor preOpen event?
Looking for the best solution.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,471Questions: 1Answers: 10,467 Site admin

    Do you mean like this?

    Allan

  • ubdpetersubdpeters Posts: 26Questions: 8Answers: 0

    Yes, kind of like that. I'll look at that example a little more.

  • ubdpetersubdpeters Posts: 26Questions: 8Answers: 0
    edited July 2021

    I looked at the example some more and understand how it's working.
    Is there a way to pass data to the ajax request for the datatable field in the editor? I only want to display specific items from a table. Not all items the example.
    If I have a part number: 1234 and items 1, 5, 10 are associated with it, I only want to display those items in the editor datatable. Not items 1 - 10.

    From nested.html:

                }, {
                    label: 'Site:',
                    name: 'users.site',
                    type: 'datatable',
                    editor: siteEditor,
                    optionsPair: {
                        value: 'id',
                    },
                    config: {
                        ajax: '../../controllers/sitesNested.php',
    ****Like this                     data: function(d) {
                                              d.Id = dataFromAnotherTable;
                                            },
                        buttons: [
                            { extend: 'create', editor: siteEditor },
                            { extend: 'edit',   editor: siteEditor },
                            { extend: 'remove', editor: siteEditor }
                        ],
                        columns: [
                            {
                                title: 'Name',
                                data: 'name'
                            },
                            {
                                title: 'Continent',
                                data: 'continent'
                            }
                        ]
                    }
                }
    

    Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

  • colincolin Posts: 15,240Questions: 1Answers: 2,599
    edited July 2021 Answer ✓

    You can access the main table still in that ajax.data function - so something like:

    $('#mainTable').DataTable().row('selected: true').data()
    

    which you can then pull out the field you're interested in and include like you are. Hope that helps,

    Colin

  • ubdpetersubdpeters Posts: 26Questions: 8Answers: 0

    I'm getting: Uncaught TypeError: Cannot read property 'DT_RowId' of undefined
    when I try using the ajax.data function.

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    We would need to see that. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • ubdpetersubdpeters Posts: 26Questions: 8Answers: 0

    I get the same error message if I add the ajax.data function to the example nested.html file.

            fields: [ {
                    label: 'First name:',
                    name: 'users.first_name'
                }, {
                    label: 'Last name:',
                    name: 'users.last_name'
                }, {
                    label: 'Phone #:',
                    name: 'users.phone'
                }, {
                    label: 'Site:',
                    name: 'users.site',
                    type: 'datatable',
                    editor: siteEditor,
                    optionsPair: {
                        value: 'id',
                    },
                    config: {
                        ajax: '../../controllers/sitesNested.php',
                        data: function(d) {
                            console.log("hello");
                        },
                        buttons: [
                            { extend: 'create', editor: siteEditor },
                            { extend: 'edit',   editor: siteEditor },
                            { extend: 'remove', editor: siteEditor }
                        ],
                        columns: [
                            {
                                title: 'Name',
                                data: 'name'
                            },
                            {
                                title: 'Continent',
                                data: 'continent'
                            }
                        ]
                    }
                }
    
  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395

    We would need to see that. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Sign In or Register to comment.