First attempt at using the Editor and Bubble

GRGrayban

Hello all.... my first question as this is my first attempt to use the Editor. I have a DataTable populated from a Gridview and have also applied Grouping to the DataTable. My first attempt results in the bubble display on the far left of the web page.

Here is my JS stack:

    <script src="/Scripts/jquery-3.3.1.js" type="text/javascript"></script>
    <script src="/Scripts/umd/popper.min.js" type="text/javascript"></script>
    <script src="/Scripts/bootstrap.min.js" type="text/javascript"></script>
    <script src="/Scripts/DataTables/datatables.min.js" type="text/javascript"></script>
    <script src="/Scripts/DataTables/DataTables-1.10.16/js/dataTables.bootstrap4.js" type="text/javascript"></script>
    <script src="/Scripts/DataTables/Buttons-1.5.1/js/buttons.print.min.js" type="text/javascript"></script>
    <script src="/Scripts/DataTables/Buttons-1.5.1/js/dataTables.buttons.min.js" type="text/javascript"></script>
    <script src="/Scripts/DataTables/Buttons-1.5.1/js/buttons.colVis.min.js" type="text/javascript"></script>
    <script src="/Scripts/DataTables/Buttons-1.5.1/js/buttons.bootstrap4.min.js" type="text/javascript"></script>
    <script src="/Scripts/DataTables/RowGroup-1.0.2/js/dataTables.rowGroup.min.js" type="text/javascript"></script>
    <script src="/Scripts/DataTables/Select-1.2.5/js/dataTables.select.min.js" type="text/javascript"></script>
    <script src="/Scripts/DataTables/Editor-1.8.0/js/dataTables.editor.min.js" type="text/javascript"></script>
    <script src="/Scripts/DataTables/Editor-1.8.0/js/editor.bootstrap4.js" type="text/javascript"></script>

My beginning JS with the editor:

        var editor;
        $(document).ready(function () {
            editor = new $.fn.dataTable.Editor( {
                table: "#GridView1",
                fields: [ {
                        label: "Name:",
                        name: "Departments"
                    }, {
                        label: "First name:",
                        name: "FunctionName"
                    }, {
                        label: "Last name:",
                        name: "iSDefault"

                    }, {
                        label: "Manager:",
                        name: "Hourlyrate"
                    }
                ]
            } );

Columns under the DataTable Code:

                    columns: [

                        { data: "Departments" },

                        { data: "FunctionName" },

                        { data: "iSDefault" },

                        { data: "Hourlyrate" }

                    ],

I will, in the end, be wanting to write the changes back using the gridview and c# to update the database. I'm not using Ajax at this point to serialize the data. any help is appreciated. This is a .NET system version 4.7.1,

thx, Glen

colin

Hi @GRGrayban ,

I'm not too clear what the problem is here. Could you link to your page with steps on how to reproduce, or if that isn't possible, could you modify this test case here, please.

Cheers,

Colin

allan

My first attempt results in the bubble display on the far left of the web page.

My guess is that the Bootstrap CSS file hasn't been loaded. I don't see the stylesheets above so can't be sure though.

Allan