We Keep Coding

How can we use the "name" or "id" attribute values as the data property in Vue JS?

I am working on an SPA application where I have a list of data variables that are used as the <option> tags in the dropdown. I want to navigate to another page on the #change event of the dropdown therefore I want to use either the id or name of the select command as the name of the data property. Here is what I mean:
Here is what I have in the data function:
data(){
return {
participants: [
{ value: 0, linkText: '', linkTerm: 'Select' },
{ value: 1, linkText: '/meetings/participants/create', linkTerm: 'Add New' },
{ value: 2, linkText: '/meetings/participants', linkTerm: 'All Participants' },
],
positions: [
{ value: 0, linkText: '', linkTerm: 'Select' },
{ value: 1, linkText: '/meetings/positions/create', linkTerm: 'Add New' },
{ value: 2, linkText: '/meetings/positions', linkTerm: 'All Positions' },
],
}
}
Here is the select tag where I use the above data variables as the <option> tag:
<select name="participants" id="participants" class="select-field" #change="changeRoute($event)">
<option v-for="p in participants" :value="p.value">{{ p.linkTerm }}</option>
</select>
Now I want to have one function changeRoute($event) from which I will navigate to different pages, therefore I want to use the id or name value as the data property, here is the function:
methods:{
changeRoute($event){
var name = $event.target.name;
var value = document.getElementById($event.target.id).value;
}
}
Here in the above function I want to use the name as the data property as below:
I want to write this:
this.name[value].linkText;
And because name here is the name of the tag which is actually participants so the above line of code should mean something like this:
this.participants[value].linkText
And that should return the linkText of the participants object of the data function.
Any help is appreciated in advance.

Change the below line
this.name[value].linkText;
to
this[name][value].linkText;

How to search datatable using column name?

I am trying to search and filter data in datatable based on two columns.
Below is the code that I am using for search and redrawing the datatable.
(http://live.datatables.net/hapijuri/1/edit)
$(document).ready( function () {
var table = $('#example').DataTable({
"columns": [
{ title: 'title0', name: 'name0'},
{ title: 'title1', name: 'name1'},
{ title: 'title2', name: 'name2'},
{ title: 'title3', name: 'name3'},
{ title: 'title4', name: 'name4'},
{ title: 'title5', name: 'name5'},
]
});
table.column(1).search('Software Engineer')
.column(0).search('Bradley Greer').draw();
} );
The problem with this code is that it works on the column number (or index) and not on column name, however I have the column names on which I want to search.
Is there any way to search based on column name instead of index in datatables jquery?
Edit: Providing additional details to make sure I am able to present the question well.
So I have a datatable shown on UI and I am building a pivot table (using pivottable.js) in another tab using the datatable data.
On clicking the numbers in the pivot, I want the datatable data on the UI to be filtered so that it shows only those rows which are relevant to the number being clicked in pivot.
I am getting the column name and value corresponding to that number from pivot. I just need to search those column values in the datatable and show the filter the datatable accordingly.
As pointed in the example link that I shared, I am able to search through the data based on column index and the same is getting reflected on the UI.
What I am looking for is searching based on column name instead of column value.

For preventing a column being searched from table you have to add searchable:false. by default value of searchable & orderable is true.
var table = $('#example').DataTable({
"columns": [
{ title: 'title0', name: 'name0', "searchable": true},
{ title: 'title1', name: 'name1'},
{ title: 'title2', name: 'name2'},
{ title: 'title3', name: 'name3'},
{ title: 'title4', name: 'name4'},
{ title: 'title5', name: 'name5'},
]
});
no need to add below code unless you have server side data processing.
table.column(1).search('Software Engineer')
.column(0).search('Bradley Greer').draw();

Search a datatable using the column name
var table = $('#datatable-name').DataTable();
table.column('columnname:name').search("keyword").draw();

Insert New Column To Kendo Datagrid

I Got Columns are quantity,Totalprice in my kendo grid. Then I want to add calculated column to my datagrid.
for example:
$("#gridcolumnadd").click(function (e) {
//1.add new column code Column Name is "Price For per kg"
//2.Set Column type is number
//3.Set Column aggregate is sum for footerTemplate
//4.add calculated values ex:(Totalprice/quantity) to "Price For per kg" with using for loop row count.
//redraw datagrid
});
Is possible to make it in kendo datagrid?
**
NOTE
I WANT TO CREATE DATAGRID FIRSTLY THEN ADD NEW COLUMN WITH ITS CALCULATION. THATS THE REASON "I WRITE JUST BUTTON CLICK"
**
For example; It is not working
var raw = grid.dataSource.data();
var length = raw.length;//if ı have many data . I can use For Loop
raw[0].new="Test"; //I think one data we have it
grid.columns.push({ field: "new" });
grid.dataSource.data(raw);

Some tips:
Instead of adding a column you should show and hide a column otherwise you will have to destroy current grid and create a new one (pretty expensive).
Have it created from the beginning. You might have fields in your model that are actually not coming from the server or you can have fields that are not in the model. You should decide.
Don't understand what do you mean by Set Column aggregate is sum for footerTemplate. As far as I understand you want to define an aggregate of a column so you should take a look into columns.aggregate.
Is this an editable grid? If not I do recommend to compute it when you receive the data from the server using either dataBound event handler or even using DataSource schema.parse
Lets see how this fits together...
This is my original schema:
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { type: "number" },
ProductName: { type : "text" },
UnitPrice: { type: "number" },
UnitsInStock: { type: "number" }
}
},
...
The first thing is add the Total which equals UnitPrice times UnitsInStock where I'm going to use parse.
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { type: "number" },
ProductName: { type : "text" },
UnitPrice: { type: "number" },
UnitsInStock: { type: "number" },
Total: { type: "total" }
}
},
parse : function (d) {
$.each(d, function(idx, elem) {
elem.Total = elem.UnitPrice * elem.UnitsInStock;
})
return d;
}
},
as you can see I've added an extra field Total and then in parse I iterate to compute the total for each record.
Next is define an aggregate that computes the total for all the data received.
aggregate: [
{ field: "Total", aggregate: "sum" }
]
This simple!
Now lets define the columns of my grid:
columns: [
{ field: "ProductName", title : "Name" },
{ field: "UnitPrice", title: "Price" },
{ field: "UnitsInStock", title:"Units" },
{
field: "Total",
title:"Total",
hidden: true,
aggregates: [ "sum" ],
footerTemplate: "#= sum #"
}
]
Here what is important is Total column where:
* I define as (initially) hidden using hidden: true.
* I also define an aggregate that is the sum.
* And finally I define a template for printing it.
Finally, I don't need to redraw the grid, it is enough invoking columnShow...
$("#gridcolumnadd").click(function (e) {
$("#grid").data("kendoGrid").columnShow(3);
});
All this together here : http://jsfiddle.net/OnaBai/63mg9/

Dynamically adding options and optgroups in Select2

With the following html:
<input type='hidden' id='cantseeme'>
I'm having no trouble creating a Select2 control dynamically, and adding my options:
// simplified example
var select2_ary = [];
select2_ary.push({
id : "one",
text : "one"
});
select2_ary.push({
id : "two",
text : "two"
});
$("#cantseeme").select2({
placeholder : "Pick a number",
data : select2_ary
});
However, I can't seem to figure out how to add optgroups this way. I found this discussion on github, and this article on a blog, but the former doesn't seem to discuss dynamic optgroup additions and I simply can't make any sense of the latter.
Anyone have any ideas?

I found the answer buried inside the github discussion you linked to, the object structure for optgroups is as follows:
{
id : 1,
text : 'optgroup',
children: [{
id : 2,
text: 'child1'
},
{
id : 3,
text : 'nested optgroup',
children: [...]
}]
}
Demo fiddle

Yes, koala_dev's answer above is correct. However, if you do not want option group headers to be selectable tags, then remove the "id" field from headers that you pass into select2. Children[ ] items still need an "id" field to be selectable. For example:
// `Header One` Is Selectable
[{
id : 0,
text : "Header One",
children : [{
id : 0,
text : "Item One"
}, {
...
}]
}]
// `Header One` Is Not Selectable
[{
text : "Header One",
children : [{
id : 0,
text : "Item One"
}, {
...
}]
}]

Javascript Cart

I'm using SimpleCart JS for a project I'm currently working on, but I have a few glitches.
When I attempt to remove an item from the cart, it does absolutely nothing... There is documentation for SimpleCart but i assumed it would work as default functionality?
Where or how i do enitiate a remove.item(); function?
Documentation is available here: http://simplecartjs.org/documentation/simplecart-item-remove
simpleCart({
// array representing the format and columns of the cart,
// see the cart columns documentation
cartColumns: [
{ attr: "name" , label: "" } ,
{ attr: "quantity" , label: "" } ,
{ view:'remove', label: '' } ,
{ attr: "price" , label: "", view: 'currency' }
],
I hope i asked this question clear enough! Thank's again.