Here's my code:
public add() {
let alert = Alert.create({
title: "Add Date & Time",
message: "Enter the date and time of your donation.",
inputs: [
{
name: "date",
placeholder: "DD/MM/YYYY"
},
{
name: "time",
placeholder: "HH:MM AM/PM"
}
],
buttons: [
{
text: "Cancel"
},
{
text: "Save",
handler: data => {
this.donationHistoryList.push({
date: data.date,
time: data.time
});
}
}
]
});
this.navCtrl.present(alert);
}
Here are the errors I am getting
Property 'create' does not exist on 'type of Alert'.
And
Property 'present' does not exist on 'type of 'NavController'.
Use this code.
import {AlertController} from 'ionic-angular';
In your constructor fn
constructor(private alertCtrl: AlertController) {
}
public add() {
let alert = alertCtrl.create({
title: "Add Date & Time",
message: "Enter the date and time of your donation.",
inputs: [ { name: "date", placeholder: "DD/MM/YYYY" }, { name: "time", placeholder: "HH:MM AM/PM" } ],
buttons: [ { text: "Cancel" }, { text: "Save", handler: data => { this.donationHistoryList.push({ date: data.date, time: data.time }); } }]
});
alert.present(); }
Hope this helps you. Thanks.
Just add (this before alertCtrl variable).
this.alertCtrl.create(...)
Related
I have an API end point that returns an array of 24 values that I want to use in my chartjs within a vue component.
when the page loads I get no errors but the bars on the charts just don't show and I don't know why.
EDIT: I noticed that the async function returns a promise instead of the actual data:
async filterData() {
await this.$axios.get('/api/data_app/job_count_by_hour/')
.then(response => {
return this.chart_data = response.data;
})
}
here is the data return code, I have a function that populates the chart_data array :
data(){
return {
form:{
day: 'select day',
workspace:'',
machine_family: [],
duration: []
},
res: [],
total:[],
chart_data: [],
url: '/api/jobs/job_count_by_hour/',
days: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "sunday"],
barChart2: {
labels: ["6h", "7h", "8h", "9h","10h","11h", "12h", "13h", "14h", "15h", "16h", "17h", "18h", "19h", "20h", "21h","22h", "23h", "00h"],
datasets: [{
label: ["popularity"],
backgroundColor:"#f93232" ,
data: this.chart_data
},],
},
}
},
methods: {
async filterData() {
let _url = `${this.url}`
await this.$axios.get(_url)
.then(response => {
this.chart_data = response.data;
})
return this.chart_data
},
},
mounted() {
this.filterData()
}
}
this is the chart component:
<script>
import { Line } from 'vue-chartjs'
export default {
extends: Line,
props: {
chartdata: {
type: Object,
default: null
},
options: {
type: Object,
default: null
}
},
mounted () {
this.renderChart(this.chartdata, this.options)
}
}
in the parent component It looks like this:
en <BarChart :labels="barChart2.labels"
:datasets="barChart2.datasets"
:height="100"
>
</BarChart>ter code here
Turns out that when you try to update nested data, the component doesn't re-render.
This is how I solved it, I put the entire object in an update function and call that function when i get my data from the back end, I hope this helps!:
methods: {
onInput(value) {
this.filterData()
},
updateChart(data) {
this.datasets = [{
label: ["popularity"],
backgroundColor:"#f93232",
data: data
}]
},
async loadData() {
await this.$axios.get(this.url)
.then(response => {
this.updateChart(response.data)
})
},
},
mounted() {
this.loadData()
},
While trying to perform batch update, I am not able to post values to MVC WEB API controller neither I am getting Record IDs in mu PUT controller.
I have already visited some of the links egarding same problem but got no solution.
$(document).ready(function () {
debugger;
var webapiUrl = (My webapi);
dataSource = new kendo.data.DataSource({
type: "json",
transport: {
read: {
url: webapiUrl + api/GetProductsByShipID/1",
contentType: "application/json",
},
update: {
url: webapiUrl + api/OpportunityProducts/1",
contentType: "application/json",
type: "PUT"
},
destroy: {
url: webapiUrl + /api/OpportunityProducts/",
contentType: "application/json",
type: "DELETE"
},
create: {
url: webapiUrl + /api/OpportunityProducts/",
contentType: "application/json",
type: "POST"
},
parameterMap: function (options, operation) {
if (operation !== "read") {
return options;
}
}
},
batch: true,
pageSize: 10,
schema: {
model: {
id: "ID",
fields: {
ID: { editable: false, nullable: true },
ProductDesc: { type: "string" },
Quantity: {type: "number"},
UnitPrice: { type: "number"}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
toolbar: ["create", "save", "cancel"],
columns: [
"ProductName",
{ field: "ProductDesc", title: "Product Desc"},
{ field: "Quantity", title: "Quantity" },
{ field: "UnitPrice", width: 120 },
{ command: "destroy", title: " ", width:150 }],
editable: true
});
});
</script>
Well after some workaround, late night I was able to modify parameterMap section of my kendo grid which lead me to expected output.
This is how I updated my parameterMap section...
Previous
parameterMap: function (options, operation) {
if (operation !== "read") {
return options;
}
}
Updated
parameterMap: function (options, operation) {
debugger;
if (operation !== "read" && options.models) {
var webapiUrl = (my webapi);
var i = 0;
for (i = 0; i < options.models.length; i++) {
$.ajax({
cache: false,
async: true,
type: "PUT",
url: webapiUrl + "/api/OpportunityProducts/" + options.models[i].Id,
data: {
ID: options.models[i].ID,
ProductDesc: options.models[i].ProductDesc,
Quantity: options.models[i].Quantity
},
success: function (data) {
},
error: function (jqXHR, exception) {
alert(exception);
}
});
}
I am building a small demo application using Sencha touch:
I have run into an issue with the list display followed by the itemtap even firing.I had this working in a previous application but cannot find out why its not firing in the current application
I have added itemtap methods as listeners, on the view, in the controller, but none of them fire. Any ideas on what I am missing?
Thanks In Advance for your help.
PS
Main.js
Ext.define('KapselApp.view.Main', {
extend: 'Ext.navigation.View',
xtype: 'mainview',
requires: [
'KapselApp.view.ExpApproval',
'KapselApp.view.ExpApproval.Details',
'KapselApp.view.ExpApproval.Confirm'
],
config: {
autoDestroy: false,
navigationBar: {
ui: 'sencha',
items: [
{
xtype: 'button',
id: 'editButton',
text: 'Edit',
align: 'right',
hidden: true,
hideAnimation: Ext.os.is.Android ? false : {
type: 'fadeOut',
duration: 200
},
showAnimation: Ext.os.is.Android ? false : {
type: 'fadeIn',
duration: 200
}
},
{
xtype: 'button',
id: 'saveButton',
text: 'Save',
ui: 'sencha',
align: 'right',
hidden: true,
hideAnimation: Ext.os.is.Android ? false : {
type: 'fadeOut',
duration: 200
},
showAnimation: Ext.os.is.Android ? false : {
type: 'fadeIn',
duration: 200
}
}
]
},
items: [
{ xtype: 'expApprovals' }
]
}
});
ExpApproval.view
Ext.define('KapselApp.view.ExpApproval', {
extend: 'Ext.dataview.List',
xtype: 'expApprovals',
config: {
title: 'Expense Approval',
cls: 'x-ExpApprovals',
items: [{
xtype: 'list',
//id: 'expApproval',
store: expApprovals,
itemTpl: ['<div class="headshot" style="background-image:url(ExpType.Images/blue_btn_left.png);"></div>',
'From:{UserName} {WorkItem}',
'<div>Subject:{SUBJECT}</div>'
],
listeners: {
itemtap: function(view, index, item, e){
alert ('itemtap 1');
}
}
}],
itemtap: function(me, index, target, record){
alert ('itemtap');
//do other logic here
}
},
initialize: function() {
console.log ('KapselApp.view.ExpApproval:initialize: ');
}
});
Controller
Ext.define('KapselApp.controller.ExpApprovalApplication', {
extend: 'Ext.app.Controller',
config: {
refs: {
main: 'mainview',
editButton: '#editButton',
expApprovalDetails: 'expapproval-details',
expApprovalList: 'expApprovals',
confirmExpApprovals: 'expapproval-confirm',
contacts: 'contacts',
showContact: 'contact-show',
editContact: 'contact-edit',
saveButton: '#saveButton'
},
control: {
main: {
push: 'onMainPush',
pop: 'onMainPop'
},
editButton: {
tap: 'onContactEdit'
},
expApprovalList: {
itemtap: 'onExpApprovalsSelect'
},
saveButton: {
tap: 'onContactSave'
},
editContact: {
change: 'onContactChange'
},
'expApproval list' : {itemtap: 'onExpApprovalsSelect'},
}
},
onExpApprovalsSelect: function(list, index, node, record) {
alert ('onExpApprovalsSelect');
}
}
Ok .. found the sollution to your problem. You made the same mistake as I did. you overrode the initialize method in the list view without calling in the initiallize method "this.callParent()". By adding this in my code events started firing. I am sure it will work in yours.
So your List initialize handler should look something like this:
initialize: function(){
console.log('eventsView being initialized.');
this.callParent();
},
You can still use the code bellow to check which events are being fired for debugging in similar situations.
---- Previous post ----
I am facing a similar issue. I am extending Ext.dataview.List and have a controller capture the itemtap event but the event does not seem to be firing.
I tried adding the following code to capture all the events being fired... The list seems to fire the show event and the scroll events but no other such as itemtap, etc ...
Ext.define('Override.mixin.Observable', {
override : 'Ext.mixin.Observable',
fireEvent : function(eventName, args) {
console.log('Event:', eventName, args);
this.callOverridden(arguments);
//debugger;
},
fireAction : function(eventName) {
console.log('Action:',eventName);
this.callOverridden(arguments);
}
});
Try adding this code and see if you are getting the itemtap events.
Let me know if you make any progress.
I'm trying to have a group of 3 radio buttons (each button in different column but the same row) in my Kendo grid but without success. I looked at the Kendo RowTemplate doc, but it's not directing me to any solution.
it works fine with checkboxes, but when i change the template to "radio" type, it changes to checkbox the second I click the edit button. any thoughts?
below is my kendoGrid properties, I put ** next to the 'template' line in the field property.
div.kendoGrid({
dataSource:
{ error: function (e) {
alert("An error occured: "+ e.xhr.responseText);
this.cancelChanges();
},
type:"json",
transport: {
read: {
url: "/users/read",
cache: false,
dataType: "json"
},
update: {
url: function(user){
var grid = $("#grid").data("kendoGrid");
var model = grid.dataItem(grid.select());
var roleIs;
if (user.Admin) {
roleIs="admin"
}
else if (user.Manager) {
roleIs="manager"
}
else if (user.User) {
roleIs="user"
};
return "users/update/"+model.id+"/"+roleIs+"/"+user.name
},
type: "PUT"
},
destroy: {
url: function(user){
return "/users/destroy/"+user.id+"/"+user.name
},
type: "DELETE"
},
create: {
url: function(user){
var roleIs;
if (user.Admin) {
roleIs="admin"
}
else if (user.Manager) {
roleIs="manager"
}
else if (user.User) {
roleIs="user"
};
return "users/create/"+user.login+"/"+user.name+"/"+roleIs+"/"
},
type: "POST"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
schema: {
model:
{ id: "id",
fields: {
id:{ type: "number",editable: false},
role:{ type: "string"},
login: { type: "string",editable: false},
name:{type: "string",editable: false},
Admin: { type: "boolean"},
Manager: { type: "boolean"},
User: { type: "boolean"}
}
}
},
pageSize: 30,
serverPaging: false,
serverFiltering: false,
serverSorting: false
},
selectable: "row",
navigatable: true,
pageable: true,
height: 400,
columns: [//{field: "id"},
{
field: "name",
title:"User Name",
filterable: true,
nullable: false,
editable: false
},{
field: "Admin",
**template: '<input type="checkbox" #= Admin ? "checked=checked" : "" # disabled="disabled"></input>'**,
width: 75
},{
field: "Manager",
**template: '<input type="checkbox" #= Manager ? "checked=checked" : "" # disabled="disabled"></input>'**,
width: 75
},{
field: "User",
**template: '<input type="checkbox" #= User ? "checked=checked" : "" # disabled="disabled"></input>',**
width: 75
},{
command: ["edit", "destroy"], title: "", width: "195px"
}],
editable:{mode: "inline"}
});
}
}
}
The formatting for edition is controlled by columns.editor
You need to write an editor function that defines the input as a radio button.
I would dynamically change the title of my list titlebar. This is my app.js where you can view my app (see var list where there is the toolbar item and title that I would change)
How can I do this?
Thanks.
var mainForm ;
var mainFormPanel={};
var myStore = Ext.create('Ext.data.Store', {
storeId: 'MyStore',
fields: ['txt']
}); // create()
var list= Ext.create('Ext.List', {
fullscreen: true,
store: 'MyStore',
itemTpl: '{txt}',
items: [{
xtype: 'titlebar',
docked: 'top',
title:'change dinamically this title!!!!'
}] // items (list)
}); // create()
Ext.application({
glossOnIcon: false,
autoMaximize: false,
icon: {
57: 'lib/sencha-touch/resources/icons/icon.png',
72: 'lib/sencha-touch/resources/icons/icon#72.png',
114: 'lib/sencha-touch/resources/icons/icon#2x.png',
144: 'lib/sencha-touch/resources/icons/icon#114.png'
},
phoneStartupScreen: 'lib/sencha-touch/resources/loading/Homescreen.jpg',
tabletStartupScreen: 'lib/sencha-touch/resources/loading/Homescreen~ipad.jpg',
requires: [
'Ext.tab.Panel',
'Ext.form.*',
'Ext.field.*',
'Ext.Button',
'Ext.data.Store'
],
launch: function() {
mainForm = Ext.create('Ext.form.Panel', {
xtype:'formpanel',
items: [
{
xtype: 'textfield',
name : 'distance',
label: 'Distance'
},
{
xtype: 'textfield',
name : 'quantity',
label: 'Quantity'
}
]
});
mainFormPanel={
xtype: 'toolbar',
docked: 'bottom',
layout: {
pack: 'center'
},
items: [
{
xtype: 'button',
text: 'Set Data',
handler: function() {
mainForm.setValues({
distance: '300',
quantity: '25'
})
}
},
{
xtype: 'button',
text: 'Get Data',
handler: function() {
Ext.Msg.alert('Form Values', JSON.stringify(mainForm.getValues(), null, 2));
}
},
{
xtype: 'button',
text: 'Clear Data',
handler: function() {
mainForm.reset();
}
}
]
};
Ext.Viewport.add({
xtype: 'tabpanel',
items: [
{
//each item in a tabpanel requires the title configuration. this is displayed
//on the tab for this item
title: '1-tab',
layout:'fit',
//next we give it some simple html
items: [mainForm,mainFormPanel],
//then a custom cls so we can style it
cls: 'card1'
},
{
//title
title: '2-tab',
layout:'fit',
items: [list],
cls: 'card2'
},
{
//title
title: '3-tabs',
//the items html
items: {
html: 'mia auto',
centered: true
},
//custom cls
cls: 'card3'
}
]
});
}
});
Ext.List component's superclass is Ext.DataView., not Ext.Panel.
Hence, it is not possible to directly add / dock any item inside the Ext.List component.
So, I recommend you to wrap your Ext.List component inside Ext.Panel.
Do it like this,
var myStore = Ext.create('Ext.data.Store', {
storeId: 'MyStore',
fields: ['txt']
}); // create()
var listpanel = new Ext.Panel({
layout: 'fit', // important to make layout as 'fit'
items: [
{
xtype: 'titlebar',
id: 'myTitle',
docked: 'top',
title: 'Before Change title',
items: [
{
xtype:'button',
text:'Change Title',
align:'right',
listeners : {
tap : function() {
Ext.getCmp('myTitle').setTitle('After Title Change');
}
}
}
]
},
{
//Definition of the list
xtype: 'list',
itemTpl: '{txt}',
store: myStore,
}]
});
....
....
{
title: '2-tab',
layout:'fit',
items: [listpanel],
cls: 'card2'
},
....
....
Sample Output :-
Before changing the title
After changing the title
FYI, If you look inside the Ext.List class in Sencha Docs, you will see the following code inside initComponent() method,
if (Ext.isDefined(this.dockedItems)) {
console.warn("List: List is not a Panel anymore so you can't dock items to it. Please put this list inside a Panel with layout 'fit'");
}