KendoUI Autocomplete with external datasource - autocomplete

need some help before my brain explodes..
cant seem to understand what im doing wrong
have a quite simple autocomplete.
$(document).ready(function () {
var data =new kendo.data.DataSource({
serverFiltering: true,
transport: {
read: "data/output.txt"
}
});
$("#input").kendoAutoComplete({
dataSource: data
});
});
But no matter how hard i try i dont get the result i want, just the list with one letter vertical..?
I dont know how am the external file supposed to look? as now it just is:
"value1",
"value2",
"value3"

This is happening because your dataSource thinks that the source is the string which is the content of that text document and it creates one item for each of the chars in the string.
Either use local binding like here.
Or create a service/action which will serve you the data as a proper json,odata or whatever. That text file which contains the symbols is not a good idea.

The way that you are returning the data is not the most convenient. You should try to return it as a JSON array:
[
"text1",
"text2",
"text3"
]
But, KendoUI developers are really nice guys and allow you to define a parse function in the DataSource.schema where you can convert formats.
Try using the DataSource defined as follow:
var data = new kendo.data.DataSource({
serverFiltering:true,
transport :{
read:"data/output.txt"
},
schema :{
parse:function (a) {
return JSON.parse("[" + a + "]");
}
}
});

Related

Mongoose: Delete Item - First One always gets deleted

I am completely new to the fields of Mongoose and MongoDB.
I am currently trying trying to remove one element from my database.
This is my code so far:
My issueModel:
var mongoose = require('mongoose'); // loading module for mongoose
var db = mongoose.connect('mongodb://localhost/issuedb');
var issueSchema = new mongoose.Schema({
title: String,
description: String,
priority: String,
status: String
});
// Constructor Function:
var issueModel = mongoose.model('issues', issueSchema); // have to give the
name of the collection where the element should be stored + Schema
// Export this Construction Function for this Module:
module.exports = issueModel; // careful: module != model !
My post method for using the delete method:
// creating the router for deleting one item:
router.post('/delete/:id', (req, res) => {
console.log(req.params.id);
issueModel.remove({id: req.params.ObjectId})
.setOptions({ single: true }).exec(function (err, deleted) {})
.then(issues => res.render('issue', {issues: issues}));
The thing i would like to do here is using the object id - which is correctly stored in req.params.ObjectID according to my console.log, and deleting the corresponding object.
But currently , when i have got a table with about 3-4 entries, always the first one gets deleted. Why is that? I am really TOTALLY new and really tried searching a lot, but i could not find any solution until now. I am happy about any tips that would help me.
What am i doing wrong?
The ID in the URL and the Object.ID are the same! Why is the first object deleted then, not the second or the third?
I am hopeless right now.
I also read about the remove() option not being really used in todays time. But we were told at university to use this method right now.
I also tried findOneByID and delete methods i found in the mongoose database.
If you need any more code please let me know!
You can use one of the convenience methods for this: findByIdAndRemove:
issueModel.findByIdAndRemove(req.params.ObjectId, function(err) {
if (err) { ... failed }
});
This will remove a whole document matching the ID which I think its what you want, if you want to a remove property from a document that's a different query.
If you don't use one of the convenience methods which just take IDs (have ById in them), then you have to convert your ID from a string to an ObjectId:
const { ObjectId } = require('mongodb');
issueModel.remove({ id: ObjectId(req.params.ObjectId) }).setOptions({ single: true })

Query sailsjs blueprint endpoints by id array using request

I'm using the request library to make calls from one sails app to another one which exposes the default blueprint endpoints. It works fine when I query by non-id fields, but I need to run some queries by passing id arrays. The problem is that the moment you provide an id, only the first id is considered, effectively not allowing this kind of query.
Is there a way to get around this? I could switch over to another attribute if all else fails but I need to know if there is a proper way around this.
Here's how I'm querying:
var idArr = [];//array of ids
var queryParams = { id: idArr };
var options: {
//headers, method and url here
json: queryParams
};
request(options, function(err, response, body){
if (err) return next(err);
return next(null, body);
});
Thanks in advance.
Sails blueprint APIs allow you to use the same waterline query langauge that you would otherwise use in code.
You can directly pass the array of id's in the get call to receive the objects as follows
GET /city?where={"id":[1, 2]}
Refer here for more.
Have fun!
Alright, I switched to a hacky solution to get moving.
For all models that needed querying by id arrays, I added a secondary attribute to the model. Let's call it code. Then, in afterCreate(), I updated code and set it equal to the id. This incurs an additional database call, but it's fine since it's called just once - when the object is created.
Here's the code.
module.exports = {
attributes: {
code: {
type: 'string'//the secondary attribute
},
// other attributes
},
afterCreate: function (newObj, next) {
Model.update({ id: newObj.id }, { code: newObj.id }, next);
}
}
Note that newObj isn't a Model object as even I was led to believe. So we cannot simply update its code and call newObj.save().
After this, in the queries having id arrays, substituting id with code makes them work as expected!

KendoUI Autocomplete paging issue

I have a textbox bound to KendoUI autocomplete widget. The JS code looks like this:
var dataSourceImeSearch = {
type: "json",
transport: {
read: {
url: "#Url.Action("ImeSearch")",
contentType: "application/json; charset=utf-8",
type: "POST"
},
parameterMap: function (data, type) {
if (type == "read") {
if (data.filter) {
data = $.extend({ sort: null, filter: data.filter.filters[0] }, data);
} else {
data = $.extend({ sort: null, filter: null }, data);
}
return JSON.stringify(data);
} else {
return JSON.stringify({ model: data });
}
}
},
batch: false,
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
schema: {
errors: "Errors",
data: "Data",
total: "TotalRecordCount",
model: myModel
},
error: function (e) {
if (e.errors) {
alert(e.errors);
}
}
};
$("#Ime").kendoAutoComplete({
dataTextField: "PunoIme",
filter: "contains",
minLength: 3,
dataSource: dataSourceImeSearch
});
I am experiencing a weird thing here. Autocomplete is working in terms that when I type the third character it runs to the server and gets JSON data back from there and shows first ten results. The thing is that this textbox is searching large datasets, so for some queries with say 4 characters result set can be more than 1000 items. For some reason the widget is not figuring out that there are more than 10 results and when I scroll down in the autocomplete dropdown which gets shown, it will not fire any search for a second page and so on. You can see that the serverPaging for data source is set to true, but this does not help.
Any help is appreciated. Thank you.
I found out after posting this question that Autocomplete widget does not allow paging by design. This was explained in the KendoUI forums by some Kendo employee as an example of poor UX (if you have autocomplete that needs paging). I would argue that, since in my opinion, the first use case of the autocomplete would be in case of a search of a person, and here I am doing exactly that. The only problem is that if you search by person's second name you can end up with hundreds of results after first 3 or 4 characters and you really need paging for that. If the Kendo people think that this is a case of a bad UX, this should be clearly mentioned in the Autocomplete documentation, and I could really not find any mentioning of it at a single place, and one would think that it might be a good idea to mention something like this to the people so that they don't have to waste all day trying to figure out what went wrong.
In my opinion one of the worst use case examples at all demos at KendoUI web demo pages is the Shared DataSource example, where if you type in 'ch' in the autocomplete textbox in the top, you will end up with 10 results in autocomplete, but 14 in the datagrid bellow. It really strikes me as stupid that nobody in Kendo sees this behavior as odd.
So my answer to my own question would be the following: DO NOT use autocomplete, except in some really really simple use case (I can't really think of a single one that would make sense). I ended up making a whole search form with 5 textboxes and search button in case where I hoped that I was going to be able to use 2 textboxes (one with autocomplete) and a search button.
You have set pageSize:10, which means that only 10 records are returned to the AutoComplete and its dataSource contains only 10 elements, I am afraid that automatic paging is not implemented by default

How to design a REST search with backbone

I'm designing an API and also consuming it with Backbone.js. Part of the API will include search operations. For example when searching for cars, I might have something like:
http://api.mysite.com/search/cars?q=volvo
With backbone, I can see two options for consuming the results.
Option 1: A search is a Collection
var CarSearch = Backbone.Collection.extend({
model: Car,
initialize : function(models, options){
this.query = options.query;
},
url: function(){
return "http://api.mysite.com/search/cars?q="+this.query;
}
});
var volvos = new CarSearch([], {query:'volvo'});
volvos.fetch();
Option 2: A search is a Model, and the results are a Collection
var CarSearchResults = Backbone.Collection.extend({
model: Car
});
var CarSearch = Backbone.Model.extend({
defaults: {
"query":"",
"carSearchResults":null
},
url: function(){
return "http://api.mysite.com/search/cars?q="+this.get('query');
},
parse: function(resp,xhr){
resp.carSearchResults = new CarSearchResults(resp.carSearchResults);
return resp;
}
});
var volvoSearch = new CarSearch();
volvoSearch.set({query:'volvo'});
volvoSearch.save();
What are the advantages / disadvantages of these options? Is there a backbone-y way of designing this?
I'm leaning towards option 2 because it seems easier to add things to the response like pagination details, or a next url. But option 2 seems messier in a couple of ways. For example, would I generate an ID on the server for the search model when it is saved? Don't think I need to get that model by ID, deleting or updating it doesn't really make sense either cause I'm not persisting it.
i dont know if its a good practice,
but i use for my search the "data" option in the "fetch" method.
https://stackoverflow.com/a/6659501/1067061
Maybe it helps.
Good Luck!
EDIT
This is the right way to pass query parameters in your collections url,
The reference to the Docs shows how to pass the data attribute in fetch options, the data attribute is actually an object with key value pairs referring to query params and their values
I would go with option one. At least imo a model should correspond to a single search result and the collection to the entire set of search results. so if you search for volvo and there are 6 items returned, each item should be a model contained within your collection.
Now this will largely depend on how you are representing a result on your server. If say for instance you have car instances then you just do the search server side using the query and return the resulting objects as json. Then you can have the returned list be the collection of car models that match the criteria. but if you are planning on returning the query results some other way then you will have to think about how the model should represent the data
I would recommend using a collection, like in option 1, but without the need to define a new collection just for the search.
Take a look at my blog post about this here: http://willdemaine.ghost.io/restful-search-with-backbone/
var SearchableCollection = Backbone.Collection.extend({},{
search: function(query, options){
var search = $.Deferred();
options = options || {};
var collection = new this([], options);
collection.url = _.result(collection, 'url') + 'search?q=' + query;
var fetch = collection.fetch();
fetch.done(_.bind(function(){
Backbone.Events.trigger('search:done');
search.resolveWith(this, [collection]);
}, this));
fetch.fail(function(){
Backbone.Events.trigger('search:fail');
search.reject();
});
return search.promise();
}
});
Then you can do:
var Cars = SearchableCollection.extend({});
var findCars = Cars.search('volvo');
findCars.done(function(cars){
var carsView = new CarsView({
collection: cars
});
carsView.render();
});

JQGrid Dynamic Select Data

I have utilised the example code at Example Code at this link
and I have got my grid to show a dynamically constructed select dropdown on add and edit. However when it is just showing the data in the grid it shows the dropdown index instead of its associated data. Is there a way to get the grid to show the data associated with the index instead of the index itself.
e.g. the data on my select could be "0:Hello;1:World"; The drop down on the edit/add window is showing Hello and World and has the correct indexes for them. If the cell has a value of 1 I would expect it to show World in the grid itself but it is showing 1 instead.
Here is the row itself from my grid:
{ name: 'picklist', index: 'picklist', width: 80, sortable: true, editable: true,
edittype: "select", formatter: "select", editrules: { required: true} },
I am filling the dynamic data content in the loadComplete event as follows:
$('#mygrid').setColProp('picklist', { editoptions: { value: picklistdata} });
picklist data is a string of "0:Hello;1:World" type value pairs.
Please can anyone offer any help. I am fairly new to JQGrids so please could you also include examples.
I know you have already solved the problem but I faced the same problem in my project and would like to offer my solution.
First, I declare a custom formatter for my select column (in this case, the 'username' column).
$.extend($.fn.fmatter, {
selectuser: function(cellvalue, options, rowdata) {
var userdata;
$.ajax({
url:'dropdowns/json/user',
async:false,
dataType:'json',
cache:true,
success: function(data) {
userdata = data;
}
});
return typeof cellvalue != 'undefined' ? userdata[cellvalue] : cellvalue ;
}
});
This formatter loads up the mapping of id and user in this case, and returns the username for the particular cellvalue. Then, I set the formatter:'selectuser' option to the column's colModel, and it works.
Of course, this does one json request per row displayed in the grid. I solved this problem by setting 10 seconds of caching to the headers of my json responses, like so:
private function set_caching($seconds_to_cache = 10) {
$ts = gmdate("D, d M Y H:i:s", time() + $seconds_to_cache) . " GMT";
header("Expires: $ts");
header("Pragma: cache");
header("Cache-Control: max-age=$seconds_to_cache");
}
I know this solution is not perfect, but it was adequate for my application. Cache hits are served by the browser instantly and the grid flows smoothly. Ultimately, I hope the built-in select formatter will be fixed to work with json data.
If you save in jqGrid ids of the select elements and want to show the corresponding textes then you should use formatter:'select' in the colModel (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:predefined_formatter#formatter_type_select) together with the edittype: "select".
The Usage of stype: 'select' could be also interesting for you if you plan to support data searching.