Basic, Templates Show Before Datatable

ITDATAG

Hello,

I am a bit confused.. I am creating a template to use with editor. However it seems to show tags and fields before my data table. See screenshot. What a my doing wrong?

    <div>
    
        <fieldset>
            <div class="container">
                <div id="customForm">
                    <fieldset class="ActivityHead">
                        <legend>Type Of Activity</legend>
                        <editor-field name="ActivityType"></editor-field>
                        <editor-field name="ActDate"></editor-field>
                        <editor-field name="Contact"></editor-field>
                    </fieldset>
                    <fieldset class="ActivityNotes">
                        <legend>Notes</legend>
                        <editor-field name="Reference"></editor-field>
                        <editor-field name="Notes"></editor-field>
                    </fieldset>
                    <fieldset class="ActivityDetails">
                        <legend>HR info</legend>
                        <editor-field name="position"></editor-field>
                        <editor-field name="salary"></editor-field>
                        <editor-field name="start_date"></editor-field>
                    </fieldset>
                </div>
            </div>
        </fieldset>
    </div>
    <table id="MyTable" class="display" style="width:100%;">
        <thead></thead>
        <tfoot></tfoot>
    </table>

Please give some pointers.

allan

The very first thing Editor should do when initialised is remove the template from the document. Could you give me a link to your page so I can take a look and see why that isn't happening please?

Thanks,
Allan

ITDATAG

Allan,

I am not sure how to sent a link to the page other then pasting the code here. 

But what you mention that editor hides it on initialization. Editor is being initialized when a button is press. Can I initialize editor without showing it?

 <script>
    var editor;
    //var editor1;
     var ActEditor;


    function createChild(row) {
        // This is the table we'll convert into a DataTable
        var table = $('<table class="display" width="100%"/>');

        // Display it the child row
        row.child(table).show();
        var rowData = row.data();
        // Editor definition for the child table
        var ActEditor =  new $.fn.dataTable.Editor({
            template: "#customForm",
            ajax: {
                url: "/CRM/ActRec",
                data: function (d) {
                    d.SalesOpId = rowData.SalesOpId;
                    d.MainId = rowData.SalesOpId;
                }
            },
            table: table,
            fields: [{
                label: "ActivityType:",
                name: "ActivityType",
                type:"select"
            }, {
                label: "Activity Date:",
                name: "ActDate",
                type: "datetime",
               def: function () { return new Date(); },
                format:"MM-DD-YYYY"
            }, {
                label: "Contact:",
                name: "Contact"
            }, {
                label: "Reference:",
                name: "Reference"
                }, {
                    label: "Notes:",
                    name: "Notes"
                }, {
                    type:"hidden",
                    name: "SalesOpId",
                    def: function () { return rowData.SalesOpID;}
                }
            ]
        });

allan

Editor is being initialized when a button is press. Can I initialize editor without showing it?

Ah - in that case, stick your template inside div which has height and width of 0px. That will effectively hide it.

Allan

ITDATAG

Allan,

thats a great idea.. I tryit it..

<div id="myForm"  style="height:0px; width:0px">
    <div id="customForm">
        <fieldset class="ActivityHead">
            <legend>Type Of Activity</legend>
            <editor-field name="ActivityType"></editor-field>
            <editor-field name="ActDate"></editor-field>
            <editor-field name="Contact"></editor-field>
        </fieldset>
        <fieldset class="ActivityNotes">
            <legend>Notes</legend>
            <editor-field name="Reference"></editor-field>
            <editor-field name="Notes"></editor-field>
        </fieldset>
        <fieldset class="ActivityDetails">
            <legend>HR info</legend>
            <editor-field name="position"></editor-field>
            <editor-field name="salary"></editor-field>
            <editor-field name="start_date"></editor-field>
        </fieldset>
    </div>
</div>

I think I am making strides, I may handle it through hiding and showing..

However another has pop up.. in the code below.. Does the Destroy method get rid of the template code.? it seems to disappear and the second time is call the template is not found.

    function destroyChild(row) {
        var table = $("table", row.child());
        //$('#myForm').addClass('Hidden');
        console.log(table)


        table.detach();
        table.DataTable().destroy();

        // And then hide the row
        row.child.hide();
    }

allan

Make sure you add overflow: hidden to your div as well to make sure the content is hidden.

Does the Destroy method get rid of the template code.?

Yes. That's a good point, it should probably be reinserted automatically. As a workaround, use template() to get the template element just before you call destroy() and insert it back into the document.

Allan