Saved multiple events is not showed in fields using knockoutjs and mvc

Question

User1878001738 posted

Hi,

I am currently working on a wep app wherein the user can enter multiple event details by adding dynamically in the form. In adding multiple events, I use knockoutjs. It works fine during create action but when the created events will be edited, the fields are empty and do not show the saved data from database. 

When I try to populate the fields using native c# codes, it works fine and data are showed in fields. How to do this using knockoutjs? 

Any help will be greatly appreciated. Thanks in advance.

This is the multiple events view

CONTROLLER

        [HttpGet]
        public ActionResult EditPSEEvent(Guid? incidentReportId)
        {
             PSERegistryDTO.PSEAllIncidentReportsDTO editIncidentModel = psePOCO.GetPSEIncidentReports_Edit(incidentReportId);

             editIncidentModel.SavedEventDetailsList = psePOCO.GetSavedEventDetailsForEdit(incidentReportId).ToList();
            editIncidentModel.SavedCategoryAndSubcategoryList = psePOCO.GetSavedCategoriesAndSubcategoriesForEdit(incidentReportId).ToList();
            editIncidentModel.SavedDepartmentAndSectionList = psePOCO.GetSavedDepartmentAndSectionForEdit(incidentReportId).ToList();

             return View("EditPSEEvent", editIncidentModel);
        }

VIEW

@if (PSEHelpers.hasUpdatedToNewEvents(Model.incidentReportId))
        {
            foreach (var savedEventDetails in Model.SavedEventDetailsList)
            {
                <div data-bind='foreach: events_Edit'>
                    <br />

                    <div id="multipleEventsDiv_Edit" style="background-color: #eeeeee;padding-left: 30px;padding-right: 30px;padding-bottom: 30px;padding-top: 15px;border: 1px solid rgba(216,216,216, 0.6);border-radius: 6px;">
                        <div class="row" style="float:right;">
                            <button type="button" data-bind='click: $root.removeEvent_Edit' class="btn btn-outline-danger btn-sm mb-1 mt-0 pseRemoveAddedEventClass_Edit" id="pseRemoveAddedEventBtn_Edit" data-toggle="tooltip" title="Remove" style="cursor:pointer;"><span class="fa fa-remove"></span></button>
                        </div><br /><br />

                        <div class="row">
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label for="pseEventTypeDropdownList_Edit" class="text-muted" style="font-size:12px;">Event Type</label>
                                    <select class="form-control form-control-sm require-field pseEventTypeDropdownClass_Edit" data-bind="value: eventTypeId, uniqueName: true" style="font-size:12px;" id="pseEventTypeDropdownList_Edit" name="eventTypeId">
                                        @{
                                            <option value="">Select Event Type</option>
                                            foreach (var eventType in Model.EventTypeList)
                                            {
                                                if (PSEHelpers.GetEventTypeId(Model.incidentReportId, savedEventDetails.rowIndex) == eventType.eventTypeId)
                                                {
                                                    <option value="@eventType.eventTypeId" selected>@eventType.eventTypeName</option>
                                                }
                                                else
                                                {
                                                    <option value="@eventType.eventTypeId">@eventType.eventTypeName</option>
                                                }
                                            }
                                        }
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label for="patientSafetyEventDropdownList_Edit" class="text-muted" style="font-size:12px;">Patient Safety Events</label>
                                    <div class="input-group">
                                        @if (savedEventDetails.patientSafetyEventsId == null || savedEventDetails.patientSafetyEventsId == Guid.Empty)
                                        {
                                            <select class="form-control form-control-sm require-field patientSafetyEventsDropdownClass_Edit" data-bind="value: pseEventsId, with: eventTypeId, attr: {'disabled' : isDisabled, 'title' : patientSafetyEventTooltip}, patientSafetyEventDDL_Edit: true, uniqueName: true" data-toggle="tooltip" style="font-size:12px;" id="patientSafetyEventDropdownList_Edit" name="pseEventsId" disabled>
                                                @{
                                                    <option value="">Select Patient Safety Event</option>
                                                    foreach (var events in Model.PatientSafetyEventsList)
                                                    {
                                                        if (PSEHelpers.GetPSEEventsId(Model.incidentReportId, savedEventDetails.rowIndex) == events.patientSafetyEventsId)
                                                        {
                                                            <option value="@events.patientSafetyEventsId" selected>@events.eventsName</option>
                                                        }
                                                        else
                                                        {
                                                            <option value="@events.patientSafetyEventsId">@events.eventsName</option>
                                                        }
                                                    }
                                                }
                                            </select>
                                        }
                                        else
                                        {
                                            <select class="form-control form-control-sm require-field patientSafetyEventsDropdownClass_Edit" data-bind="value: pseEventsId, with: eventTypeId, attr: {'disabled' : isDisabled, 'title' : patientSafetyEventTooltip}, patientSafetyEventDDL: true, uniqueName: true" data-toggle="tooltip" style="font-size:12px;" id="patientSafetyEventDropdownList_Edit" name="pseEventsId">
                                                @{
                                                    <option value="">Select Patient Safety Event</option>
                                                    foreach (var events in Model.PatientSafetyEventsList)
                                                    {
                                                        if (PSEHelpers.GetPSEEventsId(Model.incidentReportId, savedEventDetails.rowIndex) == events.patientSafetyEventsId)
                                                        {
                                                            <option value="@events.patientSafetyEventsId" selected>@events.eventsName</option>
                                                        }
                                                        else
                                                        {
                                                            <option value="@events.patientSafetyEventsId">@events.eventsName</option>
                                                        }
                                                    }
                                                }
                                            </select>
                                        }
                                    </div>
                                    <div id="popover-content-patientSafetyEventDescription_Edit" hidden>
                                        <ul class="list-group">
                                            <li class="list-group-item" style="font-size:11px"><b>Hazardous or unsafe condition</b> -a circumstance (other than the patient’s disease process, or condition) that increases the probability of a sentinel or an adverse event.</li>
                                            <li class="list-group-item" style="font-size:11px"><b>Near-miss or close call or “good catch</b> - any condition or series of events that could have led to a sentinel or adverse event but was prevented from reaching the patient either unintentionally or inthe course of routine systems checks.</li>
                                            <li class="list-group-item" style="font-size:11px"><b>No-harm event</b> - a patient safety event that reaches a patient but does not cause harm.</li>
                                            <li class="list-group-item" style="font-size:11px"><b>Adverse event</b> - a serious, unanticipated, undesirable, or potentially dangerous occurrence in a health care organization but does not rise to the level of being sentinel.</li>
                                            <li class="list-group-item" style="font-size:11px"><b>Sentinel event</b> - an unanticipated occurrence involving death or serious physical or psychological injury. Serious physical injury specifically includes loss of limb or function.</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label for="departmentAndSectionDropdownList_Edit" class="text-muted" style="font-size:12px;">Department/Section Involved</label>
                                    <select class="selectpicker form-control form-control-sm require-field departmentAndSectionDropdownClass_Edit" style="font-size:11px !important;" data-bind="selectedOptions: departmentAndSectionId, deptSecDDL_Edit: true, uniqueName: true" id="departmentAndSectionDropdownList_Edit" name="departmentAndSectionId" multiple data-selected-text-format="count > 1" data-live-search="true" title="Select items" data-header="Select Department and Section">
                                        @{
                                            foreach (var dept in Model.DepartmentList)
                                            {
                                                <optgroup label="@dept.departmentName" style="font-weight:700 !important;">
                                                    @foreach (var deptSection in Model.SavedDepartmentAndSectionList)
                                                    {
                                                        if (dept.departmentId == deptSection.departmentId)
                                                        {
                                                            if (deptSection.selected == "yes")
                                                            {
                                                                if (deptSection.incidentReportId == Model.incidentReportId && deptSection.rowIndex == savedEventDetails.rowIndex)
                                                                {
                                                                    <option value="@deptSection.departmentAndSectionId" selected>@deptSection.sectionName</option>
                                                                }
                                                            }
                                                            else
                                                            {
                                                                <option value="@deptSection.departmentAndSectionId">@deptSection.sectionName</option>
                                                            }
                                                        }
                                                    }
                                                </optgroup>
                                            }
                                        }
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label for="placeOfEventText_Edit" class="text-muted" style="font-size:12px;">Place of Event</label>
                                    @if (savedEventDetails.placeOfIncident != null || savedEventDetails.placeOfIncident != "")
                                    {
                                        <input type="text" data-bind='value: placeOfEvent, valueUpdate: "afterkeydown", uniqueName: true' name="placeOfEvent" id="placeOfEventText_Edit" value="@savedEventDetails.placeOfIncident" class="form-control form-control-sm require-field placeOfEventClass_Edit" style="font-size:12px !important;" autocomplete="off" />
                                    }
                                    else
                                    {
                                        <input type="text" data-bind='value: placeOfEvent, valueUpdate: "afterkeydown", uniqueName: true' name="placeOfEvent" id="placeOfEventText_Edit" class="form-control form-control-sm require-field placeOfEventClass_Edit" style="font-size:12px !important;" autocomplete="off" />
                                    }
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label for="dateOfEventText_Edit" class="text-muted" style="font-size:12px;">Date of Event</label>
                                    @if (savedEventDetails.eventDatetime != null)
                                    {
                                        <div class="input-group dateOfEventDatePickerDivClass_Edit" id="pseDateOfEventDTP_Edit">
                                            <input type="text" data-bind="textInput: dateOfEvent, datePicker_Edit: dateOfEvent, uniqueName: true" name="dateOfEvent" id="dateOfEventText_Edit" value="@savedEventDetails.eventDatetime.Value.Date.ToString("MM/dd/yyyy")" class="form-control form-control-sm require-field dateOfEventClass_Edit" style="font-size:12px !important;" placeholder="Click to select date of event" autocomplete="off">
                                        </div>
                                    }
                                    else
                                    {
                                        <div class="input-group dateOfEventDatePickerDivClass_Edit" id="pseDateOfEventDTP_Edit">
                                            <input type="text" data-bind="textInput: dateOfEvent, datePicker_Edit: dateOfEvent, uniqueName: true" name="dateOfEvent" id="dateOfEventText_Edit" class="form-control form-control-sm require-field dateOfEventClass_Edit" style="font-size:12px !important;" placeholder="Click to select date of event" autocomplete="off">
                                        </div>
                                    }
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label for="timeOfEventText_Edit" class="text-muted" style="font-size:12px;">Time of Event</label>
                                    @if (savedEventDetails.eventDatetime != null)
                                    {
                                        <div class="input-group timeOfEventTimePickerDivClass_Edit" id="timeOfEventTimePicker_Edit">
                                            <input type="text" data-bind="textInput: timeOfEvent, timepicker_Edit: true, uniqueName: true" name="timeOfEvent" id="timeOfEventText_Edit" value="@[e-mail]" class="form-control form-control-sm require-field timeOfEventClass_Edit" style="font-size:12px !important;" placeholder="Click to select time of event" autocomplete="off">
                                        </div>
                                    }
                                    else
                                    {
                                        <div class="input-group timeOfEventTimePickerDivClass_Edit" id="timeOfEventTimePicker_Edit">
                                            <input type="text" data-bind="textInput: timeOfEvent, timepicker_Edit: true, uniqueName: true" name="timeOfEvent" id="timeOfEventText_Edit" class="form-control form-control-sm require-field timeOfEventClass_Edit" style="font-size:12px !important;" placeholder="Click to select time of event" autocomplete="off">
                                        </div>
                                    }
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <!--Categories and Subcategories (PSE)-->
                            <div class="col-lg-4" id="PSE_categorySubcategoryDiv_Edit" style="display:none;" data-bind="visible: displayPSEDiv">
                                <div class="form-group">
                                    <label for="categoryAndSubcategoryDropdownList_PSE_Edit" class="text-muted" style="font-size:12px;">Categories and Subcategories (Patient Safety)</label>
                                    <select class="form-control form-control-sm require-field categoryAndSubcategoryDropdownClass_PSE_Edit" style="font-size:11px;" data-bind="selectedOptions: categoryAndSubcategoryIdPSE, catSubcatDDL_Edit: true" id="categoryAndSubcategoryDropdownList_PSE_Edit" name="categoryAndSubcategoryIdPSE" multiple data-selected-text-format="count > 1" data-live-search="true" title="Select items" data-header="Select Categories and Subcategories">
                                        @{
                                            foreach (var cat in Model.CategoryList)
                                            {
                                                <optgroup label="@cat.categoryName" style="font-weight:700 !important;">
                                                    @foreach (var catSubcat in Model.CategoryAndSubcategoryList_PSE)
                                                    {
                                                        if (cat.categoryId == catSubcat.categoryId)
                                                        {
                                                            <option value="@catSubcat.categoryAndSubcategoryId">@catSubcat.subcategoryName</option>
                                                        }
                                                    }
                                                </optgroup>
                                            }
                                        }
                                    </select>
                                </div>
                            </div>

                            <!--Categories and Subcategories (PXE)-->
                            <div class="col-lg-4" id="PXE_categorySubcategoryDiv_Edit" style="display:none;" data-bind="visible: displayPXEDiv">
                                <div class="form-group">
                                    <label for="categoryAndSubcategoryDropdownList_PXE_Edit" class="text-muted" style="font-size:12px;">Categories and Subcategories (Patient Experience)</label><br />
                                    <select class="form-control form-control-sm require-field categoryAndSubcategoryDropdownClass_PXE_Edit" data-bind="selectedOptions: categoryAndSubcategoryIdPXE, catSubcatDDL_Edit: true" id="categoryAndSubcategoryDropdownList_PXE_Edit" name="categoryAndSubcategoryIdPXE" multiple data-selected-text-format="count > 1" data-live-search="true" title="Select items" data-header="Select Categories and Subcategories">
                                        @{
                                            foreach (var cat in Model.CategoryList)
                                            {
                                                <optgroup label="@cat.categoryName" style="font-weight:700 !important;">
                                                    @foreach (var catSubcat in Model.CategoryAndSubcategoryList_PXE)
                                                    {
                                                        if (cat.categoryId == catSubcat.categoryId)
                                                        {
                                                            <option value="@catSubcat.categoryAndSubcategoryId">@catSubcat.subcategoryName</option>
                                                        }
                                                    }
                                                </optgroup>
                                            }
                                        }
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <br />
            }

KNOCKOUTJS

// ****************************
//  Multiple Events View Model
// ****************************
var PSEEventDetails_Edit = function (events) {
    var self = this;
    //self.events = ko.observableArray(events);

    self.eventTypeId = ko.observable();
    self.pseEventsId = ko.observable();
    self.departmentAndSectionId = ko.observableArray([]);
    self.placeOfEvent = ko.observable();
    self.dateOfEvent = ko.observable();
    self.timeOfEvent = ko.observable();
    self.categoryAndSubcategoryIdPSE = ko.observableArray([]);
    self.categoryAndSubcategoryIdPXE = ko.observableArray([]);
    self.rowIndex = ko.observable();
    self.addedEvents = ko.observable();
    self.patientSafetyEventTooltip = ko.observable();
    self.isDisabled = ko.observable(true);
    self.displayPSEDiv = ko.observable(false);
    self.displayPXEDiv = ko.observable(false);
    self.requiredFieldValidation = ko.observable();

};


var PSEModel_Edit = function (events_Edit) {
    var self = this;
    //self.events_Edit = ko.observableArray(events_Edit);

    self.events_Edit = ko.observableArray();

    self.addEvent_Edit = function () {
        self.events_Edit.push(new PSEEventDetails_Edit());

        //When button is clicked, auto-scroll to the fields of added event
        $('html, body').animate({
            scrollTop: $("#multipleEventsDiv").offset().top
        }, 1000);
        $("#multipleEventsDiv").addClass("animated fadeIn delay-1s");
    };

    self.removeEvent_Edit = function (events) {
        self.events_Edit.remove(events);
    };

    self.incidentPatientName = ko.observable();
    self.hospitalNumber = ko.observable();
    self.birthDate = ko.observable();
    self.age = ko.observable();
    self.gender = ko.observable();
    self.diagnosisText = ko.observable();
    self.narrativeReportText = ko.observable();
    self.personsInvolved = ko.observable();
    self.personIds = ko.observableArray([]);
    self.groupIds = ko.observableArray([]);
    self.actionsTakenText = ko.observable();
    self.isReadOnly = ko.observable(true);

    self.saveEdited = function (data) {

        var jsonData = ko.toJSON(self.events_Edit);
        alert(jsonData);

        var d = ko.toJSON(self.incidentPatientName);
        var e = ko.toJSON(self.hospitalNumber);
        var f = ko.toJSON(self.birthDate);
        var g = ko.toJSON(self.age);
        var h = ko.toJSON(self.gender);
        var i = ko.toJSON(self.diagnosisText);
        var j = ko.toJSON(self.narrativeReportText);
        var k = ko.toJSON(self.personsInvolved);
        var l = ko.toJSON(self.personIds);
        var m = ko.toJSON(self.groupIds);
        var n = ko.toJSON(self.actionsTakenText);
        alert(d + " " + e + " " + f + " " + g + " " + h + " " + i + " " + j + " " + k + " " + l + " " + m + " " + n);
        alert(ko.toJSON(self));

        $.ajax({
            url: '/PSERegistry/EditPSEEvent',
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            data: ko.toJSON({
                multipleEvents: self.events_Edit,
                incidentPatientName: self.incidentPatientName,
                hospitalNumber: self.hospitalNumber,
                age: self.age,
                gender: self.gender,
                birthDate: self.birthDate,
                diagnosisText: self.diagnosisText,
                narrativeReportText: self.narrativeReportText,
                personsInvolved: self.personsInvolved,
                personIds: self.personIds,
                groupIds: self.groupIds,
                actionsTakenText: self.actionsTakenText
            }),
            success: function (xhr, status) {
                alert(status);
            }
        });
    };
};

ko.applyBindings(new PSEModel_Edit());

Answer 1

User197322208 posted

but when the created events will be edited, the fields are empty and do not show the saved data from database. 

First, I will not mix and match Model from MVC with Model from KO.

Second, if you persist to do, please modify

self.events_Edit = ko.observableArray();

to add the data from the MVC model.

Answer 2

User1878001738 posted

Hi @ignatandrei,

Thank you so much for the response.

But can you provide me a sample code on what to do? I am still new in using knockoutjs. How can I get the data saved and display it using knockoutjs?

This will be greatly appreciated. Thank you.