I am using Kendo ListView with remote datasource. I would like to add links to the data that is displayed but I am struggling.
Here is my function:
$(function () {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: URL + "/Read",
dataType: "json"
}
},
schema: {
data: function (response) {
return response.Data["dsStudent"]["ttStudent"];
},
},
});
$("#listView").kendoListView({
dataSource: dataSource,
selectable: "multiple",
dataBound: onDataBound,
change: onChange,
template: kendo.template($("#template").html())
});
function onDataBound() {
//console.log("ListView data bound");
}
function onChange() {
var data = dataSource.view(),
selected = $.map(this.select(), function (item) {
return data[$(item).index()].fileID;
});
console.log("Selected: " + selected.length + " item(s), [" + selected.join(", ") + "]");
}
});
Here is my template
<script type="text/x-kendo-tmpl" id="template">
<div class="product">
<ul class="list-group">
<li class="list-group-item">#:Name#</li>
</ul>
</div>
</script>
The data is displayed as expected. My JSON contains a value that I would like to append to a url, this would then be used to create the href link. This is where I am struggling.
I have been able to console.log the value I need form my JSON but I am lost trying to figure out how to create the href.
Here is a snippet of my JSON:
{"Data": {"dsStudent": {"ttStudent": [{"studentNum": 366,"studentVersion": 2,"createDate": "2018-02-11","fileID":"18525478387e8","description":"StudentNames.pdf","displayCreateTime": "15:31"}]}}}
Using the onChange function, I am able to console.log the required field from the JSON.
I am trying to output the results like this, the fileID would change for each record in the JSON file.
<ul>
<li>
Download Student Record
</li>
</ul>
I hope I have been able to explain where I am struggling.
Just do like in your first template, print the value:
Download Student Record
^ here is where you print the fileId inside the link address
Related
I can't figure out why it's throwing me an error but when I check if my list is being rendered it is there.
Front end
<div id="calendar-events-list" class="events-listing">
foreach(sample_arr) {
echo '<ul class="events-by-date list"></div>';
}
<nav class="events-calendar-pager events-pager" data-value="">
<a class="page-prev disabled" href="#"></i></a>
<ul class="pagination"></ul>
<a class="page-next" href="#"></i></a>
</nav>';
</div>
Js file
$.ajax({
method: 'post',
url: path+'js/ajax/get-events.php',
data: {
// 'current_month': instance.month,
'current_year': instance.year,
'current_period': instance.current_period,
'action': action,
'views': views,
'limit': instance.limit,
'xid': c_xid
},dataType: 'json'
}).done(function(data){
if($('ul.list li').length){
var events_calendar_options = {
valueNames: ['side'],
pagination: true,
page: 3,
innerWindow: 2,
};
var eventList = eventsPagination('calendar-list', options);
eventList.update();
}
} // close ajax
...
// when user clicked a date from a calendar, the events (my list array) on that date should show
$container.on('click', $element, function(){
if($('ul.list li').length){
var options = {
valueNames: ['side'],
pagination: true,
page: 3,
innerWindow: 2,
};
var eventList = eventsPagination('calendar-list', options);
eventList.update();
}
}
There's nothing wrong with my eventsPagination() function as the other ones are working properly. It just this one is throwing me an error once I change the date and pass thru ajax and then return my new events array. And my list of events array will only show once they click a specific date in the calendar.
Really appreacite your help!
I'm trying to turn the results of a route from my API into a searchable list the whole process of obtaining data via AJAX is completed, I can print data on my front end but only 1 result from my list in JSON is available to the client, how can I expand this list using statement?
Jquery
$('#sendSearchAddress').click(function() {
$.ajax({
type: "GET",
dataType: "JSON",
url: "https://****/api/itapetininga-street-last-three-searcheds?access_token=7Z***",
success: function (finalData) {
// Running test
console.log(finalData);
if (finalData) {
// var dd = JSON.parse(result);
// alert(finalData[0].addressStreet)
// name: finalData[0].addressStreet
// Print Results
var options = {
valueNames: ['name', 'born']
};
// Example One
var values = [{
name: finalData[0].addressStreet
}];
var userList = new List('users', options, values);
// Example Two
// userList.add(values);
// Print Varible Contain Data From Street
console.log(values);
}
}
});
});
Html
<div id="users">
<input class="search" placeholder="Search" />
<button class="sort" data-sort="name">
Sort by name
</button>
<button id="sendSearchAddress">
Atualizar
</button>
<ul class="list">
<li>
<h3 class="name">Jonny Stromberg</h3>
<p class="born">1986</p>
</li>
<li>
<h3 class="name">Jonas Arnklint</h3>
<p class="born">1985</p>
</li>
</ul>
</div>
My JSON Result
I'm not sure I fully understand what you're trying to do but as best as I can tell it looks like you need to change
var values = [{
name: finalData[0].addressStreet
}];
to
var values = finalData.map(function(finalDatum) {
return {
name: finalDatum.addressStreet
};
});
I have created a jsbin at http://jsbin.com/ifimadOw/11/edit to illustrate.
I have this listview object:
<ul id="marketplace-categories-listview" data-bind="source: results"></ul>
And I have this dataset:
dsCats = new kendo.data.DataSource({
transport: {
read: {
url: myUrl,
data: {
key: myKey
}
}
}
});
$("#marketplace-categories-listview").kendoMobileListView({
dataSource: dsCats,
template: $("#marketplace-product-template").text()
});
The data returned from the API looks something like this:
{"count": 3, "results": ["Acupuncture Therapy","Automobiles","Lawn Care"]}
And here is my template:
<script type="text/x-kendo-tmpl" id="marketplace-categories-template">
<li data-bind="text: this"></li>
</script>
Because my data doesn't have named elements, I can't use something like "#:category#" in the template. I have also tried data-bind (as above), but so far nothing works. Surely there is a way to do this.
Simply use data (which is the name of the context variable passed to the template function) in your template:
$("#category-listview").kendoMobileListView({
dataSource: dsCats,
template: "#= data #"
});
(updated JSBin)
I want to filter in the list if the text box value is changed if the
JSON Returned in Ajax call is as I am using two different model.
Filteration should show hide or just filter the data I am providing you the JSON data what I am getting from the ajax call. Thanks
Data = [{"code":"Grand Financial","cls":"Branch","Chk":true},{"code":"Joan Group","cls":"Branch","Chk":true}]
var searchModel, advisorGroupModel;
$(document).ready(function () {
$.ajax({
type: "GET",
url: '/ASPNET/Reports/GetAdvisorGroups',
dataType: "json",
success: function (data) {
advisorGroupModel = {
advisorGroup: ko.observableArray(data)
};
ko.applyBindings(advisorGroupModel, document.getElementById("advisorGroupModel"));
}
})
var searchModel = {
searchQuery: ko.observable('')
};
searchModel.searchHandle= ko.dependentObservable(function () {
var code = this.searchQuery().toLowerCase();
return ko.utils.arrayFilter(advisorGroupModel, function (beer) {
debugger;
return beer.code.toLowerCase().indexOf(code) >= 0;
});
console.log(search);
}, searchModel)
ko.applyBindings(searchModel, document.getElementById("searchModel"));
});
<div id="searchModel">
<input data-bind="value: searchQuery, valueUpdate: 'keyup'" />
<h6 data-bind="text: searchQuery"></h6>
</div>
<div class="CheckBoxListGroup" id="advisorGroupModel">
<ul data-bind="template: { name: 'advisorGroupTemplate', foreach: advisorGroup, as: 'singleAdvisorGroup' }"></ul>
<script type="text/html" id="advisorGroupTemplate">
<li>
<input type="checkbox" data-bind="attr: { value: code, id: code, checked: Chk }" name="GroupsSel">
<label data-bind="attr: { for: code }, text: '' + code + ' (' + cls + ')' "></label>
</li>
</script>
</div>
don't bind your display to the entire list, bind your display to a computed function that returns the filtered list or returns all items when there are no filters.
then on your keyup call your filterlist function that filters the list removing the ones that do not match your filter
I am using x-editable to populate select list in popup. Now I want to send my key to server, my code is something like that
<a href="#" id="status" data-type="select" data-pk="1" data-url="${g.createLink(controller: 'someController', action: 'someAction')}" data-title="Select CV" class="btn btn-primary">
<image src="${resource(dir: 'images/template', file: 'logo11.png')}"/> ${session.someList?.size()} CV(s) Created
</a>
<script>
$(function () {
$('#status').editable({
value: 1,
source: [
<g:each in="${session.someList}" var="xyz" status="idx">
{value: ${xyz?.id}, text: "${xyz.title}", srsSelected: ${xyz.id}, updateXyz: "updateXyz"},
</g:each>
]
});
});
</script>
I want to send my srsSelected key to server, I did google but not getting the point...
Edit:
Now I am able to send my key to server(after long research) using
params: function (params) { //params already contain `name`, `value` and `pk`
var data = {};
data['cvSelected'] = params.pk;
return data;
}
therefore my updated code is:
<a href="#" id="status" data-type="select" data-pk="1" data-url="${g.createLink(controller: 'someController', action: 'someAction')}" data-title="Select CV" class="btn btn-primary">
<image src="${resource(dir: 'images/template', file: 'logo11.png')}"/>
${session.someList?.size()} CV(s) Created
</a>
<script>
$(function () {
$('#status').editable({
value: 1,
source: [
<g:each in="${session.someList}" var="xyz" status="idx">
{value: ${xyz?.id}, text: "${xyz.title}", srsSelected: ${xyz.id}, updateXyz: "updateXyz"},
</g:each>
],
params: function (params) { //params already contain `name`, `value` and `pk`
var data = {};
data['srsSelected'] = params.pk;
return data;
}
});
});
</script>
I am able to send value of pk in srsSelected key but this time I need to set value of srsSelected dynamically.
And Now I found the method to set the value of srsSelected dynamically as
params: function (params) {
params.srsSelected = params.pk
return params;
}
and setting the value of data-pk attribute in anchor tag dynamic, we can get srsSelected at controller action.