I have a web service that returns around 100,000 records of data. The returned data is an array of json objects which has the structure as follows:
[
{"name": "Aron", id: 1, type: "R"},
{"name": "Tina", id: 2, type: "R"},
{"name": "Phil", id: 3, type: "R"}
]
I want to use the kendoGrid, and I want to know if using the scrollable: { virtual: true } option is sufficient or should I have to reformat the data.
You dont have to change your data, you just need to initiate an kendoGrid() and in you config put scrollable: { virtual: true } I did an jsfiddle example
Hope this help
Related
I have API Call abd which will be returning Json like below
{
"status": true,
"message": "Data Sent",
"data": [
{
"id": 9,
"name": "North",
"colType": 7,
"userID": 0,
"isVisible": false
}
]
}
And below i have JavaScript Ajax Call but it is returning Empty datatable please do help
$('#myTable').DataTable({
destroy: true,
responsive: true,
"ajax": {
"url": url+'/api/CommonMasters/7/GetByUserID/'+#ViewBag.UID,
"type": "GET",
"datatype": "json",
},
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"columns": [
{ "data": "name", "autoWidth": true },
{
"render": function (data, type, full, meta) { return "<a id='Edit' class='btn btn-info' onclick='editRefUser(" + full.id + ")' ;>Edit</a>"; }
},
]
});
In the ajax section, you need to define your data source: "dataSrc": "data".
"ajax": {
"url": url+'/api/CommonMasters/7/GetByUserID/'+#ViewBag.UID,
"type": "GET",
"datatype": "json",
"dataSrc": "data"
},
Why is this needed? Your JSON data structure does not have a "name" item at the top level. Names are nested inside the top-level "data" object. This extra directive tells DataTables to look only at the JSON's "data" object as its starting point.
See here for the related documentation:
The ajax option basically inherits all of the options made available by jQuery.ajax, but we provide the extra option of dataSrc to provide the ability to alter what data DataTables will read from the JSON returned from the server...
Also, on an unrelated note, I don't think you need this: destroy: true - try removing it. It probably does not make sense to try to destroy the table object while you are initializing it.
Indexed documents are like:
{
id: 1,
title: 'Blah',
...
platform: {id: 84, url: 'http://facebook.com', title: 'Facebook'}
...
}
What I want is count and output stats-by-platform.
For counting, I can use terms aggregation with platform.id as a field to count:
aggs: {
platforms: {
terms: {field: 'platform.id'}
}
}
This way I receive stats as a multiple buckets looking like {key: 8, doc_count: 162511}, as expected.
Now, can I somehow add to those buckets also platform.name and platform.url (for pretty output of stats)? The best I've came with looks like:
aggs: {
platforms: {
terms: {field: 'platform.id'},
aggs: {
name: {terms: {field: 'platform.name'}},
url: {terms: {field: 'platform.url'}}
}
}
}
Which, in fact, works, and returns pretty complicated structure in each bucket:
{key: 7,
doc_count: 528568,
url:
{doc_count_error_upper_bound: 0,
sum_other_doc_count: 0,
buckets: [{key: "http://facebook.com", doc_count: 528568}]},
name:
{doc_count_error_upper_bound: 0,
sum_other_doc_count: 0,
buckets: [{key: "Facebook", doc_count: 528568}]}},
Of course, name and url of platform could be extracted from this structure (like bucket.url.buckets.first.key), but is there more clean and simple way to do the task?
It seems the best way to show intentions is top hits aggregation: "from each aggregated group select only one document", and then extract platform from it:
aggs: {
platforms: {
terms: {field: 'platform.id'},
aggs: {
platform: {top_hits: {size: 1, _source: {include: ['platform']}}}
}
}
This way, each bucked will look like:
{"key": 7,
"doc_count": 529939,
"platform": {
"hits": {
"hits": [{
"_source": {
"platform":
{"id": 7, "name": "Facebook", "url": "http://facebook.com"}
}
}]
}
},
}
Which is kinda too deeep (as usual with ES), but clean: bucket.platform.hits.hits.first._source.platform
If you don't necessarily need to get the value of platform.id, you could get away with a single aggregation instead using a script that concatenates the two fields name and url:
aggs: {
platforms: {
terms: {script: 'doc["platform.name"].value + "," + doc["platform.url"].value'}
}
}
I am working with Coldfusion and jqgrid.
Is there a way to populate the colModel editoptions dynamically from query results?
If you need to set dynamically the options like 1:female;2:male, then I suppose that you fill grid with data which contains 1 or 2 in the specified column. So you have to use formatter: "select" (see the documentation). Thus you should be able to set the properties like below
{name: "sex", formatter: "select", editoptions: { value: "1:female;2:male" }}
If you need to set such options dynamically, that you want to load the information about editoptions.value from the server.
The most native callback which you can use for it is beforeProcessing. The callback will be processed before the data returned from the server will be displayed using the formatter. So one can make any changes of formatoptions or editoptions.
If the server response looks now like
{
"rows": [
{"id": 123, "name": "John", "sex": "2"},
{"id": 456, "name": "Mary", "sex": "1"}
]
}
then you can extend the data of the server response to the following
{
"rows": [
{"id": 123, "name": "John", "sex": "2"},
{"id": 456, "name": "Mary", "sex": "1"}
],
"colModelExtentions": {
"sex": {"formatter": "select", "editoptions": {"value": "1:female;2:male"}}
}
}
In the way you specify some changes of specific items of the colModel directly inside of the server response. The implementation of the beforeProcessing callback which process such data can looks like
beforeProcessing: function (data) {
var cmName, cmExt = data.colModelExtentions, $self = $(this),
p = $self.jqGrid("getGridParam");
for (cmName in cmExt) {
// enumerate properties of colModelExtentions like sex
if (cmExt.hasOwnProperties(cmName)) {
$self.jqGrid("setColProp", cmName, cmExt[cmName]);
}
}
}
and to define the "sex" columns in colModel like
{name: "sex", width: 50}
You will find more details about the scenario in the answer and this one. You can extend the information which return the server. In the case you can need to call setColWidth or setLabel additionally to apply dynamically the column width and the text of the column header.
I am using they JqueryUI autocomplete plugin to return an autosuggest list of music artists as you begin typing their names in to a text field. I am using the Echo Nest API as the data source.
The code I am currently using is as follows:-
jQuery.ajaxSetup({cache:true});
$("#form-field-influence .text" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "http://developer.echonest.com/api/v4/artist/suggest",
dataType: "jsonp",
data: {
results: 12,
api_key: "my_API_key",
format:"jsonp",
name:request.term
},
success: function( data ) {
response( $.map( data.response.artists, function(item) {
return {
label: item.name,
value: item.name,
id: item.id
}
}));
}
});
},
minLength: 1,
delay: 0,
select: function( event, ui ) {
$("#log").empty();
$("#log").append(ui.item ? ui.item.id + ' ' + ui.item.label : '(nothing)');
},
});
Now, although this works perfectly and gives me an autocomplete list I need to turn this into a multiple select field allowing me to essentially 'tag' with as many artists as a user wishes.
I have found several plugins which offer this functionality. Most recently I have been playing with the 'tokenInput' plugin. owever this plugin expects the data to be returned in a specific format... Like this:-
[
{"id":"856","name":"House"},
{"id":"1035","name":"Desperate Housewives"},
...
]
I have been using this simple line to initialize the plugin:-
$("#form-field-influence .text").tokenInput(
"http://developer.echonest.com/api/v4/artist/suggest?api_key=my_API_key"
);
However when I have set up tokenInput to read the JSONP data source the results are returned as follows:-
{"response": {"status": {"version": "4.2", "code": 0, "message": "Success"}, "artists": [{"name": "Hold A Candle To This (Alternate Version) (Re-mastered for 'Pirate Radio')", "id": "SOFXGAE12A58A787E3"}, {"name": "Radiohead", "id": "ARH6W4X1187B99274F"}, {"name": "Radio Moscow", "id": "AR3O0021187B999BC8"}, {"name": "The Radio Dept.", "id": "AREKO1L1187B997EFE"}, {"name": "TV on the Radio", "id": "AR0PK561187B9B9EF9"}, {"name": "Joshua Radin", "id": "ARPCRYQ1187FB4ECB8"}, {"name": "The One AM Radio", "id": "ARSHZ531187B99B36F"}, {"name": "Radaid", "id": "ARVGZWZ12086C11298"}, {"name": "New Radicals", "id": "ARL4UQB1187B9B74E3"}, {"name": "Go Radio", "id": "ARQCFYC12A10043E5B"}, {"name": "Radio Slave", "id": "ARKVKKG1187FB3B49A"}, {"name": "Red City Radio", "id": "ARYDXLV11EB9C82776"}, {"name": "Radio Radio", "id": "ARJUCSZ11F4C83E301"}, {"name": "Radikal Guru", "id": "ARCHBIP123526A0E1B"}, {"name": "Radium", "id": "AR8ZGW31187B99F0E5"}]}}
As you can see the data I want is nested within the 'artists' object. Therefore the plugin (and any of the other alternatives I have tried) do not read the data and display it in the drop down list.
Is there any way I can make this data source work with the tokenInput plugin? Alternatively are there any other 'autocomplete tagging' plugings out there that would be able to achieve this functionality?
Many thanks!
http://static.echonest.com/samples/suggest/ArtistSuggestAutoComplete.html :-)
Is there a way to filter the data currently displayed in a jqGrid programmatically (in Javascript, not server-side)? All the search examples seem to depend on using jqGrid's own search UI, which doesn't work for me. For example, I'd like to be able to filter based on user actions elsewhere on a page.
I'm imagining something like
jQuery("#grid_id").filter('CategoryID', selectedCategoryID);
where CategoryID is a column in the grid and selectedCategoryID contains, for example, a value chosen by the user in a select element.
If you want to pre-filter your data first:
$('#myGrid').setGridParam({ data: filtereddataarray }).trigger("reloadGrid");
where filtereddataarray contains only records you want to display for this view
If you want to construct your filter programmatically(I use this method, mostly):
var filters = { "groupOp": "AND", "rules": [{ "field": "id", "op": "eq", "data": "9" }, { "field": "amount", "op": "ge", "data": "10" }, { "field": "name", "op": "cn", "data": "do i"}] };
//To filter:
jqGridFilter(filters , $('#myGrid'));
//To reset:
jqGridFilter(null, $('#myGrid'));
function jqGridFilter(filtersparam, grid) {
grid.setGridParam({
postData: {
filters: filtersparam
},
search: true
});
grid.trigger("reloadGrid");
}
You could pass JSON as the data and use the setGridParam method to reload the data!
I have never tried this and not sure how you would get jqgrid to use your client data rather than hit a URL!
Have you had any luck?