Develop Reference

jquery kendo grid filter property is undefined

I have a jquery function that should filter the datasource based on the Service Type value of the button that was clicked.
I used this post on telerik to get my guidance:
Adding filters to Grid's source
From that, I created this buttonFilter() function:
function buttonFilter() {
var buttonText = 'All';
var button = $('#ReadTypeBtnGroup > button.btn.btn-default.active');
if (button != null) {
buttonText = button.val();
}
console.log('buttonFilter:: buttonText: ' + buttonText);
var dataSource = $('#grid').data('kendoGrid').dataSource;
if (dataSource.filter() != undefined) {
dataSource.filter().length = 0; // remove any existing filters
}
if (buttonText != 'All') {
dataSource.filter().push({ field: "serviceType", operator: 'eq', value: buttonText });
}
return buttonText;
}
The error I am getting is:
Uncaught TypeError: Cannot read property 'push' of undefined
The filter() property is supposed to be an array, but I am not great when it comes to javascript or jquery.
What am I doing wrong?

You got it wrong. You can't change filter properties changing the result of filter() method. Instead, you have to use it passing parameters. That method only returns readonly values.
Example:
var filters = dataSource.filter(); // Getting current filters
dataSource.filter(null); // Clearing filters
dataSource.filter({ field: "abc", value: "1" }); // Setting new filters
Always check the docs

#Dontvotemedown is largely correct, and that answer will work well for what you specifically want to do (i.e. clear filters completely and apply your own). However, if you want to manually add a filter to existing filters, your original path was close to correct. I found this answer in my original search, then this when I couldn't add to an undefined filter. My full solution for adding a filter, either to an undefined filter set, or along with an existing one:
var grid = $("#ActivityGrid").data("kendoGrid");
var dataSource = grid.dataSource;
var gridFilter = dataSource.filter();
var upcomingFilter = {
field: "ActivityDate",
operator: "gte",
value: new Date(),
FilterName: "UpcomingOnly"
};
if ($("#UpcomingOnlyCheckbox")[0].checked) {
if (gridFilter == undefined) {
dataSource.filter(upcomingFilter);
}
else {
gridFilter.filters.push(upcomingFilter);
dataSource.filter(gridFilter);
}
}

I had the same problem. If no filters exist, dataSource.filter() returns undefined which is a problem if you want to add filters. But using something like
dataSource.filter({ field: "abc", value: "1" });
results in a datasource read operation which was undesired in my case. Therefore I manipulated the datasource properties.
var grid = $("#grid").data("kendoGrid");
var dataSource = grid.dataSource;
var filterConfig = dataSource.filter();
if (typeof filterConfig == 'undefined') { //no filters exist
filterConfig = { filters: [], logic: "and" };
grid.dataSource._filter = filterConfig;
}

Finding Table Start Location Index using Google Docs API

I want to make a InsertTableRow Request via Docs API and it requires a TableStartLocation.
I used
var tableName = table[0];
foreach (var element in document.Body.Content)
if (element.Table != null)
{
var checkTable = element.Table.TableRows[0].TableCells[0].Content[0].Paragraph.Elements[0]
.TextRun.Content.TrimEnd('\n'); //Get Text Value in first cell of the table
if (tableName.Equals(checkTable)) // Check if the table is the table that I want to add rows
{
Console.WriteLine("Add Table Row");
TableUpdateRequest(ref requests, table, element.StartIndex); // Using element(StructuralElement) to get StartIndex
break;
}
}
To find all table in a document and tried to use the element.StartIndex as Table Start Location but i got: Google.GoogleApiException : Google.Apis.Requests.RequestError Invalid requests[5].insertTableRow: Invalid table start location. Must specify the start index of the table. [400]
What is a suitable index for Table Start Location?

The tableStartLocation is necessary to identify the correct table
A way to retrieve it is e.g. with documents.get. To narrow down the results you can specify fields, e.g. body/content(startIndex,table).
This will return you a resource of the type
{
"body": {
"content": [
{},
{
"startIndex": 1
},
{
"startIndex": 2,
"table": {
"rows": 4,
"columns": 3,
"tableRows": [
{
...
In other words: You know now that your tableStartLocation is 2 - same as the table's startIndex.
Sample
var resource = { "requests": [
{
"insertTableRow": {
"tableCellLocation": {
"tableStartLocation": {
"index": 2
}
},
"insertBelow": false
}
}
]
}
Docs.Documents.batchUpdate(resource, documentId);
Now, depending on your document, you might have several tables and might want to compare names etc. before deciding which is the start index of the correct able.

Get value from nested JavaScript object in CasperJS

I'm trying to dig into a nested javascript array to grab the first instance of an object. Here's the code:
var utils = require('utils');
var casper = require('casper').create();
casper.start('http://en.wikipedia.org/wiki/List_of_male_tennis_players', function() {
this.echo(this.getTitle());
// Get info on all elements matching this CSS selector
var tennis_info_text = this.evaluate(function() {
var nodes = document.querySelectorAll('table.sortable.wikitable tbody tr');
return [].map.call(nodes, function(node) { // Alternatively: return Array.prototype.map.call(...
return node.textContent;
});
});
// Split the array into an array of object literals
var tennis_data = tennis_info_text.map(function(str) {
var elements = str.split("\n");
var data = {
name : elements[1],
birth : elements[2],
death : elements[3],
country : elements[4]
};
return data;
});
// Dump the tennis_names array to screen
utils.dump(tennis_data.slice(1,5));
});
casper.run();
The result of stdout is this:
{
"name": "Acasuso, JoséJosé Acasuso",
"birth": "1982",
"death": "–",
"country": " Argentina"
},
{
"name": "Adams, DavidDavid Adams",
"birth": "1970",
"death": "–",
"country": " South Africa"
},...
For the name element, I'm getting everything from the tr row, which matches 2 elements when you look at the target url source. What I want is just the second part of the name element with class "fn"; for instance: "David Adams", "José Acasuso". I'm thinking something like name:elements[1].smtg should work, but I've had no luck.
Additionally, how would I print the available object keys from the elements object?

The problem is that the first cell contains two elements which contain the name and first name of the player with different ordering. When taking the textContent of the whole cell, both name representations are put into the same string, but in the browser only one of them is visible. If you want only to access the visible one, you need to explicitly crawl it.
You could write a custom function that removes the duplicate name from the string, but it is easier to just take the correct element's textContent.
This can be easily done in the page context:
var tennis_data = this.evaluate(function() {
var nodes = document.querySelectorAll('table.sortable.wikitable tbody tr');
return [].map.call(nodes, function(node) {
var cells = [].map.call(node.querySelectorAll("td"), function(cell, i){
if (i === 0) {
return cell.querySelector(".fn").textContent;
} else {
return cell.textContent;
}
});
return {
name: cells[0],
birth: cells[1],
...
}
});
});
Additionally, how would I print the available object keys from the elements object?
elements is an array of strings so there are no keys that you can access besides the array indexes and array functions.

Jquery: Autocomplete with label

I am trying to learn website development.
While learning autocomplete feature of jquery, I tried to put in the labels.
function autocomplete (data) {
var data = data.toString();
var availableTags = data.split(',');
var autocompleteData = [];
for (var i = 0; i < availableTags.length; i++){
autocompleteData[i] = {};
autocompleteData[i].label = i.toString();
autocompleteData[i].value = availableTags[i];
}
$("#tags").autocomplete({
source: autocompleteData,
select: function (event, ui) {
printautocomplete(event, ui)
}
});
};
The autocomplete[i].value is a valid string.
autocompleteData[0]
Object {label: 0, value: "Peter"}
However, I do not see any suggestions.
What is wrong with the way I am using the API?
The API says:
"Array: An array can be used for local data. There are two supported formats:
An array of strings: [ "Choice1", "Choice2" ]
OR An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]
The label property is displayed in the suggestion menu. The value will be inserted into the input element when a user selects an item. If just one property is specified, it will be used for both, e.g., if you provide only value properties, the value will also be used as the label. "
Thank you.

$('#sidebarSearch').autocomplete(
{
source: function(query, result)
{
var query = $('#sidebarSearch').val ();
$.ajax(
{
url:"sidebarSearchFetch.php",
method:"POST",
data:{query:query},
dataType:"json",
success:function(data)
{
result($.map(data, function(item)
{
return {
label: item.name,
value: item.usrId
};
}));
}
})
},
appendTo: "#sidebar-form"
});

I am skeptical of line 2 in your code (var data = String()data;) I would use: var data = data.toString();
But if you are sure that the autocompleteData elements do indeed have valid strings, then my best guess would be that perhaps you forgot to give the '#tags' id to your html entry field element.
Finally, if this is not it, to troubleshoot, I would try removing the select: option from the object you are passing to autocomplete() in the line that begins: $("#tags").autocomplete(... so that only the source options is passed.
Another thing to check out is when the code is being run. It is possible that a document.ready() function is needed to ensure that that when the autocomplete feature is added to the DOM element with the id '#tags', that the element has already been created.

The autocomplete works fine. Instead of completing "value", it completes "label".
So when I type in "1", it suggests "1", "10", "11", etc.
Autocomplete applying value not label to textbox answers how to change to to by-value.

make json from table

I want to make specific json from table. I have a table, which has rows and 4 columns.
Here is my table I want to build an jsonarray from the table.
First value in the left column is key of json and last value in the right column is a valueof json.
I mean I want to get from table jsonarray, it must look as
json_from_form = [{color: 'id',
name: "mouse",
x: "table",
y: "book"}];
I have tried to build json, but have a problem with structure and setting a key in json object.
Please help me to buld right structure of json object.
var json_from_form_tmp = {};
$('#table').find('tbody tr').each(function (i) {
//var name = $(this).find('td:first').text();
json_from_form_tmp[i] = {
imd: $(this).find('td:eq(3) input').val()
};
});
console.log(json_from_form_tmp);
Here is my DEMO

You should use the jQuery map-function for this, here is an example:
$(function () {
var m = $("table tr").map(function (index, e) {
return {
color: $(e).children().eq(0).text(),
name: $(e).children().eq(1).text()
}
}).get();
});
Where m will be an array of objects as defined inside the map function.

To set a property of the object (json_from_form_tmp), use the ['propertyName'] notation.
//get the name of the property from the first column
var name = $(this).find('td:first').text();
//use that name as the name of the property. Your value fetch was right!
json_from_form_tmp[name] = $(this).find('td:eq(3) input').val();
Here is your fiddle with a tiny modification.
http://jsfiddle.net/bMzq8/32/