editor collection not working

montoyam

I am using the standalone editor, collections in a .net project. I have a controller that is returning 6 records, based on the date of a select box on that page. The user can select a different start date and the existing 6 panels are replace with the new 6 panels for the selected date. The panels are rendering fine. The issue is that the editor screen is only working on the initial 6 panels. When the user changes the start date and the 6 new panels are loaded, the editor just shows a blank grey box, no fields. I added an alert to make sure the row_id was correct, and it is. when I look at the ajax return, the data is all there from what I see, mostly because, as I said, the 6 panels render with the new data correctly. It is just the editor that is not working.

function getFormattedDate(dateIn) {
    var date = new Date(dateIn);
    var year = date.getFullYear();

    var month = (1 + date.getMonth()).toString();
    month = month.length > 1 ? month : '0' + month;

    var day = date.getDate().toString();
    day = day.length > 1 ? day : '0' + day;

    return month + '/' + day + '/' + year;
}


// Template function to display the information panels. Editor will
// automatically keep the values up-to-date with any changes due to the use of
// the `data-editor-field` attribute. It knows which panel to update for each
// record through the use of `data-editor-id` in the container element.
function createPanel(data) {
    var id = data.DT_RowId;
    
    $(
        '<div class="col-md-2 col-sm-4">'+
            '<div class="card bg-deployment pt-3 mb-3">'+
                '<h4 class="card-title text-center">' + data.EmployeeCounts.WeekOfDate + '</h4>'+
                '<div class="card-body">'+
                    '<div data-editor-id="' + id + '">' +
                        
                        //'<i class="remove fa fa-times" data-id="' + id + '" />' +
                        '<dl class="row">' +
                            '<span style="display:none"><dt>Week Of:</dt><dd data-editor-field="EmployeeCounts.WeekOfDate">' + data.EmployeeCounts.WeekOfDate + '</dd></span> ' +
                            '<dt class="col-9">FT Worksite</dt><dd  class="col-3 text-right" data-editor-field="EmployeeCounts.FT_Worksite">' + data.EmployeeCounts.FT_Worksite + '</dd>' +
                            '<dt class="col-9">FT Teleworking</dt><dd  class="col-3 text-right" data-editor-field="EmployeeCounts.FT_Teleworking">' + data.EmployeeCounts.FT_Teleworking + '</dd>' +
                            '<dt class="col-9">FT Need Work</dt><dd  class="col-3 text-right" data-editor-field="EmployeeCounts.FT_NeedWork">' + data.EmployeeCounts.FT_NeedWork + '</dd>' +
                            '<dt class="col-9">FT Out</dt><dd  class="col-3 text-right" data-editor-field="EmployeeCounts.FT_Out">' + data.EmployeeCounts.FT_Out+ '</dd>' +
                        '</dl>' +
                        '<dl class="row mt-3">' +
                            '<dt class="col-9">PT Worksite</dt><dd class="col-3 text-right" data-editor-field="EmployeeCounts.PT_Worksite">' + data.EmployeeCounts.PT_Worksite + '</dd>' +
                            '<dt class="col-9">PT Teleworking</dt><dd class="col-3 text-right" data-editor-field="EmployeeCounts.PT_Teleworking">' + data.EmployeeCounts.PT_Teleworking + '</dd>' +
                            '<dt class="col-9">PT Need Work</dt><dd class="col-3 text-right" data-editor-field="EmployeeCounts.PT_NeedWork">' + data.EmployeeCounts.PT_NeedWork + '</dd>' +
                            '<dt class="col-9">PT Out</dt><dd class="col-3 text-right" data-editor-field="EmployeeCounts.PT_Out">' + data.EmployeeCounts.PT_Out + '</dd>' +
                            //'<dt>PT Out</dt><dd data-editor-field="EmployeeCounts.DepartmentID">' + data.EmployeeCounts.DepartmentID + '</dd>' +
                        '</dl>' +
                    '</div>' +
                '</div>' +
                '<div class="card-footer bg-needs" style="transform: rotate(0);">' + '<a class="btn edit stretched-link" data-id="' + id + '">Edit<a/>' + '</div>'+
            '</div>'+
        '</div>'
    ).appendTo('#panels');
}

var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function () {
    var curr = new Date; // get current date
    var first = curr.getDate() - curr.getDay() + 1;
    var firstday = new Date(curr.setDate(first)).toLocaleDateString();  //get the Monday of this week as default
    var myDate = getFormattedDate(firstday);


    $('ul[data-source]').each(function () {
        var $ul = $(this);
        $.ajax({
            url: $ul.attr('data-source'),
            success: function (response) {
                var len = response.data.length;
                for (var i = 0; i < len; i++) {
                    var name = response.data[i][$ul.attr('data-displayKey')];
                    var option = "<li> " + name + "</li> ";
                    $ul.append(option);
                }
            }
        });
    });


    $('select[data-source]').each(function () {
        var $select = $(this);
        $.ajax({
            url: $select.attr('data-source'),
            success: function (response) {
                var len = response.data.length;
                for (var i = 0; i < len; i++) {
                    var id = response.data[i][$select.attr('data-valueKey')];
                    var name = response.data[i][$select.attr('data-displayKey')];
                    var option = "<option value='" + id + "'";
                    option += (name == myDate) ? " selected " : "";
                    option +="> " + name + "</option> ";
                    $select.append(option);
                }
                drawPanels();
            }
        });
    });

    function drawPanels() {
        var apiURL = "api/EmployeeCountsFiltered?dtStartDate=" + $("#WeekOfStart").val();
        editor = new $.fn.dataTable.Editor({
            ajax: apiURL,
            template: '#CountsEditorForm',
            width: "100%",
            fields: [
                { label: "Week Of:", name: "EmployeeCounts.WeekOfDate", type:"readonly" },
                { label: "Worksite:", name: "EmployeeCounts.FT_Worksite" },
                { label: "Teleworking:", name: "EmployeeCounts.FT_Teleworking" },
                { label: "Need Work:", name: "EmployeeCounts.FT_NeedWork" },
                { label: "Out:", name: "EmployeeCounts.FT_Out" },
                { label: "Worksite:", name: "EmployeeCounts.PT_Worksite" },
                { label: "Teleworking:", name: "EmployeeCounts.PT_Teleworking" },
                { label: "Need Work:", name: "EmployeeCounts.PT_NeedWork" },
                { label: "Out:", name: "EmployeeCounts.PT_Out" }
                //            { label: "Department:", name: "EmployeeCounts.DepartmentID" }

            ]
        });

        // Create record - on create we insert a new panel
        editor.on('postCreate', function (e, json) {
            createPanel(json.data[0]);
        });

        $('button.create').on('click', function () {
            editor
                .title('Create new record')
                .buttons('Create')
                .create();
        });

        // Edit
        $('#panels').on('click', 'a.edit', function () {
            alert($(this).data('id'));
            editor
                .title('Edit Record')
                .buttons('Save changes')
                .edit($(this).data('id'));

        });

        // Remove
        $('#panels').on('click', 'i.remove', function () {
            editor
                .title('Delete record')
                .buttons('Delete')
                .message('Are you sure you wish to delete this record?')
                .remove($(this).data('EmployeeCounts.EmployeeCountID'));
        });

        // Load the initial data and display in panels
        $.ajax({
            url: apiURL,
            dataType: 'json',
            success: function (json) {
                $("#panels").empty();
                for (var i = 0, ien = json.data.length; i < ien; i++) {
                    createPanel(json.data[i]);
                }
            }
        });
    }

    $("#WeekOfStart").on('change', function () {
        drawPanels();
    });
});

montoyam

I may have found a clue. on the initial draw of the page and the first 6 panels are displayed, when i click edit the alert that I added (line 130 above) appears once. However, when I change the Start Date and the new panels are loaded, line 160 above, the alert displays twice. When I change the start date yet again, the alert displays three times, and so on. So I am guessing I need to unload something??

kthorngren

Each time you call drawPanels() it creates additional click event handlers inside the function. These are added the the previous. Either move them outside the function or use jQuery off() to trun them off before recreating them, for example: $('#panels').off().on('click'.... .

Kevin

montoyam

ah yes. that explains why the alerts were doing what they were doing.

However, to get it to work fully, i needed to destroy the editor before re-drawing.

    $("#WeekOfStart").on('change', function () {
        editor.destroy();
        drawPanels();
    });