Asked by:
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="@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