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

  • 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="@savedEventDetails.eventDatetime.Value.Hour+@savedEventDetails.eventDatetime.Value.Minute" 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());
    

    Tuesday, February 9, 2021 2:21 PM

All replies

  • 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.

    Wednesday, February 10, 2021 2:24 PM
  • 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.

    Wednesday, February 10, 2021 4:14 PM