I'm learning jquery mobile..I need to create gridview dynamically from json value..How can i do this..
till now i tried..
this is my gridview
<div class="ui-grid-a" id="category_grid">
<div id="category_gridrow" class="ui-block-b"><p>This is block A</p></div>
</div>
my script data....
<script >
var data = { "Products":[
{
"itemname":"Camera",
"submenu": [{
"itemname":"cannon",
},{
"itemname":"Kodak",
},{
"itemname":"Sony",
}]
},
{
"itemname":"Lighting",
},
{
"itemname":"Backdrop",
"submenu": [{
"itemname":"Blue",
},{
"itemname":"Black",
}]
}
]}
var cat='';
for (var i in data.Products)
{
cat ="<p>"+ data.Products[i].itemname + "</p>";
$("#category_gridrow").html(cat);
}
</script>
But i dont know how to increase the grid dynamically..help me out..
Well friends i found it.. we can add like below..
$('#category_grid').append('<div id="category_gridrow" class="ui-block-b">'+cat+'</div></div>');
Related
I'm trying to use Chartjs in an Angular application I'm developing.
So upon changing the value of a select menu it's supposed to draw a chart according to the selected value. But I'm getting TypeError: item is null . I've looked everywhere and the solutions I've found did not work.
This the selecting part code :
<mat-form-field>
<mat-select [(ngModel)]="selected" placeholder="Y"
(ngModelChange)="drawBubbleChart($event)">
....
</mat-select>
</mat-form-field>
This is my html code :
<div *ngIf="chart">
<canvas #ctrx >{{ chart }}</canvas>
</div>
my ts code :
#ViewChild('ctrx') private chartRef;
drawBubbleChart(){
let ds = this.prepareData();
let chartID = this.chartRef.nativeElement.getContext("ctrx");
let options = {
title: {
display: true,
text: "Testing what's up"
}, scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: "One"
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: "Two"
}
}]
}
}
console.log("data =>", ds);
if (ds.length !== 0) {
console.log("inside if !== 0");
this.chart = new Chart(chartID,{
type: 'bubble',
datasets: ds,
options: options
});
}
}
I tried let chartID = document.getElementById("ctrx"); but it gives me a TypeError: item is null as well .
How can solve this and draw a chart after selecting an option ??
Make sure to not use *ngIf, it destroys your canvas and the ElementRef. Hide it with CSS.
Also, I use getContext('2d')
<canvas #canvas>{{ chart }}</canvas>
#ViewChild('canvas') canvas: ElementRef;
this.canvas.nativeElement.getContext('2d')
I tried many things.
i cant initialize default selected items.
The values always "undefined".
Can anyone please help me?
i create de select2, and add options for select.
var selected = [{
"id": 50270924,
"full_name": "zquestz/s",
"description": "Open a web search in your terminal.",
"language": "Go"
}, {
"id": 30494317,
"full_name": "haosdent/s",
"description": "s is a tool for ssh like z for cd",
"language": "Shell"
}];
var $gitElement = $(".select2").select2({
ajax: {
url: "https://api.github.com/search/repositories",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term,
page: params.page
};
},
processResults: function (data, page) {
return {
results: data.items
};
},
cache: true
},
data:selected,
escapeMarkup: function (markup) { return markup; },
minimumInputLength: 1,
templateResult: function(repo) {
console.log("res", repo, this);
return '<div class="select2CompanyName">'+repo.full_name+'</div>' +
'<div class="select2CompanyTitle">'+repo.language+'</div>' +
'<div class="select2CompanyTitle">'+repo.description+'</div>';
},
templateSelection: function(repo) {
console.log("sel", repo, this);
return '<div class="select2CompanyResult">' +
'<div class="select2CompanyName">'+repo.full_name+' <br>'+ repo.language +'</div>' +
'<i class="fa fa-pencil-square-o"></i>' +
'</div>';
}
});
for(var i in selected) {
$(".select2").append('<option value="'+selected[i].id+'" selected="selected"></option>');
}
$(".select2").trigger("change");
this version:
jsfiddle
ugly solution would be:
for(var i in selected) {
$(".select2").append('<option value="'+selected[i].id+'" selected="selected">'+JSON.stringify(selected[i])+'</option>');
}
here
working, but ugly
there got a simple way to fix it, u just need to move your template logic to processResults, code should be something like :
function displayItem(repo) {
return {
id : repo.id,
text : '<div class="select2CompanyName">'+repo.full_name+'</div>' +
'<div class="select2CompanyTitle">'+repo.language+'</div>' +
'<div class="select2CompanyTitle">'+repo.description+'</div>'
};
}
....
processResults: function (data, page) {
return {
results: $.map(data.items, displayItem);
};
},
Cost me sometime to find the issue.. I upgrade select2 version to 4.0.2. check fiddle here
I am brand new to angular JS and obviously to ui-grid as well. I got data to display in a grid using $resource and am trying to move to the next level by allowing editing and saving of rows etc.
I used Saving row data with AngularJS ui-grid $scope.saveRow as an example and created the Plunker http://plnkr.co/edit/Gj07SqU9uFIJlv1Ie6S5 to try it. But, for some reason I can't fathom, mine doesn't work and in fact it generates an exception at the line:
gridApi.rowEdit.on.saveRow(self, self.saveRow);
And I am at a total loss to understand why. I realize that the saveRow function is empty, but the goal at this stage is simply to get it called when the row has been edited.
Any help would be greatly appreciated.
The code of the Plunker follows:
(function() {
var app = angular.module('testGrid', ['ngResource', 'ui.grid', 'ui.grid.edit', 'ui.grid.rowEdit' /*, 'ui.grid.cellNav'*/ ]);
app.factory('Series', function($resource) {
return $resource('/api/series/:id', {
id: '#SeriesId'
});
});
var myData = [{
SeriesId: 1,
SeriesName: 'Series 1'
}, {
SeriesId: 2,
SeriesName: 'Series 2'
}];
app.directive('gridContent', function() {
var deleteTemplate = '<input type="button" value="Delete" ng-click="getExternalScopes().deleteRow(row)" />';
var commandheaderTemplate = '<input type="button" value="Add Series" ng-click="getExternalScopes().addNew()" />';
return {
restrict: 'E',
templateUrl: 'grid.html',
controllerAs: 'gridseries',
controller: function(Series) {
var self = this;
this.saveRow = function(rowEntity) {
i = 0;
};
this.gridOptions = {};
this.gridOptions.columnDefs = [{
name: 'SeriesId',
visible: false
}, {
name: 'SeriesName',
displayName: 'Name',
enableCellEdit: true
}, {
name: 'Command',
displayName: 'Command',
cellTemplate: deleteTemplate,
headerCellTemplate: commandheaderTemplate
}];
this.gridOptions.onRegisterApi = function(gridApi) {
self.gridApi = gridApi;
gridApi.rowEdit.on.saveRow(self, self.saveRow);
};
this.gridOptions.data = myData;
this.gridScope = {
deleteRow: function(row) {
var index = myData.indexOf(row.entity);
self.gridOptions.data.splice(index, 1);
},
addNew: function() {
self.gridOptions.data.push({
SeriesName: 'Add a name'
});
}
};
}
};
});
})();
I have no idea why the code didn't cut and paste properly but all the code is in the Plunker any way.
Thanks in advance.
I think the main problem here is that you're using a controller as syntax, rather than the $scope setup. Registering an event requires a $scope, as the event handler is then removed again upon the destroy event of that $scope.
A shorthand workaround is to use $rootScope instead, but this may over time give you a memory leak.
gridApi.rowEdit.on.saveRow($rootScope, self.saveRow);
Refer: http://plnkr.co/edit/Gj07SqU9uFIJlv1Ie6S5?p=preview
Since this code was also a bit old, I had to update to the new appScope arrangements rather than externalScope.
i'm trying to port some highchart charts from a php web appplication to a Sencha Touche mobile app.
I want to put an empty chart in my View page and populate it dinamycally with some jsonp calls.
Here's my view code (not all the 130 lines...):
{
xtype : 'panel',
scrollable: true,
html : 'INSERIRE QUI I GRAFICI E LE TABELLE',
items : [
{
xtype : 'panel',
layout : 'fit',
html : 'AREA PER GRAFICO',
itemId : 'chartRenderPanel',
margin: '180px'
},
{ //sample code, to be replaced with a consinstent config...
xtype: 'highchart',
chartConfig: {
chart: {
type: 'spline'
},
title: {
text: 'A simple graph'
},
xAxis: {
plotLines: [{
color: '#FF0000',
width: 5,
value: 'mar'
}]
}
}
},
{
xtype : 'panel',
layout : 'fit',
html : 'AREA PER TABELLE',
itemId : 'tableRenderPanel',
margin: '180px'
}
]
}
The Highchart part is taken from this fiddle http://jsfiddle.net/marcme/DmsGx/
it works on the fiddle but not in my mobile app: debugging with chrome, i get stuck here in the Highcharts.js:
update : function(delay) {
var cdelay = delay || this.updateDelay;
if(!this.updateTask) {
this.updateTask = new Ext.util.DelayedTask(this.draw, this);
}
this.updateTask.delay(cdelay);
},
With "Uncaught TypeError: undefined is not a function " message in the console.
Please, help! : )
Lorenzo
You have to call DelayedTask differently in sencha touch than you do in Extjs. Change this
this.updateTask = new Ext.util.DelayedTask(this.draw, this);
to this
if (Ext.util.DelayedTask)
this.updateTask = new Ext.util.DelayedTask(this.draw, this);
else
this.updateTask = Ext.create('Ext.util.DelayedTask', this.draw, this);
When dragging one of the navigator handles, both dates change.
To reproduce, go to http://jsfiddle.net/rNer2/5/ and drag one of the navigator handles. In the provided test case, the problem only occurs the first time a handle is dragged. It can actually also happen in other situations, but perhaps fixing it here will fix it for the other cases as well.
See duplicate code below:
<div id="container" style="height: 400px; min-width: 600px"></div>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="mindate" style="position:absolute;top:40px;left:0px;margin-left:20px;"></div>
<div id="maxdate" style="position:absolute;top:40px;right:0px;margin-right:50px;">
$(function() {
var data = [];
for (var i = 1971; i < 2020; ++i) {
data.push([Date.UTC(i, 0, 1), 1]);
}
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
type: 'column',
events: {
load: function() {
displayDates(this.xAxis[0].getExtremes());
}
}
},
xAxis: {
ordinal: false,
events: {
afterSetExtremes: function(e) {
displayDates(e);
}
},
min: Date.UTC(1984, 0, 1),
max: Date.UTC(1988, 0, 1)
},
series: [{
data: data
}]
});
});
function displayDates(e) {
$('#mindate').html(Highcharts.dateFormat('%m/%d/%y %I:%M:%S%p', e.min));
$('#maxdate').html(Highcharts.dateFormat('%m/%d/%y %I:%M:%S%p', e.max));
}
Please familiar with very simple example:
http://jsfiddle.net/ebLTE/
$('#container').highcharts('StockChart', {
chart:{
type:'column'
},
rangeSelector : {
selected : 1
},
title : {
text : 'AAPL Stock Price'
},
xAxis:{
min:1172707200000,
max:1175126400000
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});