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
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>
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'
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();
});
});
});
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 '-';
}
}, ....
]
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