Recently i was working on a sitecore componenet using SXA and i have a requirement to search and sort the events using the JSON data from the controller . The problem occurs when i statically add the json data in the script tag , it works fine .
Static Data
<script>
educationEvents = {
"records": [{
"rid": 1,
"Event Name": "3Shape Basic Training",
"Date": "01/17/2020",
"Description": "<p>This is Description<br /></p>",
"Organizers": "Zahn D",
"City": "Online",
"Event type": "Class",
"Date Stamp": "1579199400000",
"Register Link": ""
}, {
"rid": 2,
"Date": "6/14/2019",
"Date Stamp": Date.parse("6/14/2019"),
"Event Name": "The Versatility and Advantages",
"Description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem dolores dolorum error iure laudantium nemo neque, nisi quidem quod similique totam vel vitae? Animi aperiam at iste iusto molestiae odit omnis! Adipisci alias autem, consequatur culpa est eum impedit ipsum labore libero nulla odio quaerat, quo recusandae vitae voluptatum.",
"Organizers": "Migue",
"City": "",
"Event type": "Webinar",
"Register Link": ""
}, {
"rid": 3,
"Date": "7/16/2019",
"Date Stamp": Date.parse("7/16/2019"),
"Event Name": "Digital RPD Production and Zirconia Solutions: A to Z",
"Description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem dolores dolorum error iure laudantium nemo neque, nisi quidem quod similique totam vel vitae? Animi aperiam at iste iusto molestiae odit omnis! Adipisci alias autem, consequatur culpa est eum impedit ipsum labore libero nulla odio quaerat, quo recusandae vitae voluptatum.",
"Organizers": "Kris Schermerhorn, CDT and Pamela Hanneman CDT",
"City": "",
"Event type": "Webinar",
"Register Link": ""
}],
"headers": [
"-select",
"-rid",
"-Date",
"Event Name~Event",
"Date Stamp~Date",
"Description",
"Organizers",
"City",
"Event type",
"Register Link~Register"
],
"column-widths": [
"0", //"-select",
"0", //"-rid",
"0", //"Date",
"45", //"Event Name",
"20", //"Event Date",
"0", //Description
"0", //"Organizers",
"20", //"City",
"0", //"Event type""15" //Register Link
],
"table-width": 100,
"actions": [],
"selected": [],
"hidden": [],
"count": 5,
"page-size": 25,
"page": 1,
"sort-by": "Date Stamp~Date",
"filter-by": ""
};
</script>
But when i get the data using ajax call it does not perform search and sort operations From Ajax
function EventViewModel() {
var self = this;
self.EventsList = ko.observableArray([]);
var educationEvents = {};
self.GetEvents = function () {
$.ajax({
type: 'GET',
url: 'api/Sitecore/Events/GetEvents',
dataType: "json",
data: {
datasourceId: $(".hidden-datasource").val()
},
success: function (data) {
for (var i = 1; i <= Object.keys(data).length; i++) {
data[i - 1].rid = i.toString();
data[i - 1]["Event Name"] = data[i - 1].EventName;
data[i - 1]["Date"] = data[i - 1].EventStartDate;
data[i - 1]["Description"] = data[i - 1].EventDescription;
data[i - 1]["Organizers"] = data[i - 1].Presenter;
data[i - 1]["City"] = data[i - 1].Location;
data[i - 1]["Event type"] = data[i - 1].EventType;
data[i - 1]["Register Link"] = data[i - 1].LearnMoreLink;
data[i - 1]["Date Stamp"] = Date.parse(data[i - 1].EventStartDate.toString());
delete data[i - 1].EventName;
delete data[i - 1].EventStartDate;
delete data[i - 1].EventDescription;
delete data[i - 1].Location;
delete data[i - 1].EventType;
delete data[i - 1].Presenter;
}
educationEvents = {
"records": JSON.stringify(data)
},
console.log(educationEvents);
//Here you map and create a new instance of EventDetailVM
self.EventsList($.map(data, function (item) {
return new EventDetailViewModel(item);
}));
}
});
}
self.GetEvents();
}
function EventDetailViewModel(data) {
var self = this;
self.EventName = ko.observable(data.EventName);
self.Presenter = ko.observable(data.Presenter);
self.EventStartDate = ko.observable(data.EventStartDate);
self.EventEndDate = ko.observable(data.EventEndDate);
self.Location = ko.observable(data.Location);
self.LearnMoreLink = ko.observable(data.LearnMoreLink);
}
$(document).ready(function () {
ko.applyBindings(new EventViewModel());
});
Sample Html
<section class="hs-tabular-data symphony-table small" data-source="educationEvents" data-templated="["Date-Stamp", "Event Name", "Register Link", "City"]" data-row-bound="tabularVMatch" data-current-page="1">
<div class="table-row table-heading-hr border-bottom">
<div data-header="-select" class=" first-table-cell strong pad col-0">
<input type="checkbox" class="rid-select-all" value="all">
</div>
<div data-header="-rid" class=" strong pad col-0">rid</div>
<div data-header="-Date" class=" strong pad col-0">Date</div>
<div data-header="Event Name" class=" strong pad col-45">Event</div>
<div data-header="Date Stamp" class=" strong pad col-20">Date</div>
<div data-header="Description" class=" strong pad col-0">Description</div>
<div data-header="Organizers" class=" strong pad col-0">Organizers</div>
<div data-header="City" class=" strong pad col-20">City</div>
<div data-header="Event type" class=" strong pad col-0">Event type</div>
<div data-header="Register Link" class=" strong pad col-15 last-table-cell ">Register</div>
</div>
<div class="table-body">
@{
if (Sitecore.Context.PageMode.IsExperienceEditor)
{
foreach (EventsModel item in Model.EventItems)
{
{
Html.RenderPartial("EventListEvent", item, new ViewDataDictionary
{
{ "cssClass", ListsHelper.BuildCssClass(index, Model.EventItems.Count()) },
{ "variantFields", Model.VariantFields }
});
}
index++;
}
}
else
{
foreach (EventsModel item in Model.EventItems)
{
var eventItem = item.InnterItem;
var eventItemDateField = (DateField)eventItem.Fields[EventDetailsTemplates.EventStartDateField];
var eventItemDate = Sitecore.DateUtil.IsoDateToDateTime(eventItemDateField.Value);
if (eventItemDate >= DateTime.Now && eventItemDate.Month == i)
{
{
Html.RenderPartial("EventListEvent", item, new ViewDataDictionary
{
{ "cssClass", ListsHelper.BuildCssClass(index, Model.EventItems.Count()) },
{ "variantFields", Model.VariantFields }
});
}
}
index++;
}
}
}
</div>
</section>
<div id="educationEvents-Templates" class="hidden">
<div id="educationEvents-Event-Name">
<div class="mobile-header medium-below xx-small uppercase color-lite-gray">Event Detail</div>
<button class="medium x-bold event-info block ellipsis no-border no-background push-left">{{event-name}}</button>
<strong class="x-small color-label-gray field-label">Presented by: </strong><strong class="x-small">{{organizers}}</strong>
<div data-hs-match="{{event-type}} === Class">
<div class="hs-pill bg-color-highlighted-green margin-top">{{event-type}}</div>
</div>
<div data-hs-match="{{event-type}} === Webinar">
<div class="hs-pill bg-color-highlighted-blue margin-top">{{event-type}}</div>
</div>
</div>
<div id="educationEvents-City">
<div class="mobile-header medium-below xx-small uppercase color-lite-gray">City</div>
<div data-hs-match="{{event-type}} === Webinar"> <span class="color-lite-gray small">Online</span> </div>
<div data-hs-match="{{event-type}} === Class"> {{city}} </div>
</div>
<div id="educationEvents-Date-Stamp">
<div class="mobile-header medium-below xx-small uppercase color-lite-gray">Date</div>
<span class="color-lite-gray small">{{date}}</span>
</div>
<div id="educationEvents-Register-Link">
<div class="mobile-header medium-below xx-small uppercase color-lite-gray">Register</div>
<a><strong class="x-small">Register Now</strong></a>
</div>
</div>
Is there any way i can achieve this .