How do I change array variable - javascript

I have an variable array called data, for IGcombobox datasource, I want to change the array when I click my #select, how can I do that? With this code it doesn't change the variable. Also I could just use php, but I dont want to do that!
<div id="checkboxSelectCombo" name="kanal" style="position:absolute;" ></div>
<select id="seade" name="seade">
<?php for($i = 1; $i <= $devi; $i++) {
echo '<option value="' . $i . '">' .$device_name[$i]. '</option>';
} ?>
</select>
$(function () {
var data = [
{ ID: "1", Name: "Vooluandur 1" },
{ ID: "2", Name: "Meeter 1" }
];
$("#seade").on('click', function(event) {
console.log($("#seade").val());
if ($("#seade").val() == 2) {
var data = [
{ ID: "3", Name: "Vooluandur 2" },
{ ID: "4", Name: "Meeter 2" }
];
}
});
$("#checkboxSelectCombo").igCombo({
width: "100px",
dataSource: data,
textKey: "Name",
valueKey: "ID",
multiSelection: {
enabled: true,
showCheckboxes: true
}
});
});

You could try this: (didn't run it though)
$("#seade").on('change', function(event) {
if (this.value == 2) {
data = [
{ ID: "3", Name: "Vooluandur 2" },
{ ID: "4", Name: "Meeter 2" }
];
}
});

Had found something to refresh the datasource hope it will work
where you update your "data" variable below that put this line
$("#checkboxSelectCombo").igCombo("option", "dataSource", data);
This should change the dataSource and rebind the combo.

I found a solution, since changing data variable doesn't affect igCombo datasource, I can just change datasouce variable like this
var data2 = [{
ID: "3",
Name: "Vooluandur 2"
},
{
ID: "4",
Name: "Meeter 2"
}
];
$("#seade").on('change', function(event) {
if (this.value == 2) {
$("#checkboxSelectCombo").igCombo({
dataSource: data2,
textKey: "Name",
valueKey: "ID",
});
}
});
Documentation source: http://www.igniteui.com/help/igcombo-data-binding

Related

Show key as value in datatable

Hi I'm currently having trouble with datatable. My datasource is object and I want every first key in the object displayed as value in datatable. Here is my code.
var my_data = {
"content": [
{
"data_v1": [{"id" : 1}]
},
{
"data_v2": [{"id" : 2}]
},
{
"data_v3": [{"id" : 3}]
}
]
};
$(document).ready(function() {
$('#example').DataTable( {
data:my_data,
columns: [
{ data: 'content'
}
]
} );
} );
What output I expect is this.
| Content |
-------------
data_v1
data_v2
data_v3
Note: As long as posible, I don't want to use forloop or any kind of loop. TIA
Any help will be so much appreciated.
Try
var myData = {
"content": [
{
"data_v1": [{"id" : 1}]
},
{
"data_v2": [{"id" : 2}]
},
{
"data_v3": [{"id" : 3}]
}
]
};
$(document).ready(function()
{
$('#example').DataTable( {
data: Object.keys(myData["content"]),
columns: [
{ title: 'content'
}
]
});
});
Object.keys will return an array of keys from the data provided
This answer is from #colin of Datatable.
$(document).ready(function() {
var my_data = {
"contents": [{
"data_v1": [{
"id": 1
}]
},
{
"data_v2": [{
"id": 2
}]
},
{
"data_v3": [{
"id": 3
}]
}
]
};
var table = $('#example').DataTable({
data: my_data.contents,
columnDefs: [{
targets: 0,
render: function(data, type, row, meta) {
return (Object.keys(row)[0]);
}
}]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet"/>
<table id="example"></table>

mongo update script: change fields in embedded documents

I am writing a script to update(add and rename) certain fields, which are part of an embedded document within the ones stored in the db collection.
to give an example document:
{
_id: UUID("025bda29-0d09-4923-8f7f-ea2e825be2c8"),
name: "test",
sets: [
{
"name": "1",
"values": [
{
name: "a",
value: 5
}
]
},
{
"name": "2",
"values": [
{
name: "a",
value: 3
}
]
}
]
}
This is my script:
function convertGroup (group) {
for (var i = 0; i < group.sets.length; i++) {
var set = group.sets[i];
var oldValuesField = "sets." + i.toString() + ".values";
var mainValuesField = "sets." + i.toString() + "mainValues";
var additionalValuesField = "sets." + i.toString() + ".additionalValues";
db.getCollection('group').updateOne({
"_id" : group._id
}, {
$set: {
mainValuesField : set.values,
additionalValuesField : [ ]
},
$unset: {
oldValuesField: ""
}
});
}
}
db.getCollection('group').find({'sets.0.mainValues': {$exists: false}}).forEach(convertGroup);
According to the documentation the $rename does not work on arrays, that is why I used set and unset.
what happens when I run this code, is that I get the mainValues field and additionalValues field in the group document, and not in the set documents.
this is what I want it to become:
{
_id: UUID("025bda29-0d09-4923-8f7f-ea2e825be2c8"),
name: "test",
sets: [
{
"name": "1",
"mainValues": [
{
name: "a",
value: 5
}
],
"additionalValues": [ ]
},
{
"name": "2",
"mainValues": [
{
name: "a",
value: 3
}
],
"additionalValues": [ ]
}
]
}
Can anyone explain to me why this happens and how I can make this work the way I want it to?
I managed to fix it by rewriting the script like this:
function convertGroup(group) {
group.sets.forEach(function (set) {
if (!set.mainValues) {
$set : {
set.mainValues = set.values
}
}
if (!set.additionalValues) {
$set : {
set.additionalValues = []
}
}
});
db.getCollection('group').update({'_id': group._id}, group);
}
db.getCollection('group').find({'sets.mainValues': {$exists: false}}).forEach(convertGroup)
the different is mostly not using the notation 'sets.[index].values' but editing it directly on the json and using 'update' instead of 'updateOne'

Changing js array on a html

I want to manipulate an js array after a click but its not triggering.
example is here
https://datatables.net/examples/data_sources/js_array.html
what did i do is: (i need to re set dataset which is loaded into table previously please take a look at above example)
$(document).ready(function() {
$(".retrievemenu").click(function() {
//alert( this.id );
//$('#menus').hide();
var restid = this.id;
data = [
["sasa", "a", "a"]
];
$.post("server.php", {
retrievemenu: 1,
restid: restid
}, function(data) {
console.log(data);
$('#menus').hide();
$('#menus').DataTable({
data: data,
columns: [{
title: "Restaurant Name"
}, {
title: "Menu Name"
}, {
title: "Actions"
}
]
});
$('#menus').show();
});
});
});

Kendo ui grid: change field type depending in the row

I'm having a issue that I dont know how to afford. I have a kendo grid which is being poblated with a json file.
The issue is that in the json file there is a field that has a different type in different elements.
I'll explain myself with an example:
"listaPreguntas": [
{
"idPregunta": 1126,
"idTipificacion": 1712,
"tipoPregunta": "E",
"pregunta": "¿DE QUE COLOR ES?",
"numeroOrden": 2,
"respuestasPosibles": [
{
"idRespuestaPosible": 1066,
"respuestaPosible": "HOSPITAL"
},
{
"idRespuestaPosible": 1068,
"respuestaPosible": "AMBULATORIO"
},
{
"idRespuestaPosible": 1070,
"respuestaPosible": "CENTRO SALUD"
},
{
"idRespuestaPosible": 1072,
"respuestaPosible": "UNIDAD MOVIL"
},
{
"idRespuestaPosible": 1074,
"respuestaPosible": "UNIDAD DONACION"
},
{
"idRespuestaPosible": 1076,
"respuestaPosible": "UNIDAD MOVIL (UVI)"
}
],
"idTipoEnumerado": 1
},
{
"idPregunta": 1150,
"idTipificacion": 1712,
"tipoPregunta": "T",
"pregunta": "¿cuantas personas?",
"numeroOrden": 1,
"respuestasPosibles": null,
"idTipoEnumerado": 0
},
{
"idPregunta": 1152,
"idTipificacion": 1712,
"tipoPregunta": "F",
"pregunta": "¿Mayores?",
"numeroOrden": 3,
"respuestasPosibles": null,
"idTipoEnumerado": 0
}
You can see three objects in the json file, the first object has a type "E" and has six possible values, the second object has a type "T" (Text) and the last one is a boolean.
What i need is to show in the grid a column which type change depending on the type of the json. I need to have a text value in some cases, a checkbox and a dropdownbox.
I hope you could understand me.
Thanks in advance.
Here is example for custom editor from http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.editor
$("#grid").kendoGrid({
columns: [ {
field: "name",
editor: function(container, options) {
var input = $("<input/>");
input.attr("name", options.field);
input.appendTo(container);
if(options.model.tipoPregunta == 'E')
{
input.kendoDropDownList( ... );
}
if(options.model.tipoPregunta == 'T')
{
....
}
if(options.model.tipoPregunta == 'F')
{
....
}
}
} ],
editable: true,
dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});
options.model is a row dataItem
You just need to create a template for your column in your grid config:
columns: [{
field: "respuestasPosibles",
template: function(e){
if ( (e.tipoPregunta === 'E') && $.isArray(e.respuestasPosibles) ){
var st = '';
$.each(e.respuestasPosibles, function(i, a){
st += a.respuestaPosible + '(' + a.idRespuestaPosible + ')<br>';
});
return st;
}
else{
// The cell will be empty
return '-';
}
}, ....
]

adding client events to telerik drop down list makes it static

I am trying to add client events to a telerik dropdownlist, but doing so makes it static. By static I mean it doesnt behave as a dropdown list anymore, Its doesnt respond when I click and hence cant view/select values. But as soon as I change the dropdown list to a combobox it works perfectly fine. It lets me click and view/select values.
Why is this happening? why can I add client events to a telerik combobox but not to a telerik dropdown list?
Here is how I populate Combo Box:
<%= Html.Telerik().ComboBox().Name("ComboBox")
.HtmlAttributes(new { #id = "ComboBox", #style = "width:104px;" })
.ClientEvents(events =>
{
events.OnDataBinding("ComboBox_onDataBinding");
})%>
function ComboBox_onDataBinding(e) {
var comboBox = $('#ComboBox').data('tComboBox');
comboBox.dataBind([
{ Text: "Product 1", Value: "1" },
{ Text: "Product 2", Value: "2", Selected: true },
{ Text: "Product 3", Value: "3" },
{ Text: "Product 4", Value: "4" },
{ Text: "Product 5", Value: "5" }
], true);
};
Here is how I populate drop-down list:
<%= Html.Telerik().DropDownList().Name("DropDownList")
.HtmlAttributes(new { #id = "DropDownList", #style = "width:104px;" })
.ClientEvents(events =>
{
events.OnDataBinding("DropDownList_onDataBinding");
})%>
function DropDownList_onDataBinding(e) {
var dropDownList = $('#DropDownList').data('tDropDownList');
dropDownList.dataBind([
{ Text: "Product 1", Value: "1" },
{ Text: "Product 2", Value: "2", Selected: true },
{ Text: "Product 3", Value: "3" },
{ Text: "Product 4", Value: "4" },
{ Text: "Product 5", Value: "5" }
], true);
};
Thanks in advance.
In your case, when you don't use Ajax or WebService client side databinding, you shouldn't configure OnDataBinding event handler. You need to configure OnLoad instead:
.ClientEvents(events => events.OnLoad("ddl_onLoad").OnChange("ddl_onChange")
handlers:
function ddl_onLoad(e) {
var ddl = $(this).data('tDropDownList');
ddl.dataBind([
{ Text: 'Product 1', Value: '1' },
{ Text: 'Product 2', Value: '2', Selected: true },
{ Text: 'Product 3', Value: '3' },
{ Text: 'Product 4', Value: '4' }
], true);
}
function ddl_onChange(e) {
//var ddl = $(this).data('tDropDownList');
console.log(e.value);
}
you're calling .dataBind() inside the OnDataBinding handler, which is just going to trigger the OnDataBinding event again, and again...
consider doing your client side databinding inside the OnLoad event or something

Categories

Resources