I am working with vue-form-wizard by Cristi Jora integrating Element UI the basic example is here
Vue.use(VueFormWizard)
new Vue({
el: '#app',
data: {
formInline: {
user: '',
region: '',
gender: ''
},
rules: {
user: [{
required: true,
message: 'Please input Activity name',
trigger: 'blur'
}, {
min: 3,
max: 5,
message: 'Length should be 3 to 5',
trigger: 'blur'
}],
region: [{
required: true,
message: 'Please select Activity zone',
trigger: 'change'
}],
}
},
methods: {
onComplete: function() {
alert('Yay. Done!');
},
validateFirstStep() {
return new Promise((resolve, reject) => {
this.$refs.ruleForm.validate((valid) => {
resolve(valid);
});
})
}
}
})
https://jsfiddle.net/bt5dhqtf/409
but i am not able to validate radio buttons, please help me :(
here is my example
https://jsfiddle.net/bt5dhqtf/884/
Related
This is my first time using a javascript framework, I would like to implement MVVM in my EXT JS application and the data is coming from my WEB API (ASP.NET FRAMEWORK).
My problem is that, I don't seem to understand how to fully use viewModel which looks up to my store. I successfully bound my ViewModel in my grid but now I don't know how to update the selected record using a form (modal) and sync my store (send update request through API)
I have a feeling that I'm doing it the wrong way. I don't know how to do this in fiddle so I'll just paste my code here.
Genre.js [Model]
Ext.define('VAM2.model.Genre', {
extend: 'VAM2.model.Base',
alias: 'model.genre',
fields: [
{name: 'GenreId', type: 'int'},
{name: 'Code', type: 'string'},
{name: 'CreatedBy', type: 'string'},
]
});
Genre.js [Store]
Ext.define('VAM2.store.Genre', {
extend: 'Ext.data.Store',
alias: 'store.genre',
model: 'VAM2.model.Genre',
autoLoad: false,
pageSize: 10,
storeId: 'GenreId',
proxy : {
type : 'rest',
actionMethods : {
read : 'GET'
},
cors:true,
url: 'https://localhost:44332/api/Genre/GetGenresExtJs',
api:{
create: 'https://localhost:44332/api/Genre/CreateGenreExtJS',
read: 'https://localhost:44332/api/Genre/GetGenresExtJs',
update: 'https://localhost:44332/api/Genre/EditGenreExtJS',
destroy: 'https://localhost:44332/api/Genre/CreateGenreExtJS'
},
useDefaultXhrHeader: false,
reader: {
type : 'json',
headers: { 'Accept': 'application/json' },
allDataOptions: {
associated: true,
persist: true
},
rootProperty : 'data',
totalProperty: 'total'
},
}
});
GenreViewModel.js - I'm not sure if this is okay but the read is working
Ext.define('VAM2.view.genre.GenreViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.genre',
requires:[
'VAM2.model.Genre'
],
stores: {
myGenres : {
model: 'VAM2.model.Genre',
autoLoad: true,
proxy : {
type : 'rest',
actionMethods : {
read : 'GET'
},
cors:true,
url: 'https://localhost:44332/api/Genre/GetGenresExtJs',
api:{
create: 'https://localhost:44332/api/Genre/CreateGenreExtJS',
read: 'https://localhost:44332/api/Genre/GetGenresExtJs',
update: 'https://localhost:44332/api/Genre/EditGenreExtJS',
destroy: 'https://localhost:44332/api/Genre/CreateGenreExtJS'
},
useDefaultXhrHeader: false,
reader: {
type : 'json',
headers: { 'Accept': 'application/json' },
allDataOptions: {
associated: true,
persist: true
},
rootProperty : 'data',
totalProperty: 'total'
},
}
}
},
data:{
title:'Sample Binding'
},
formulas: {
currentRecord: {
bind: {
bindTo: '{groupGrid.selection}', //--> reference configurated
//--> on the grid view (reference: groupGrid)
deep: true
},
get: function(record) {
return record;
},
set: function(record) {
if (!record.isModel) {
record = this.get('records').getById(record);
}
this.set('currentRecord', record);
}
}
}
});
View -- This is where it gets confusing. I don't know how to put the bounded data from grid to a form modal and then save and sync my store.
Ext.define('VAM2.view.genre.GenreList', {
extend: 'Ext.container.Container',
xtype: 'myGenreList',
requires: [
'VAM2.view.genre.GenreController',
'VAM2.view.genre.GenreViewModel',
'Ext.grid.column.Boolean',
'Ext.form.field.Checkbox',
'Ext.form.field.TextArea',
'Ext.form.field.Text'
],
controller: "genre",
viewModel: {
type: "genre"
},
width:'100%',
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch'
},
style: {
backgroundColor: '#f5f5f5'
},
items: [{
xtype: 'grid',
reference: 'groupGrid', //--> used in the viewmodel,
bind: {
title: '{title}',
store: '{myGenres}'
},
columns: [{
text:'GenreIdField',
id:'GenreIdField',
dataIndex:'GenreId',
hidden:true
},{
text: 'Code',
dataIndex: 'Code',
flex:1
}, {
text: 'Created By',
dataIndex: 'CreatedBy',
flex: 1
}],
listeners:{
select:'onGenreSelected_FORMA' //--> I'm thinking this will trigger
//-> a form (modal) containing the data to update
}
}]
});
A fiddle example would be great! Thank you!
Screenshot:
This is where I would like to display form modal that can sync/update my store when I modify some data.
To do store.sync() you need to set values on the record first.
Example is without ViewModel:
https://fiddle.sencha.com/#fiddle/3isg&view/editor
select: function (grid, record) {
console.log(record);
let win = Ext.create("Ext.window.Window", {
title: 'Edit',
modal: true,
autoShow: true,
width: 400,
height: 500,
controller: {},
items: [{
xtype: 'form',
reference: 'form',
fieldLabel: 'name',
items: [{
xtype: 'textfield',
name: 'name'
}]
}],
buttons: [{
text: 'cancel',
handler: function () {
win.close();
}
}, {
text: 'save',
handler: function () {
var values = this.lookupController().lookup('form').getValues();
record.set(values);
grid.getStore().sync({
scope: this,
success: function () {
win.close();
Ext.toast({
html: 'Well done',
align: 't'
});
},
failure: function () {
Ext.toast({
html: 'Problem occurred',
align: 't'
});
}
});
}
}],
listeners: {
afterrender: function () {
this.lookupController().lookup('form').loadRecord(record);
}
}
})
}
I've got the following program, but can't figure out how to delete the buttons, or preferably the whole message, after the user has clicked one of the buttons?
const dialog = new BotkitConversation(BLIND_UPDOWN_DIALOG, controller)
dialog.addQuestion(
{
text: 'What did you want to do?',
action: 'complete',
blocks: async (template, vars) => {
return [
{
type: 'section',
text: {
type: 'plain_text',
text: 'What did you want to do?',
},
},
{
type: 'actions',
elements: [
{
type: 'button',
text: {
type: 'plain_text',
text: '⬆️ Raise blinds',
},
value: 'up',
},
{
type: 'button',
text: {
type: 'plain_text',
text: '⬇️ Lower blinds',
},
value: 'down',
},
{
type: 'button',
text: {
type: 'plain_text',
text: '❌ Cancel',
},
value: 'cancel',
},
],
},
]
},
},
async (response, convo, bot, b) => {
console.log('response', convo, b)
await bot.say('Oh your response is ' + response)
},
'blindCommand'
)
controller.addDialog(dialog)
I created a KendoUI grid where the first column uses a custom editor. After editing, it doesn't call request of update, however if it is not using editor it will call request of update. Why?
var columns = [
{ field: 'AccountId', title: '客户名称', locked: false, template: '#= me.detail.brandName(data, \'ID\') #', editor: accountGridEditor, width: 200 },
{ field: 'BankNo', title: '付款银行', template: '#= me.detail.format(data, \'Bank\') #', attributes: { style: 'text-align: left;' }, width: 150 },
{ field: 'UnLinkedAmount', title: '未分配', template: '#= me.detail.format(data, \'UnLinkedAmount\') #', attributes: { style: 'text-align: left;' }, width: 100 },
{ command: ["edit", "destroy"], title: " ", width: "250px" }
];
var dataSource = c.dataSourceOption({
transport: {
read: { url: url.api('Finance/FundJournal') },
update: { url: url.api('Finance/FundJournal', { action: 'post' }) },
destroy: { url: url.api('Finance/FundJournal', { action: 'delete' }), type: 'delete' },
parameterMap: function (data, type) {
console.log(type);
console.log(data);
if (type === 'read') return getReadParameters();
if (type === "update") return data;
if (type === 'create') return data;
if (type === 'destroy') return { id: data.Id };
return data;
}
},
schema: {
model: {
id: "Id",
fields: {
AccountId: { editable: true, nullable: false, validation: { required: true } },
BankNo: { editable: false},
UnLinkedAmount: { editable: false }
}
}
},
filter: [{ field: 'SubType', operator: 'neq', value: 'Id' }]
});
var grid = $("#result").kendoGrid({
dataSource: dataSource,
height: 550,
columns: columns,
editable: "inline",
save:function(e){$.ajax();}
}).data('kendoGrid');
If record property is set from dropdownlist something like this:
change: function() {
options.model.Name = this.value();
options.model.dirty = true;
}
it is necessary explicitly to set that model as dirty, to say to datasource that this record was modified and need to be updated. Otherwise, you can use set().
change: function() {
options.model.set('Name',this.value());
}
That way record is automatically marked as dirty in datasource.
I am building a dx-chart inside of an AngularJS file. I would like to use $http.get inside of my ng-controller. Here is the AngularJS file. However, when I try to use $http.get I still display the chart but there is not data passed in. If I remove the $http argument and $http.get in the dataSource, I am able to display my data using the Json format passed in from my URL.
AngularJS File
var app = angular.module('customCharts', ['dx']);
function ChartController($scope, $http) {
$scope.productSettings = {
dataSource: $http.get("http://localhost:53640/Home/PostChart"),
title: 'Displays Product Costs for items in our Database',
series: {
argumentField: "Name",
valueField: "Cost",
type: "bar",
color: '#008B8B'
},
commonAxisSettings: {
visible: true,
color: 'black',
width: 2
},
argumentAxis: {
title: 'Items in Product Store Database'
},
valueAxis: {
title: 'Dollor Amount',
valueFormat: 'currency'
}
}
}
Hope you have issue with controller declaration:
Can you modify your code as below:
var app = angular.module('customCharts', ['dx']);
app.controller('ChartController', ['$scope', '$http', function($scope, $http) {
$scope.productSettings = {
dataSource: $http.get("http://localhost:53640/Home/PostChart"),
title: 'Displays Product Costs for items in our Database',
series: {
argumentField: "Name",
valueField: "Cost",
type: "bar",
color: '#008B8B'
},
commonAxisSettings: {
visible: true,
color: 'black',
width: 2
},
argumentAxis: {
title: 'Items in Product Store Database'
},
valueAxis: {
title: 'Dollor Amount',
valueFormat: 'currency'
}
}
}]);
Check here for syntax: https://docs.angularjs.org/guide/controller
Try this
function ChartController($scope, $http) {
$http.get("http://localhost:53640/Home/PostChart").success(function (data) {
$scope.productSettings = {
dataSource: data,
title: 'Displays Product Costs for items in our Database',
series: {
argumentField: "Name",
valueField: "Cost",
type: "bar",
color: '#008B8B'
},
commonAxisSettings: {
visible: true,
color: 'black',
width: 2
},
argumentAxis: {
title: 'Items in Product Store Database'
},
valueAxis: {
title: 'Dollor Amount',
valueFormat: 'currency'
}
};
});
}
I have put a fiddle here that demonstrates the issue.
http://jsfiddle.net/codeowl/fmzay/1/
Just delete a record, and it should rollback the delete as I am calling options.error from inside the destroy function.
Why is it that the grid doesn't roll back?
Regards,
Scott
Markup:
<div id="KendoGrid"></div>
JS:
var _data = [
{ Users_ID: 1, Users_FullName: 'Bob Smith', Users_Role: 'Administrator' },
{ Users_ID: 2, Users_FullName: 'Barry Baker', Users_Role: 'Viewer' },
{ Users_ID: 3, Users_FullName: 'Bill Cow', Users_Role: 'Editor' },
{ Users_ID: 4, Users_FullName: 'Boris Brick', Users_Role: 'Administrator' }
],
_dataSource = new kendo.data.DataSource({
data: _data,
destroy: function (options) {
options.error(new Error('Error Deleting User'));
}
});
$('#KendoGrid').kendoGrid({
dataSource: _dataSource,
columns: [
{ field: "Users_FullName", title: "Full Name" },
{ field: "Users_Role", title: "Role", width: "130px" },
{ command: ["edit", "destroy"], title: " ", width: "180px" }
],
toolbar: ['create'],
editable: 'popup'
});
Signaling the error is not enough. Lets say that having an error on removing a record is not enough since KendoUI doesn't know if the record has actually been removed in the server and the reply is the one producing the error. So KendoUI approach is a conservative approach: You have to decide what to do and explicitly say it:
So what you should do is add an error hander function that invokes a cancelChanges in the grid.
The code would be:
_dataSource = new kendo.data.DataSource({
transport: {
read: function(options) {
options.success(_data);
console.log('Read Event Has Been Raised');
},
destroy: function (options) {
options.error(new Error('Error Deleting User'));
console.log('Destroy Event Has Been Raised');
}
},
schema: {
model: {
id: "Users_ID",
fields: {
Users_ID: { editable: false, nullable: true },
Users_FullName: { type: "string", validation: { required: true } },
Users_Role: { type: "string", validation: { required: true } }
}
}
},
error: function(a) {
$('#KendoGrid').data("kendoGrid").cancelChanges();
}
});
And the updated JSFiddle in here: http://jsfiddle.net/OnaBai/fmzay/3
The ASP.NET-MVC equivalent solution to the OnaBai answer would be:
<script type="text/javascript">
function cancelChanges(e) {
e.sender.cancelChanges();
}
</script>
#Html.Kendo().Grid<MyClass>()
.DataSource(dataSource =>
dataSource
.Ajax()
.Read(read => read.Action("Read", "MyController"))
.Destroy(destroy => destroy.Action("Destroy", "MyController"))
.Events(evt => evt.Error("cancelChanges"))
)
[...]
Please be aware that the cancelChanges event will be called upon an error on every CRUD request.