I have two pick lists in my app, both are dynamic values coming from DB. The values in to second pick list are displayed based the value selected in first pick list. So change event of first pick list the second pick list values should dynamically change with out refreshing the page.
My code is as follows,
Controller:
$.picker.addEventListener('change',function(e){
languageid = e.row.title;
alert("language is : "+ languageid);
movie.fetch({query: "SELECT * FROM movies WHERE id = '"+languageid+"';"});
var column = Ti.UI.createPickerColumn();
movie.each(function(model){
var row = Ti.UI.createPickerRow({
title: model.get("movieName")
});
column.addRow(row);
});
$.picker1.columns = [column];
});
View:
<Alloy>
<Collection src="UserLanguage"/>
<Collection src="movies"/>
<Window class="container">
<Picker id="picker"/>
<Picker id="picker1"/>
</Window>
</Alloy>
Style:
".container": {
backgroundColor:"black"
}
"#picker": {
width: '90%',
top: '25dp'
}
"#picker1": {
width: '90%',
top: '100dp'
}
Model
exports.definition = {
config : {
"columns": {
"id": "text",
"movieName": "text"
},
"adapter": {
"type": "sql",
"collection_name": "movies"
}
}
};
Screenshot result
The select roe count is correct but the text is not visible. Why?
OK, let's start from beginning because current solution is too messy...
View: (Make sure that you have got models/Movies.js)
<Alloy>
<Collection src="UserLanguage"/>
<Collection src="Movies"/>
<Window class="container">
<Picker id="picker"/>
<Picker id="picker1"/>
</Window>
</Alloy>
Controller: (The problem was that #Coyote selects data from table called movie not movies). So it should look like this:
var movies = Alloy.Collections.Movies;
$.picker.addEventListener("change", function(e) {
var column = Ti.UI.createPickerColumn();
movies.fetch({
query: {
statement: "SELECT * FROM movies WHERE id = ?;",
params: [e.row.title] // How can be `title` an id?
}
});
movies.each(function(model) {
var row = Ti.UI.createPickerRow({
title: model.get("movieName")
});
column.addRow(row);
});
$.picker1.columns = [column];
});
Just use the query parameter passed to fetch function :
$.picker.addEventListener('change',function(e){
languageid = e.row.title;
//alert("language is : "+ languageid);
movie.fetch({query: "SELECT * FROM movie WHERE id = '"+languageid+"';"});
var column = Ti.UI.createPickerColumn();
movie.each(function(model){
var row = Ti.UI.createPickerRow({
title: model.get("movieName");
});
column.addRow(row);
});
$.picker1.columns = [column];
});
Related
I am using Master detail in Kendo Grid in AngularJS.
Here is the setup of the code:
In cshtml is:
<script type="text/x-kendo-template" id="template">
<div>
<div class="orders"></div>
</div>
</script>
In the AngularJS controller is
The MasterRowId is the id of the Column in the Master row. So the Master grid is a grid with
columns Id and name
$scope.getorders = function (masterRowId)
{
myservice.getorders(masterRowId)
.then(function (result) {
for (var j = 0; j < result.data.length; j++)
$scope.ordergroupdata.push(result.data[j]);
});
}
In the master grid definition i have
......
detailTemplate: kendo.template($("#template").html()),
detailInit: $scope.detailInit,
The definition of $scope.detailInit is
$scope.detailInit = function (e)
{
$scope.MasterRowId = e.data.Id;
$scope.getorders ($scope.MasterRowId);
var orderdata = $scope.ordergroupdata;
var orderdatasource = new kendo.data.DataSource({
transport: {
read: function (e) {
e.success(orderdata);
},
update: function (e) {
e.success();
},
create: function (e) {
var item = e.orderdata;
item.Id = orderdata.length + 1;
e.success(item);
}
},
schema: {
model: {
id: "Id",
fields: {
OrderId: { type: 'string'},
}
}
},
});
e.detailRow.find(".orders").kendoGrid({
dataSource: orderdatasource,
columns: [
{ field: "OrderId", title: "OrderId" },
]
});
}
The issue is that if i click on the first row , i can retrieve the data according to the MasterRowId from my MVC action method. So If i click on the first row and the MasterRowId is for example 10 , then i get an OrderId of "1234" .
I can click on the second row with MasterRowID of 15 and it will retrieve the OrderId of "8231", BUT if i go back to the first row the data (OrderId) in the details grid is actually the data from the second row, so its "8321" NOT "1234".
How can i always call the $scope.detailInit so that i can go back to the MVC Action method and always retrieve the correct data for that particular row with that MasterRowId ?
Once i expand the row and move on to another row , the detailsInit doesnt get called any more for that row ?
detailInit is only called on first expand, but you can use detailExpand that is called every time you expand the detail table.
Offical example:
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
detailTemplate: "<div>Name: #: name #</div><div>Age: #: age #</div>",
detailExpand: function(e) {
console.log(e.masterRow, e.detailRow);
}
});
</script>
Docs: detailExpand
Official example: detailExpand example
I am using google chart to display my data on screen. Data is aggregated using using one of the column as shown below...
var dataGroup = google.visualization.data.group(
data, // data table
[0], // group by column
[
{ // aggregation column
column: 1,
type: 'number',
aggregation: google.visualization.data.avg
}
]
);
chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(dataGroup, $scope.getOptionsForChart());
Now what I want to do is add row count in tooltip.
THanks in advance.
there are no standard options for adding information to the tooltip,
you must replace the entire tooltip with your own custom one...
two things must be in place to use custom html tooltips...
1) must use the following chart option...
tooltip: {
isHtml: true
}
2) the tooltip column must have the following property...
p: {html: true}
see following working snippet...
an aggregation column is added for the count
then a DataView is used to convert the count column to a tooltip column
however, when using a DataView, for some reason the html column property is ignored
so when the chart is drawn, convert the DataView back to a DataTable,
chart.draw(view.toDataTable(), ...
this will allow the chart to recognize the column property...
google.charts.load('current', {
callback: function () {
var datastring = '{"PerformanceData" : [{"ReportName":"ABC","ReportTime":"48"},{"ReportName":"ABC","ReportTime":"48"},{"ReportName":"XYZ","ReportTime":"50"},{"ReportName":"ABC","ReportTime":"48"},{"ReportName":"XYZ","ReportTime":"50"},{"ReportName":"ABC","ReportTime":"48"},{"ReportName":"XYZ","ReportTime":"50"}]}';
var jsonData = JSON.parse(datastring);
var chartData = [];
// load chart data
jsonData.PerformanceData.forEach(function (row, rowIndex) {
// column headings
var columns = Object.keys(row);
if (rowIndex === 0) {
chartData.push(columns);
}
// row values
var chartRow = [];
columns.forEach(function (column, colIndex) {
var chartCell = row[column];
if (colIndex > 0) {
chartCell = parseFloat(chartCell);
}
chartRow.push(chartCell);
});
chartData.push(chartRow);
});
var data = google.visualization.arrayToDataTable(chartData);
// group data
var dataGroup = google.visualization.data.group(
data, // data table
[0], // group by column
[
{ // average
column: 1,
type: 'number',
aggregation: google.visualization.data.avg,
label: data.getColumnLabel(1)
},
{ // count
column: 1,
type: 'number',
aggregation: google.visualization.data.count
}
]
);
var view = new google.visualization.DataView(dataGroup);
view.setColumns([0, 1, {
type: 'string',
role: 'tooltip',
calc: function (dt, row) {
return '<div class="tooltip">' +
'<div><span>' + dt.getValue(row, 0) + '</span></div>' +
'<div><span>' + dt.getColumnLabel(1) + ' (avg): </span>' + dt.getValue(row, 1) + '</div>' +
'<div><span>Row Count: </span>' + dt.getValue(row, 2) + '</div>' +
'</div>';
},
p: {html: true}
}]);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
// use group data to draw chart
chart.draw(view.toDataTable(), {
tooltip: {
isHtml: true
}
});
},
packages: ['corechart']
});
.tooltip {
font-size: 12pt;
padding: 8px;
}
.tooltip div {
padding: 4px;
}
.tooltip span {
font-weight: bold;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I am using google charts to display some data on the screen and on some button click. The data is loading from webapi call.
To simplyfy the issue, I made the data hardcoded in function itself.
The issue is when I call
google.visualization.DataTable(JSON.parse(datastring))
Message: Table has no columns.
it is returning empty datatable. I also tried with arrayToDatable but no use.
I got error with arrayToDataTable. here is it.
Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys
I have create a plunker for it.
http://plnkr.co/edit/pctIqoCWi3LhqxlgdnqM?p=preview
Can anyone have a look and let me know whats wrong with this.
when creating google.visualization.DataTable directly from json,
the json must be in a specific format
see --> Format of the Constructor's JavaScript Literal data Parameter
google.visualization.arrayToDataTable accepts an array of values, not objects...
[["ReportName","ReportTime"],["ABC",48],["XYZ",50]]
if you don't want to change the format of the results from the webapi call,
you'll need to transform the data for the chart
see following working snippet for an example...
google.charts.load('current', {
callback: function () {
var datastring = '{"PerformanceData" : [{"ReportName":"ABC","ReportTime":"48"},{"ReportName":"XYZ","ReportTime":"50"}]}';
var jsonData = JSON.parse(datastring);
var chartData = [];
// load chart data
jsonData.PerformanceData.forEach(function (row, rowIndex) {
// column headings
var columns = Object.keys(row);
if (rowIndex === 0) {
chartData.push(columns);
}
// row values
var chartRow = [];
columns.forEach(function (column, colIndex) {
var chartCell = row[column];
if (colIndex > 0) {
chartCell = parseFloat(chartCell);
}
chartRow.push(chartCell);
});
chartData.push(chartRow);
});
var data = google.visualization.arrayToDataTable(chartData);
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, { width: 400, height: 240 });
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT
once the data table is built, use the group() method to aggregate the data
you can use one of the provided aggregation functions, or provide your own
google.visualization.data.avg
google.visualization.data.count
google.visualization.data.max
google.visualization.data.min
google.visualization.data.sum
see following working snippet...
google.charts.load('current', {
callback: function () {
var datastring = '{"PerformanceData" : [{"ReportName":"ABC","ReportTime":"48"},{"ReportName":"XYZ","ReportTime":"50"},{"ReportName":"ABC","ReportTime":"48"},{"ReportName":"XYZ","ReportTime":"50"},{"ReportName":"ABC","ReportTime":"48"},{"ReportName":"XYZ","ReportTime":"50"},{"ReportName":"ABC","ReportTime":"48"},{"ReportName":"XYZ","ReportTime":"50"}]}';
var jsonData = JSON.parse(datastring);
var chartData = [];
// load chart data
jsonData.PerformanceData.forEach(function (row, rowIndex) {
// column headings
var columns = Object.keys(row);
if (rowIndex === 0) {
chartData.push(columns);
}
// row values
var chartRow = [];
columns.forEach(function (column, colIndex) {
var chartCell = row[column];
if (colIndex > 0) {
chartCell = parseFloat(chartCell);
}
chartRow.push(chartCell);
});
chartData.push(chartRow);
});
var data = google.visualization.arrayToDataTable(chartData);
// group data
var dataGroup = google.visualization.data.group(
data, // data table
[0], // group by column
[{ // aggregation column
column: 1,
type: 'number',
aggregation: google.visualization.data.sum
}]
);
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
// use group data to draw chart
chart.draw(dataGroup, {
pieSliceText: 'value',
width: 400,
height: 240
});
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I need to display the Picker values from Database. So How can I display the dynamic values in picker.
XML code
<Alloy>
<Collection src="UserLanguage"/>
<Window class="container" onClose="cleanup">
<Picker class="picker">
<PickerColumn dataCollection="UserLanguage" dataTransform="transformFunction">
<PickerRow title="{LanguageName}"/>
</PickerColumn>
</Picker>
<!--<Label id="label"></Label>-->
</Window>
</Alloy>
Model:
var moment = require('alloy/moment');
exports.definition = {
config : {
"columns": {
"id":"text",
"LanguageName":"text"
},
"adapter": {
"type": "sql",
"collection_name": "UserLanguage"
}
},
extendModel: function(Model) {
_.extend(Model.prototype, {
});
return Model;
},
extendCollection: function(Collection) {
_.extend(Collection.prototype, {
});
return Collection;
}
};
Controller
var moment = require('alloy/moment');
var userlang = Alloy.Collections.UserLanguage;
var task = Alloy.createModel('UserLanguage', {
id : '1',
LanguageName : 'English'
});
task.save();
userlang && userlang.fetch();
function transformFunction(model) {
var transform = model.toJSON();
transform.LanguageName = transform.LanguageName ;
return transform;
}
$.index.open();
function cleanup() {
$.destroy();
}
tss:
".container": {
backgroundColor:"black"
},
".picker": {
width: '90%',
top: '25dp'
}
Alloy.js
Alloy.Collections.UserLanguage = Alloy.createCollection('UserLanguage');
How can I pass the selected values in to Picker. The data is not binding in to the XML file, I'm getting the following error,
Uncaught TypeError: cannot read property '_transform' of undefined
index.xml
<Alloy>
<Collection src="UserLanguage"/>
<Window>
<Picker id="countryPicker" class="picker">
<PickerColumn id="column1" dataCollection="UserLanguage">
<PickerRow title="{LanguageName}"/>
</PickerColumn>
</Picker>
</Window>
</Alloy>
index.js
Alloy.Collections.UserLanguage.fetch();
$.index.open();
Don't forget to call $.destroy after window is closed. See http://docs.appcelerator.com/titanium/latest/#!/guide/Alloy_Data_Binding
Another solution:
index.xml
<Alloy>
<Collection src="UserLanguage"/>
<Window>
<Picker id="picker"/>
</Window>
</Alloy>
index.js
var userLanguage = Alloy.Collections.UserLanguage;
userLanguage.on("reset", function() {
var column = Ti.UI.createPickerColumn();
this.each(function(model) {
var row = Ti.UI.createPickerRow({
title: model.get("LanguageName");
});
column.addRow(row);
});
$.picker.columns = [column];
});
userLanguage.fetch();
$.index.open();
So I've searched many of the answers and can't seem to find anything specific on this... so here goes..
I have a standard Kendo UI Grid - and I've setup a column as follows:
{ title: "Sharing Enabled?",
field: "permissions_users_apps_user_sharing",
attributes: {
style: "text-align: center; font-size: 14px;"
},
filterable: true,
headerAttributes: {
style: "font-weight: bold; font-size: 14px; width: 40px;"
},
template: function(dataItem) {
if ( dataItem.permissions_users_apps_user_sharing == 0 ) {
return "<input type='checkbox' name='permissions_users_apps_status' id='permissions_users_apps_status' value='1' />"
} else if ( dataItem.permissions_users_apps_user_sharing == 1 ) {
return "<input type='checkbox' name='permissions_users_apps_status' id='permissions_users_apps_status' value='1' checked />"
}
}
},
What I'm trying to do is get the value of this checkbox (to see if it's changed) when I click a COMMAND button I've defined. The ROW is selectable.. so I can get the row's ID. But I can't seem to gather the value of the checkbox.
Anyone have suggestions?
Thanks in advance..
You can get the instance of checkbox in dataBound event when the checkbox state changes.
See if the below code helps you.
....
columns: [
{
{ field: "select", template: '<input id="${BindedColumn}" onclick="GrabValue(this)" type="checkbox"/>', width: "35px", title: "Select" },
}
....
selectable: "multiple, row",
dataBound: function () {
var grid = this;
//handle checkbox change
grid.table.find("tr").find("td:nth-child(1) input")
.change(function (e) {
var checkbox = $(this);
//Write code to get checkbox properties for all checkboxes in grid
var selected = grid.table.find("tr").find("td:nth-child(1) input:checked").closest("tr");
//Write code to get selected checkbox properties
......
//Code below to clear grid selection
grid.clearSelection();
//Code below to select a grid row based on checkbox selection
if (selected.length) {
grid.select(selected);
}
})
}
.....
function GrabValue(e)
{
//Alert the checkbox value
alert(e.value);
//get the grid instance
var grid = $(e).closest(".k-grid").data("kendoGrid");
//get the selected row data
var dataItem = grid.dataSource.view()[grid.select().closest("tr").index()];
}
using this method you get selected checkbox value.
$("#MultiPayment").click(function () {
var idsToSend = [];
var grid = $("#Invoice-grid").data("kendoGrid")
var ds = grid.dataSource.view();
for (var i = 0; i < ds.length; i++) {
var row = grid.table.find("tr[data-uid='" + ds[i].uid + "']");
var checkbox = $(row).find(".checkboxGroups");
if (checkbox.is(":checked")) {
idsToSend.push(ds[i].Id);
}
}
alert(idsToSend);
$.post("/whatever", { ids: idsToSend });
});
for more detail Goto