One DT, 2 editor forms

dynasoft · February 2020

Hi
The 1st editor form uses the standard create, edit and remove extensions but form #2 gets called from a custom button. DT and editor form #1 share the same Ajax method. Form #2 has a different Ajax method that should not refresh the DT as the data it handles is different background data the user can edit but not see directly via the DT. He needs to click the custom button to view and edit that data. The forms handle data across 2 different tables who share the same foreign key.

var editor2 = ModifyCustomerSubPackSNsAssociations_editor();

(DT code)

            buttons: [
                { extend: 'create', editor: editor1 },
                { extend: 'edit', editor: editor1 },
                { extend: 'remove', editor: editor1 },
                {
                    text: '@(lblo.lblAssociatedSNs)',
                    extend: 'edit', editor: editor2
                }
            ],

Code for ModifyCustomerSubPackSNsAssociations_editor:

    function ModifyCustomerSubPackSNsAssociations_editor() {

        var editor = new $.fn.dataTable.Editor({

            destroy: true,
            ajax: {
                url: '/CustomerSubsPacks/CRUDCustomerSubsPacksSNs/',
                data: function ( d ) {
                    return $.extend( {}, d, {
                        intContTpe: intContTpe1
                    } );
                },
                type: 'POST',
                async: true,
                cache: false
            },
            table: '#tblDataTable',
            fields: [
                {
                    label: '',
                    name: 'CustomerSubsPacksSNs.id'
                }, {
                    label: '@(lblo.lblServiceNumbers):',    //cdr formats and price lists don't show ticked when opening editor
                    name: 'CustomerSubsPacksSNs[].id',    //SNs
                    type: "checkbox"
                }
            ]
        });

        return editor;
    }

How do I reference editor2 correctly? The form opens but ajax method CRUDCustomerSubsPacksSNs never gets hit when form opens. Browser console does not throw any errors. Thanks.

dynasoft · February 2020

Clarification: the code for CRUDCustomerSubsPacksSNs loads a series of values from one table as a series of tick boxes and ticks some of these using values from another table. DT gets loaded via a different ajax method. How can I call the data from CRUDCustomerSubsPacksSNs when the DT code gets loaded on page display?

dynasoft · February 2020

Code for DT:

    function CRUDCustomerSubsPacks() {

        var editor1 = CRUDCustomerSubsPacks_editor();

        var editor2 = ModifyCustomerSubPackSNsAssociations_editor();

        var dataTable = $('#tblDataTable').DataTable( {

            destroy: true,
            order: [[0, 'desc']],
            columnDefs: [
                {
                    targets: 1,
                    data: null,
                    defaultContent: '',
                    orderable: false,
                    className: 'select-checkbox'
                }
            ],
            dom: 'Bfrtip',
            ajax: {
                url: '/CustomerSubsPacks/CRUDCustomerSubsPacks/',
                data: function ( d ) {
                    return $.extend( {}, d, {
                        intContTpe: intContTpe1
                    } );
                },
                type: 'GET',
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                async: true,
                cache: false
            },
            columns: [
                ...
            ],
            select: true,
            buttons: [
                { extend: 'create', editor: editor1 },
                { extend: 'edit', editor: editor1 },
                { extend: 'remove', editor: editor1 },
                {
                    text: '@(lblo.lblAssociatedSNs)',
                    extend: 'edit', editor: editor2
                }
            ]
        });

        editor2.on('open', function (e, mode, action) {

            if (action != 'remove') {
                editor2.hide('CustomerSubsPacksSNs.id');
            }
        });

    }

allan · February 2020

The code above actually looks spot on to me. Could you give me a link to the page question so I can take a look at it and trace through why the second Editor isn't submitting please?

Thanks,
Allan

dynasoft · February 2020

Hi

Thanks.

It is submitting when I click save but I need the form to be populated 1st with those values from that other table (CustomerVoiceCLI below) as a series of tick boxes.

The DT shows service charges and is loaded from ajax method CRUDCustomerSubsPacks. With the 2nd editor, the user can see what phone numbers are associated with the each service charge. The ajax method is CRUDCustomerSubsPacksSNs. The ticked values of numbers associated with the service charge come from table CustomerSubsPacksSNs. The tick boxes shows all numbers that can be associated with the service charge and get they values from CustomerSubsPacks CustomerVoiceCLI.

How can I get Editor to make a pass to the server just as I click the custom button so the tick boxes (CustomerVoiceCLI.CLI via CustomerVoiceCLI.id) and ticked values (CustomerSubsPacksSNs.SNID) are shown ?

Server code of CRUDCustomerSubsPacksSNs:

    public static DtResponse CRUDCustomerSubsPacksSNs(long intContTpe)
    {
        string strTp = string.Empty;
        Editor editor = null;

        try
        {
            HttpRequest formData = HttpContext.Current.Request;

            using (Database db = new Database(SetGetDbType2, SetGetDbConnection))
            {
                editor = new Editor(db, "CustomerSubsPacksSNs", "CustomerSubsPacksSNs.id")
                    .Model<SubsPacksDBModel.CustomerSubsPacksSNs>("CustomerSubsPacksSNs");
                editor.Field(new Field("CustomerSubsPacksSNs.id")
                    .Set(false)
                );


                //tentavive code below
                editor.MJoin(new MJoin("CustomerVoiceCLI")
                    .Model<CustomerSNsDBModel.CustomerVoiceCLI>()
                    .Name("CustomerSubsPacksSNs")
                    .Link("CustomerVoiceCLI.id", "CustomerSubsPacksSNs.SNID")
                    .Where(q =>
                        q.Where("CustomerVoiceCLI.CustID", lngContIdx, "=")
                    )
                    .Order("CustomerVoiceCLI.id ASC")
                    .Field(new Field("id")
                        .Options(new Options()
                            .Table("CustomerVoiceCLI")
                            .Value("id")
                            .Label("CLI")
                        )
                        .Set(false)
                    )
                    .Set(false)
                );

                editor.LeftJoin("CustomerSubsPacksSNs", "CustomerSubsPacks.id", "=", "CustomerSubsPacksSNs.SubPackID");
                editor.TryCatch(false);
                editor.Debug(true);
                editor.Process(formData);
            }
        }
        catch (Exception ex)
        {

        }
        return editor.Data();
    }

Many thanks Allan.

allan · February 2020

I've got a blog post for that . It's slightly different from what you are looking for, but similar enough that I think it it is relevant here - it makes a call to the server when the button is pressed and then triggers editing. In your case that would all be the same, but rather than refreshing the data in the table, use val() to set the value of fields based on the data you send back.

Allan

dynasoft · February 2020

Hi
Thanks but does this refresh the data for the DT or populate the 2nd editor? I think the latter. This bit:

How can I get Editor to make a pass to the server just as I click the custom button so the tick boxes (CustomerVoiceCLI.CLI via CustomerVoiceCLI.id) and ticked values (CustomerSubsPacksSNs.SNID) are shown ?

is on the 2nd editor. The pass Editor needs to make is to populate data on the 2nd editor form. Thanks.

allan · February 2020

Thanks but does this refresh the data for the DT or populate the 2nd editor?

It refreshes the data for the DT which is then used for the Editor.

How can I get Editor to make a pass to the server just as I click the custom button [...]

You wouldn't have Editor do that. Your custom button would need to call $.ajax() (or similar) to get the data you need. You can then populate the values into the DataTable, and trigger editing, or the other way around if you prefer.

Allan

dynasoft · February 2020

Hi

The data shown by the 2nd editor is different from that used by the 1st editor. The 1st editor is the one used for editing the data shown by the DT. The 2nd editor shows competely different data. The user selects a row in the DT and can edit the data in the DT using the 1st editor. Its like if the DT was showing data for oranges, their sizes and weights. The 1st editor enables you to modify these values but via the 2nd editor the data shown is for (eg) something completely different like when these oranges were ordered (w/ fields like order date, employee,...).The 2nd editor would need to show lists of employees, date field for order date,...The 1st editor shows fields for weight, size of oranges,...Its just an example.

In my case the 1st editor shows service charges, cost of charge,...This is listed in the DT. But the 2nd editor shows phone numebrs linked to each service charge.

"It refreshes the data for the DT which is then used for the Editor."

The 2nd editor should not refresh the DT. The user selects a line and the 2nd editor opens via a cstom button with all the user's phone numbers and they select phone numbers linked w/ each service charge that was clicked. The DT does not list phone numbers but service charges. Thanks.

allan · February 2020

Okay - I'm with you now. Thanks for the clarification.

The second Editor - does it write to a different database table? With its own id column? If so, is that a simple left join it is doing, or is it a one-to-many relationship?

If it is just one-to-one or even all in a single db row, then you could just load all of the data needed into the host table and selectively show the fields in each of the Editor instances like here.

Allan

dynasoft · February 2020

Hi

Thanks.

"The second Editor - does it write to a different database table?" Yes

"With its own id column?" Yes

"If so, is that a simple left join it is doing, or is it a one-to-many relationship?" The latter.

"You could just load all of the data needed into the host table and selectively show the fields in each of the Editor instances like here." The data to show on the 2nd editor is not the same as that shown on the DT and not the same data but showing different columns. It's taken from an entirely different db table. That table has a foreign key which corresponds to the phone numbers in the db table used for the DT.
I'm still not clear how I can make a pass to the server to show the underlining data (from a different table than the db table used for the DT) the user can select (those customer phone numbers). Thanks.

dynasoft · February 2020

I will try and see if I can simply iterate through these phone numbers via checkboxes and an opts: and source property in the editor using a razor c# list. Then the user clicks the phone numbers he wants and saves the selection. This is then sent to the server.

dynasoft · February 2020

Sorry, I think I now get what you meant: load all data via the same server method including the phone numbers and show the 2 types of data on their editor forms. Will try that.

dynasoft · February 2020

Seems to work. Thanks again for the insight.

allan · February 2020

Awesome. Good to know you've got it working.

Allan

One DT, 2 editor forms

One DT, 2 editor forms

Answers

Howdy, Stranger!

Categories

DataTables

One DT, 2 editor forms

One DT, 2 editor forms

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables